問題一: 音效延遲
通常我們會使用在線的音源文件。
問題就會出現點擊按鈕后出現音效延遲,因為網絡文件需要加載時間。
網絡上說的先設置 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等帶來的問題。
如此完成不同按鈕對應不同音效播放的效果。