uniapp小程序背景音乐自动播放、播放、暂停-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

持续更新中文章来源地址https://www.toymoban.com/news/detail-504660.html

到了这里，关于uniapp小程序背景音乐自动播放、播放、暂停的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！