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

您所在的位置：网站首页 › 播放播放这个图片 › uniapp小程序背景音乐自动播放、播放、暂停

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

2024-01-13 19:04| 来源: 网络整理| 查看: 265

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

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

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

持续更新中

【本文地址】

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

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

今日新闻

推荐新闻