uni-app实现自定义操作音效

背景

一个好的软件，页面或者是一些操作之间的衔接必须要流畅，出了受到手机自身硬件和网速的影响之外，还可以通过制作过度动画来显得很流畅，此外也可以使用一些自定义音效来提升用户的体验。我个人特别比较有感觉的就是苹果的闹钟，移动的时候会发出“哒哒哒哒哒哒...."特别清脆的声响，同时手机也还在振动，那一刻这个闹钟就把我魂给吸走了。

第一步 下载需要的音效

在 http://www.aigei.com/sound/class/click/ 这个网站上搜索需要的音效，免费的，真的爱了爱了，根据你自己的需求来选，比如我需要的是一个点击音效，那这个音效肯定不能太长，不得大于一秒钟。

下载好之后，要把这个音效放到公网上，可以放到自己的服务器上，我这里就放到了腾讯云的cos服务器上，我在里面的设置的桶是公开的，所以你们可以直接复制粘贴我下面的链接到浏览器上，就可以获取了。

第二步 在uni-app中使用

在这里我用的是uni-app的 “createinneraudiocontext” api。
附上链接：https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext
uni-app 的文件目录如下：

//utils.js
var music={
		//因为这个音效听起来是de的声音，所以我取这个函数名，方便记忆音效，找的合适的场景就能想起来。
		play_dede:function(){
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = 'https://haibobo-1259500678.cos.ap-nanjing.myqcloud.com/click1.mp3';
			innerAudioContext.onPlay(() => {
		  	console.log('开始播放');
			});
			innerAudioContext.onError((res) => {
		  	console.log(res.errMsg);
		  	console.log(res.errCode);
		});
	},
}

module.exports = music;

//在mian.js中
import music from './utils/utils.js'
Vue.prototype.music =music 

绑定到Vue的原型里边之后，接下来就可以通过 this.music.play_dede() 这种形式来访问了,之所以上面要这么写主要是考虑到了一个项目可能要用到很多不同的音效，你就可以全部整合到utils.js的music里面去，这样也方便日后管理，拓展性就变得特别强。