Wavesurfer.js音频播放器插件的使用教程

wavesurfer.js是一款基于html5 canvas和web audio的音频播放器插件，本文主要记录它及其视觉效果插件regions插件的使用方法。

1、创建实例

引入插件

import wavesurfer from "wavesurfer.js";

创建实例对象

this.wavesurfer = wavesurfer.create(options);

options

参数默认值说明audiorate1音频的播放速度，数值越小越慢barwidthnone如果设置，波纹的样式将变成类似柱状图的形状barheight1波纹柱状图的高度，当大于1的时候，将增加设置的高度bargapnone波纹柱状图之间的间距containernone必填参数，指定渲染的dom的id名、类名或者dom本身cursorcolornone鼠标点击的颜色cursorwidth1鼠标点击显示的宽度height128音频的显示高度hidescrollbarfal当出现横坐标的时候，设置是否显示mediatypeaudio音频的类型，支持videoplugins[]使用的插件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可以指定一个音频播放范围playpau()如果当前为状态状态开始播放以名人为话题的作文，反之暂停播放pau()停止播放stop()停止播放并回到音频文件的起始处empty()清空waveformdestroy()销毁waveform，移除事件，元素和关联节点getcurrenttime()获取当前播放的进度，单位：秒getduration()获取音频的总时长，单位：秒getvolume()获取音量tvolume(v)设置音量[0-1]skip(offt)调到offt的位置skipbackward()倒退sk唐朝武则天iplength秒skipforward()前进skiplength秒isplaying()判断音频是否在播放on(eventname, callback)绑定事件un(eventname, callback)解绑事件unall绑定所有的事件

实例演示：

// 音频加载this.wavesurfer.load(audiourl);// 获取总时长let duration = parint(this.wavesurfer.getduration());// 停止播放并回到起始点this.wavesurfer.stop();

3、事件绑定

使用on()和un()对事件进行绑定和解绑操作。

事件说明audioprocess音频播放时触发destroy音频销毁时触发error音频出错时触发finish音频播放结束时触发loading音频加载时触发ready音频加载成功时触发play音频开始播放时触发pau音频暂停时触发scroll当有滚动条滚动的时候触发volume声音调整时触发ek鼠标点击某个位置的时候触发

实例演示：

// 加载时候this.wavesurfer.on("loading", percents => {    // 当前加载的进度    this.percent = percents;});// 加载成功this.wavesurfer.on("ready", () => {    this.progress = fal;});// 播放中this.wavesurfer.on("audioprocess", () => {    this.curre北京大专院校nttime = this.getcurrenttime();});// 结束播放this.wavesurfer.on("finish", () => {    this.wavesurfer.pau();});

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()移除所有的regionnabledraglection(options)可以通过选择来创建支持拖拽和改变大小的reginregions的options参数默认值说明idregion的idstart0region的开始位置，单位秒end0region的开始位置，单位秒loopfal播放完毕后是否循环播放dragtrue是否支持拖拽resizetrue是否支持改变region的大小color“rgba(0, 0, 0, 0.1)”region的颜色

实例演示：

this.currentregion = this.wavesurfer.addregion({    id: id,    start: starttime,    end: endtime,    loop: fal,    drag孙悟空性格: fal,    resize: fal,    color: "rgba(254, 255, 255, 0.4)"});

regions的方法方法说明play()播放regionplayloop()循环播放regionremove()移除regionregions的事件事件说明remove在region被移除前触发update当region被更新时触发click当region点击时触发dbclick当region被双击时触发over当region被鼠标滑入时触发leave当在region上的鼠标离开时触发

// 更新起始时间this.currentregion.update({ start: newstarttime });// 移除regionthis.currentregion.remove();

更多方法请看官网：