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

子润先生

修改于 2021-06-25 10:34:50

1.3K00

代码可运行

文章被收录于专栏：用户8644135的专栏用户8644135的专栏

运行总次数：0

代码可运行

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

第一步，准备一个音乐文件，例如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
		}
	}
})

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序