Wavesurfer.js音频播放器插件的使用教程 (2)

实例演示：

// 加载时候 this.wavesurfer.on("loading", percents => { // 当前加载的进度 this.percent = percents; }); // 加载成功 this.wavesurfer.on("ready", () => { this.progress = false; }); // 播放中 this.wavesurfer.on("audioprocess", () => { this.currentTime = this.getCurrentTime(); }); // 结束播放 this.wavesurfer.on("finish", () => { this.wavesurfer.pause(); }); 4、Regions插件

Regions用于音频播放器waveform视觉效果部分，可以用它来标注某个区域。Regions可以被拖拽和改变尺寸大小。

引入插件

import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";

插件定义

this.wavesurfer = WaveSurfer.create({ plugins: [RegionsPlugin.create()] });

Regions方法

方法 说明
addRegion(options)   在waveform中创建一个Region。返回一个Region对象  
clearRegions()   移除所有的regions  
enableDragSelection(options)   可以通过选择来创建支持拖拽和改变大小的Regin  

Regions的options

参数 默认值 说明
id     region的id  
start   0   region的开始位置，单位秒  
end   0   region的开始位置，单位秒  
loop   false   播放完毕后是否循环播放  
drag   true   是否支持拖拽  
resize   true   是否支持改变region的大小  
color   "rgba(0, 0, 0, 0.1)"   region的颜色  

实例演示：

this.currentRegion = this.wavesurfer.addRegion({ id: id, start: startTime, end: endTime, loop: false, drag: false, resize: false, color: "rgba(254, 255, 255, 0.4)" });

Regions的方法

方法 说明
play()   播放region  
playLoop()   循环播放region  
remove()   移除region  

Regions的事件

事件 说明
remove   在region被移除前触发  
update   当region被更新时触发  
click   当region点击时触发  
dbclick   当region被双击时触发  
over   当region被鼠标滑入时触发  
leave   当在region上的鼠标离开时触发  
// 更新起始时间 this.currentRegion.update({ start: newStartTime }); // 移除region this.currentRegion.remove();

更多方法请看官网：wavesurfer官网