wavesurfer.js

wavesurfer.js 介绍

Wavesurfer.js是一款基于html5 canvas和Web Audio的音频播放器插件 。Wavesurfer.js用于创建交互式可操作音频可视化，使用Web Audio和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参数说明：

参数

默认值

说明

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参数

网站地址:https://wavesurfer-js.org

GitHub:https://github.com/katspaugh/wavesurfer.js

网站描述:JS 音频可视化插件

wavesurfer.js

官方网站：https://wavesurfer-js.org