wavesurfer.js 介绍
Wavesurfer.js是一款基于html5 canvas和Web Au dio 的音频播放器 插件 。Wavesurfer.js用于创建交互式可操作音频可视化，使用Web Au dio 和html5 Canvas技术。可以 显示 当前音频的声波。
利用 wavesurfer.js 你可以创建漂亮的 html5 音乐播放器或 一个 复杂的DJ应用。
使用 方法
选择 一个 容器：
<divid="waveform"></div>
创建 一个 实例，通过容器的选择选项：
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
订阅 一些事件：
wavesurfer.on('ready',function () {
wavesurfer.play();
});
从 一个 URL加载音频 文件 ：
wavesurfer.load('example/media/demo.wav');
options参数说明：
参数
默 认值
说明
au dio Rate
1
音频的播放速度，数值越小越慢
barWidth
none
如果设置，波纹的样式将变成类似柱状图的形状
barHeight
1
波纹柱状图的高度，当大于1的时候，将 增加 设置的高度
barGap
none
波纹柱状图之 间的 间距
container
none
必填参数，指定渲染的dom的id名、类名或者dom本身
cursorColor
none
鼠标点击的颜色
cursorWidth
1
鼠标点击 显示 的宽度
height
128
音频的 显示 高度
hideScrollbar
false
当出现横坐标的时候，设置是否 显示
mediaType
au dio
音频的类型， 支持 video
plugins
[]
使用的 插件
progressColor
#555
光标后面的波形部分的填充颜色
waveColor
#555
光标后面的波形的填充颜色
xhr
{}
额外的请求XHR参数
网站地址 : https://wavesurfer-js.org
GitHub: https://github.com/katspaugh/wavesurfer.js
网站描述: JS 音频可视化 插件
wavesurfer.js官方网站
官方网站： https://wavesurfer-js.org
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。