JS 音频可视化插件Wavesurfer.js的使用教程

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   绑定所有的事件  

实例演示

// 音频加载 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   鼠标点击某个位置的时候触发  

实例演示:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/b9811c1a0a604e51de7bfe9134949790.html