问题一: 音效延迟
通常我们会使用在线的音源文件。
问题就会出现点击按钮后出现音效延迟,因为网络文件需要加载时间。
网络上说的先设置 src,并不会改变延迟的结果。
解决办法: 把音频文件放置在小程序文件夹一并上传,按钮音效文件比较小,对整体文件大小影响不大。
问题二:
有多种按钮,对应不同的声音。
通常会不停改变src,来播放不同声音。
这会变得挺麻烦,代码量也会增加。
以前的办法是把src写进一个数组 ,改变的时候只要切换数组游标即可。
目前的最佳解决办法:
将所有音频文件合并成一个音频文件(用Cool Edit Pro)
记录下每个声音的起始位置, 比如 第一个声音是 0秒 到 0.3秒 第二个声音是0.8秒到 1.2秒 ...以此类推
将上述的 音频时间 存入data数组
data: {
menuSound: [\'0\', \'0.8\']
}
由于大多数按钮音效一般都低于0.5秒时长,因此只设置起始位置,播放从每个音效的起始位置开始 ,播放时长为 500毫秒。
假设播放器为
const menuClicker = wx.createInnerAudioContext()
menuClicker.src = \'/statis/sound/menu_click.mp3\'
将 menuClicker 播放器存入 data
this.setData({
menuClicker: menuClicker
})
(为什么要存入data呢? 因为不存入,会出现很多奇怪的现象,踩过坑的都懂。)
设 播放音效的方法为:
menuPlay(n) {
let start = this.data.menuSound[n]
this.data.menuClicker.seek(n)
this.data.menuClicker.play()
setTimeout(() => {
this.data.menuClicker.stop()
}, 500)
}
这里使用了createInnerAudioContext的seek 功能,官网文档: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.seek.html
按钮点击后,调用播放方法:
this.menuPlay(n)
这里的n是menuSound自定义在data数组中的音效声源游标,比如要播放第一个音效:this.menuPlay(0)
即播放前直接跳转到 start位置,同时设置一个计时器,500毫秒后自动停止播放。
经过实测,完美解决延迟、切换src等带来的问题。
如此完成不同按钮对应不同音效播放的效果。
请发表评论