uniapp单页面背景音乐_uniapp封装背景音频

uniapp单页面背景音乐实现

uniapp中提供了背景音乐的API，配置非常的繁琐，而且需要申请权限。如果只是一个页面需要，我们不如直接利用音频API，来进行曲线救国，简单方便！我可真是个小机灵鬼（-_-）~!

使用：

在script中构建实例：

const innerAudioContext = uni.createInnerAudioContext();
1

在data中定义一个变量用来控制是否选择停止播放

data() {
	return {
		lastRecord: ''
	}
}
1
2
3
4
5

在methods中定义方法

playVoice(url) { // url即为音频路径
	if (url) {
		// 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
		if (this.lastRecord == url && !innerAudioContext.paused) {
			innerAudioContext.stop();  // 停止
			return;
		}
		this.lastRecord = url; 			// 将路径赋值给定义的变量好做判断
		innerAudioContext.src = url;  	// 配置音频播放路径
		innerAudioContext.play();		// 播放
		innerAudioContext.loop = true	// 是否循环播放
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

接下来直接在onLoad中调用，当页面一打开不就自动播放音乐了，背景音乐不就成功了，岂不是美滋滋：

onLoad(){
	this.playVoice(音频路径)
}
1
2
3

当然你们可能会有些好奇，为什么要定义一个变量进行赋值操作。因为我们通常有了背景音乐之后，伴随着的就是让用户点击某个图标音频播放实现背景音乐暂停播放的需求，那我们直接再给那个图标添加一个点击事件，调用这个方法就OK。ok，问题解决