• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

问题一: 音效延迟

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

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

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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序scroll-view横向滚动发布时间:2022-07-18
下一篇:
原创:微信小程序入口猜想?发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap