微信小程序开发 - 如何解决按钮音效延迟和使用多种声效的问题？

微信小程序 音频 音效 延迟 共用播放器

问题一： 音效延迟

通常我们会使用在线的音源文件。

问题就会出现点击按钮后出现音效延迟，因为网络文件需要加载时间。

网络上说的先设置 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等带来的问题。

如此完成不同按钮对应不同音效播放的效果。