uniapp小程序背景音乐自动播放、播放、暂停

在做小程序的时候时常会用到背景音乐,对于背景音乐的使用有刚进入页面时会自动播放背景音乐,不想听点击暂停按钮,播放暂停,点击播放按钮,音乐播放

1、在html中添加两张图片:播放和暂停,v-show来动态切换图片显示,并绑定点击事件,实现手动暂停和播放音乐

<!-- 播放图片  播放音乐 -->
            <view class="Remember-RadioImg">
                <image src="../../static/img/radio2.jpg" 
                       v-show="musicShow" "
                       @click="bjMusicClick">
                </image>
                <image src="../../static/img/radio1.jpg" 
                       v-show="!musicShow" "
                       @click="bjMusicClick"></image>
            </view>

2、创建音乐实例,data中声明初始化v-show表达式的值,true时图片为播放图片

// 构建背景音乐实列
 const innerAudioContext = uni.createInnerAudioContext();
       data() {
            return {
                // 图片是播放图片还是暂停图片
                musicShow: true,
    }
 }

3、若想要在刚进入页面时音乐就播放,需要在生命周期开始时页面渲染时添加自动播放

innerAudioContext.autoplay = true;//自动播放
innerAudioContext.loop = true; //循环播放
//音乐播放
innerAudioContext.play()
//音乐地址
innerAudioContext.src =
'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';

4、点击图片实现音乐播放的方法

bjMusicClick() {
                if (this.musicShow == true) {
                    // 暂停音乐
                    // console.log('暂停')
                    innerAudioContext.pause();
                    this.musicShow = false
                } else if(this.musicShow == false){
                    // 播放音乐
                    // console.log('播放')
                    innerAudioContext.play()
                    this.musicShow = true
                }
                
            },

更多好玩的可以看官网👇,里面写的很清楚

https://uniapp.dcloud.net.cn/api/media/audio-context.html#createinneraudiocontext

持续更新中

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值