微信小程序開發 - 如何解決按鈕音效延遲和使用多種聲效的問題


問題一: 音效延遲

通常我們會使用在線的音源文件。

問題就會出現點擊按鈕后出現音效延遲,因為網絡文件需要加載時間。

網絡上說的先設置 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