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()]});2、方法调用
| 方法 | 说明 |
|---|---|
| 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 | 绑定所有的事件 |
新闻热点
疑难解答
图片精选
