使用wx.getBackgroundAudioManager()来实现背景音乐的播放,暂停,切换页面时,背景音乐停止播放
对用到这个api的伙伴,有点帮助,这是我参考网上的教程,总结出来的
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 获取BackgroundAudioManager 实例
this.back = wx.getBackgroundAudioManager()
// 对实例进行设置
// 设置了 src 之后会自动播放(src为云开发中云存储空间文件的链接)
this.back.src = "音乐地址"
this.back.title = '夜的钢琴曲' // 标题为必选项
this.back.play() // 开始播放
// 背景音乐循环的方法
var that = this.back
// 1、onEnded监听播放自然结束
this.back.onEnded (function(){
// 2、必须重新设置src才能循环之后会重新自动播放
that.src = "音乐地址"
})
},
handleProxy() {
this.back.pause(); // 点击音乐图标后出发的操作
this.setData({ on: !this.data.on })
if (this.data.on) {
this.back.play();
// toast 提示信息
var that = this;
this.setData({
showModal: true // 显示 toast
})
// 定时器 500ms 关闭toast
setTimeout(function() {
that.setData({
showModal: false
})
},500)
console.log("背景音乐已开启");
}else{
this.back.pause();
// toast 提示信息
var that = this;
this.setData({
showModalh:true // 显示 toast
})
// 定时器 500ms 关闭toast
setTimeout(function() {
that.setData({
showModalh: false
})
},500)
console.log("背景音乐已暂停");
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 切换页面时,再次回到原页面,
// 1.onHide() 中使用 pause() 会继续播放背景音乐
// 1.onHide() 中使用 stop() 会重新播放背景音乐
this.onReady()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// 页面隐藏时,暂停背景音乐
let that = this.back;
// that.pause(); //当重新回到原页面时,继续播放
that.stop(); //当重新回到原页面时,重新播放
},