wavesurfer.js是一款基于html5 canvas和web audio的音频播放器插件，本文主要记录它及其视觉效果插件regions插件的使用方法。
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();
使用on()和un()对事件进行绑定和解绑操作。
| 事件 | 说明 |
|---|---|
| audioprocess | 音频播放时触发 |
| destroy | 音频销毁时触发 |
| error | 音频出错时触发 |
| finish | 音频播放结束时触发 |
| loading | 音频加载时触发 |
| ready | 音频加载成功时触发 |
| play | 音频开始播放时触发 |
| pause | 音频暂停时触发 |
| scroll | 当有滚动条滚动的时候触发 |
| volume | 声音调整时触发 |
| seek | 鼠标点击某个位置的时候触发 |
实例演示：
// 加载时候
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();
});
regions用于音频播放器waveform视觉效果部分，可以用它来标注某个区域。regions可以被拖拽和改变尺寸大小。
import regionsplugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
this.wavesurfer = wavesurfer.create({
plugins: [regionsplugin.create()]
});
| 方法 | 说明 |
|---|---|
| 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)"
});
| 方法 | 说明 |
|---|---|
| play() | 播放region |
| playloop() | 循环播放region |
| remove() | 移除region |
| 事件 | 说明 |
|---|---|
| remove | 在region被移除前触发 |
| update | 当region被更新时触发 |
| click | 当region点击时触发 |
| dbclick | 当region被双击时触发 |
| over | 当region被鼠标滑入时触发 |
| leave | 当在region上的鼠标离开时触发 |
// 更新起始时间
this.currentregion.update({ start: newstarttime });
// 移除region
this.currentregion.remove();
更多方法请看官网：
如对本文有疑问， 点击进行留言回复！！
网友评论