问题描述

开发小程序要用到音频，这时我就想到了常用的标签audio，但是我突然在uniapp文档中看到：

注意： 微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，推荐使用API方式而不是组件方式来播放音频。API见 uni.createInnerAudioContext 替代。

于是开启了我的入坑之旅，一开始我使用官方提供的uni.createInnerAudioContext 先试试播放功能能不能用,代码写成了这个样子

const audio = uni.createInnerAudioContext();
audio.src = "https://music.163.com/song/media/outer/url?id=" + this.playList[this
					.playListIndex].id + ".mp3";
audio.play()

这样看着还是挺简单的，而且播放功能也实现了。播放能实现了我想暂停肯定也很简单，但事实没有我想象中的容易。

暂停功能一开始我想的是都写在一个函数里

const audio = uni.createInnerAudioContext();
audio.src = "https://music.163.com/song/media/outer/url?id=" + this.playList[this
					.playListIndex].id + ".mp3";

if(audio.paused){
	audio.play()
	this.$store.dispatch('isbtnShow',false)
}else{
	audio.pause()
	this.$store.dispatch('isbtnShow',true)
}	

但是这样写会有两个问题，首先是当点击暂停时，无法暂停，其次多点击几次播放按钮会重复播放歌曲。

于是我去官方文档里看看有没有解决方法，看了一下示例：

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});
innerAudioContext.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});

并没发现好的解决方法，于是我查了一上午的百度才知道解决办法。

首先要解决重复播放的问题，要把创建音频对象的代码也就是这句：const innerAudioContext = uni.createInnerAudioContext();放在export default前面。

要解决暂停的问题我是写了两个函数，点击播放的时候调用audio.play()，点击暂停的时候调用audio.pause()才解决的。