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


问题一: 音效延迟

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

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

网络上说的先设置 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等带来的问题。
如此完成不同按钮对应不同音效播放的效果。
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM