uniapp背景音乐api使用方法

// 第一步:在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

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值