Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法。
1、创建实例
- 引入插件
import WaveSurfer from "wavesurfer.js";
- 创建实例对象
this.wavesurfer = WaveSurfer.create(options);
options
实例演示：
this.wavesurfer = WaveSurfer.create({ container: "#wave", waveColor: "#368666", progressColor: "#6d9e8b", cursorColor: "#fff", height: 80, plugins: [RegionsPlugin.create()]});
2、方法调用
实例演示：
// 音频加载this.wavesurfer.load(audioUrl);// 获取总时长let duration = parseInt(this.wavesurfer.getDuration());// 停止播放并回到起始点this.wavesurfer.stop();
3、事件绑定
使用on()和un()对事件进行绑定和解绑操作。
实例演示：
// 加载时候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方法
- Regions的options
实例演示：
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的方法
- Regions的事件
// 更新起始时间this.currentRegion.update({ start: newStartTime });// 移除regionthis.currentRegion.remove(); 更多方法请看官网：wavesurfer官网
