// 加载时候 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.js";
插件定义
this.wavesurfer = WaveSurfer.create({
plugins: [RegionsPlugin.create()]
});
Regions方法
方法
说明
addRegion(options)
在waveform中创建一个Region。返回一个Region对象
clearRegions()
移除所有的regions
enableDragSelection(options)
可以通过选择来创建支持拖拽和改变大小的Regin
实例演示：
参数
默认值
说明
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官网
总结
以上所述是小编给大家介绍的JS 音频可视化插件Wavesurfer.js的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: