前言: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。

 

Logo

前往低代码交流专区

更多推荐