碧羽墨轩小程序发布了,扫码进来看看吧^_^
小程序码

小程序添加背景音乐,避开了深坑,记录实现方法

碧羽墨轩 2020-09-29【学无止境】561人已围观

简介 小程序背景音乐,看着官方文档实现,难免会遇到这样那样的坑,例如切换页面,音乐重头播放。如何实现手动暂停、播放。下面就介绍了如何简单实现背景音乐播放。

第一步,准备一个音乐文件,例如xxx.mp3
注意:链接使用https://开头的,最好把音乐文件存在自己的服务器

例如:https://域名/文件名.mp3

第二步,播放

注意:为了防止切换页面,歌曲重头播放。

将这段代码写在App.vue

onShow: function() {
	//关键代码
	wx.playBackgroundAudio({
		dataUrl: '音乐文件地址',
		title: '歌曲名称',
		coverImgUrl: '封面图'
	})
}

第三步,实现手动暂停,播放

1.切换的图片view

<image @tap="playMusic" v-if="isPlay" src="/static/music_on.png"></image>
<image @tap="playMusic" v-if="!isPlay" src="/static/music_off.png"></image>

注意:

playMusic为点击的事件
isPlay判断是否是播放状态,修改当前的图片,声明在data中

2.事件介绍

playMusic () {
	if (this.isPlay) {
		wx.pauseBackgroundAudio()//暂停
	} else {
		wx.playBackgroundAudio({
			dataUrl: '音乐文件地址',
		});//播放
	}
	// 修改播放状态,用于切换图片
	this.isPlay = !this.isPlay
}

3.在当前页面检测歌曲的播放状态,用于改变播放的图片

var that = this
wx.getBackgroundAudioPlayerState({
	success (res) {
		if(res.status === 1){
			that.isPlay = true
		}else{
			that.isPlay = false
		}
	}
})

文章评论
总共 0 条评论
这篇文章还没有收到评论,赶紧来抢沙发吧~