// 第一步:在manifest.json中添加"requiredBackgroundModes": ["audio"]。在源码视图中,找到weixin->appid同级添加键值对
"mp-weixin" :{
"appid" : "wx03570",
"requiredBackgroundModes": ["audio"]
}
// 第二步:在获取歌曲地址的方法中填写相关 播放属性,只需要添加title+src属性即可
getMusicUrl() {
// 调用api获取播放改歌曲的数据
this.$api.songUrl(_data).then( res => {
// 使用this在其他方法中也可以调用
this.bgAudioManager = uni.getBackgroundAudioManager()
this.bgAudioManager.title = res.data[0].name
this.bgAudioManager.src = res.data[0].url
// 播放回调
this.bgAudioManager.onPlay(() => {
// 这里实现一些音乐播放的回调事件:背景图片开始旋转,按钮icon图标变化
})
// 暂停回调
this.bgAudioManager.onPause(() => {
// 这里实现一些音乐停止的回调事件:背景图片停止旋转,按钮icon图标变化
})
})
}
// 点击播放按钮事件
suspend() {
// true 表示暂停或停止,false 表示正在播放
if(this.bgAudioManager.paused) {
// 如果暂停就调用播放函数
this.bgAudioManager.play()
}else if(this.bgAudioManager.paused) {
// 如果播放状态就调用暂停函数
this.bgAudioManager.pause()
}
}
// 第三步:在onload函数调用即可播放音乐
onLoad() {
this.getMusicUrl()
}
官方接口:https://uniapp.dcloud.io/api/media/background-audio-manager
uniapp背景音乐api使用方法
最新推荐文章于 2024-05-11 14:55:52 发布