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
小编说
以上是编程之家为你收集整理的wavesurfer.js全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。