Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法。
1、创建实例引入插件
import WaveSurfer from "wavesurfer.js";创建实例对象
this.wavesurfer = WaveSurfer.create(options);options
参数 默认值 说明audioRate 1 音频的播放速度，数值越小越慢
barWidth none 如果设置，波纹的样式将变成类似柱状图的形状
barHeight 1 波纹柱状图的高度，当大于1的时候，将增加设置的高度
barGap none 波纹柱状图之间的间距
container none 必填参数，指定渲染的dom的id名、类名或者dom本身
cursorColor none 鼠标点击的颜色
cursorWidth 1 鼠标点击显示的宽度
height 128 音频的显示高度
hideScrollbar false 当出现横坐标的时候，设置是否显示
mediaType audio 音频的类型，支持video
plugins [] 使用的插件
progressColor #555 光标后面的波形部分的填充颜色
waveColor #555 光标后面的波形的填充颜色
xhr {} 额外的请求XHR参数
实例演示：
this.wavesurfer = WaveSurfer.create({ container: "#wave", waveColor: "#368666", progressColor: "#6d9e8b", cursorColor: "#fff", height: 80, plugins: [RegionsPlugin.create()] });load(url) 加载音频
loadBlob(url) 从Bolb或者file对象中调用音频
play([start[, end]]) 从当前位置开始播放音频文件。结合使用start和end可以指定一个音频播放范围
playPause() 如果当前为状态状态开始播放，反之暂停播放
pause() 停止播放
stop() 停止播放并回到音频文件的起始处
empty() 清空waveform
destroy() 销毁waveform，移除事件，元素和关联节点
getCurrentTime() 获取当前播放的进度，单位：秒
getDuration() 获取音频的总时长，单位：秒
getVolume() 获取音量
setVolume(v) 设置音量[0-1]
skip(offset) 调到offset的位置
skipBackward() 倒退skipLength秒
skipForward() 前进skipLength秒
isPlaying() 判断音频是否在播放
on(eventName, callback) 绑定事件
un(eventName, callback) 解绑事件
unAll 绑定所有的事件
实例演示：
// 音频加载 this.wavesurfer.load(audioUrl); // 获取总时长 let duration = parseInt(this.wavesurfer.getDuration()); // 停止播放并回到起始点 this.wavesurfer.stop(); 3、事件绑定使用on()和un()对事件进行绑定和解绑操作。
事件 说明audioprocess 音频播放时触发
destroy 音频销毁时触发
error 音频出错时触发
finish 音频播放结束时触发
loading 音频加载时触发
ready 音频加载成功时触发
play 音频开始播放时触发
pause 音频暂停时触发
scroll 当有滚动条滚动的时候触发
volume 声音调整时触发
seek 鼠标点击某个位置的时候触发