淺析wavesurfer.js中的各大監聽事件

前言：vue中嵌入使用wavesurfer.js的教程詳見：https://blog.csdn.net/zrcj0706/article/details/104635357

1、在使用wavesurfer.js插件時，可以設置各種監聽事件，比如播放完畢觸發什麼方法，設置靜音時觸發什麼方法等等，該插件官網有自定義好的各大事件的識別，只需要使用on方法設置監聽即可，如下代碼：

//音頻暫停時的監聽事件
wavesurfer.on('pause', function () {
    wavesurfer.params.container.style.opacity = 0.9;//識別到監聽事件後，需要執行的操作
});

2、官網爲我們準備的課直接使用的監聽事件

audioprocess–音頻播放時連續發射。搜尋時也會觸發。
dblclick –雙擊實例時。
destroy –實例被銷燬時。
error–發生錯誤。回調將收到（字符串）錯誤消息。
finish –完成播放時。
interaction –與波形有相互作用時。
loading–使用抓取或拖放加載時連續觸發。回調將以百分比[0..100]接收（整數）加載進度。
mute–靜音更改。回調將收到（布爾）新的靜音狀態。
pause –音頻暫停時。
play –播放開始時。
ready–加載，解碼和繪製音頻時，會顯示音頻。使用MediaElement時會在繪製波形之前觸發，請參見waveform-ready。
scroll-移動滾動條時。回調將收到一個ScrollEvent對象。
seek–在尋求。回調將收到（浮動）進度[0..1]。
volume–音量變化時。回調將收到（整數）新音量。
waveform-ready–使用MediaElement後端時，在繪製波形後觸發。如果您使用的是WebAudio後端，則可以使用ready。
zoom–縮放時。回調將收到（整數）minPxPerSec。