Web Audio的音频播放器插件wavesurfer
基于HTML5 canvas和Web Audio的音频播放器插件简要教程
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件。通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器，它可以在各种支持 Web Audio 的浏览器中工作，包括 Firefox, Chrome, Safari, Mobile Safari 和 Opera浏览器。
使用方法创建实例对象：
var wavesurfer = Object.create(WaveSurfer);
通过一个容器对象来初始化：wavesurfer.init({
container: '#wave',
waveColor: 'violet',
progressColor: 'purple'
});
调用事件：wavesurfer.on('ready', function () {
wavesurfer.play();
});
通过URL调用一个audio文件：wavesurfer.load('example/media/demo.wav');
配置参数
参数类型默认值描述
audioContextstringnull使用以前初始化的AudioContext或留空。
audioRatefloat1播放音频的速度，数值越小越慢。
backendstringWebAudioWebAudio或AudioElement。多数情况下你不用手动设置该参数。AudioElement是在浏览器不支持时的一个回退。
containermixednone用于绘制waveform的HTML元素的CSS选择器。这个参数为必写参数。
cursorColorstring#333音频线头部的光标指示的颜色。
cursorWidthinteger1单位像素。
fillParentbooleantrue是否填充容器或只是通过minPxPerSec来适应容器。
heightinteger128waveform的高度，单位像素。
hideScrollbarbooleanfalse是否显示水平滚动条。
interactbooleantrue初始化时是否可以使用鼠标来交互。你可以在后面随时修改该参数。
minPxPerSecinteger50Minimum number of pixels per second of audio.
pixelRatiointegerwindow.devicePixelRatio设置为1可以更快的渲染。
progressColorstring#555The fill color of the part of the waveform behind the cursor.
scrollParentbooleanfalseWhether to scroll the container with a lengthy waveform. Otherwise the waveform is shrunk to the container width
skipLengthfloat2skipForward()和skipBackward()方法每秒钟skip的数量。
waveColorstring#999The fill color of the waveform after the cursor.
方法所有的方法都是公开的，下面是一些常用的方法：
[*]init(options)：使用上面的参数来初始化。
[*]destroy()：移除事件和元素，并断开Web Audio的节点。
[*]empty()：当调用一个0长度的音频文件将清空waveform。
[*]getCurrentTime()：以秒为单位返回当前的进度。
[*]getDuration()：以秒为单位返回当前的audio clip持续时间。
[*]load(url)：通过XHR从URL上调用音频文件。返回XHR对象。
[*]loadBlob(url)：从Blob或file对象中调用音频文件。
[*]on(eventName, callback)：绑定一个事件。看后面的事件描述。
[*]un(eventName, callback)：解绑一个事件。
[*]unAll()：解绑所有的事件。
[*]pause()：暂停播放。
[*]play(])：从当前位置开始播放音频文件。结合使用start和end可以指定一个音频播放范围。
[*]playPause()：如果当前为状态状态开始播放，反之暂停播放。
[*]seekAndCenter(progress)：Seeks to a progress and centers view (0 = beginning, 1 = end).
[*]seekTo(progress： Seeks to a progress (0=beginning, 1=end).
[*]setFilter(filters)：For inserting your own WebAudio nodes into the graph.
[*]setPlaybackRate(rate)：设置重放的速度。(0.5 is half speed, 1 is normal speed, 2 is double speed and so on).
[*]setVolume(newVolume)：静重放的音量设置为一个新值。（0 = silent, 1 = maximum）
[*]skip(offset)：Skip a number of seconds from the current position (use a negative value to go backwards).
[*]skipBackward()：倒退skipLength秒。
[*]skipForward()：前进skipLength秒。
[*]stop()：停止音频文件的播放并回到音频文件的开始处。
[*]toggleMute()：音量切换开或者关。
[*]toggleInteraction()：切换鼠标的交互作用。
[*]toggleScroll()：切换scrollParent。
Connecting Filters你可以使用setFilter()方法在graph中插入你自己的Web Audio节点：var lowpass = wavesurfer.backend.ac.createBiquadFilter();
wavesurfer.backend.setFilter(lowpass);
事件WaveSurfer音频播放器的常用事件有：
[*]error ：发生错误时触发。回调函数接收一个错误信息字符串。
[*]finish：音频文件播放结束时触发。
[*]loading：在通过XHR或拖拽文件时不断触发。回调函数接收一个百分比的加载进度和一个事件对象。
[*]mouseup：当松开一个鼠标按键时触发。回调函数接收MouseEvent对象。
[*]pause：音频播放器暂停时触发
[*]play：音频播放器处于播放状态时触发。
[*]ready：当音频文件被调用，解码完成，并且waveform已经绘制完成后触发。
[*]scroll：当滚动条被移动时触发。回调函数接收一个ScrollEvent对象。
[*]seek：当seek时触发。回调函数接收一个浮点数的进度。
Region events（通过Regions插件使用）
[*]region-in：当回放进入某个区域时触发。回调函数接收一个Region对象。
[*]region-out：当回放离开某个区域时触发。回调函数接收一个Region对象。
[*]region-mouseenter：当鼠标移入某个区域时触发。回调函数接收一个Region对象和一个MouseEvent对象。
[*]region-mouseleave：当鼠标离开某个区域时触发。回调函数接收一个Region对象和一个MouseEvent对象。
[*]region-click：当鼠标在某个区域内点击时触发。回调函数接收一个Region对象和一个MouseEvent对象。
[*]region-dblclick：当鼠标在某个区域内双击时触发。回调函数接收一个Region对象和一个MouseEvent对象。
[*]region-created：当某个区域被创建时触发。回调函数接收一个Region对象。
[*]region-updated：当某个区域被更新时触发。回调函数接收一个Region对象。
[*]region-update-end：当拖动或改变尺寸结束时触发。
[*]region-removed：当某个区域被移除时触发。回调函数接收一个Region对象。
Regions 插件Regions用于音频播放器waveform视觉效果部分，可以用它来播放和循环音频文件。Regions可以被拖拽和改变尺寸大小。一般通过CSS文件来定制样式效果，使用选择器.wavesurfer-region和.wavesurfer-handle。要使用Regions插件，在页面中要引入plugin/wavesurfer.regions.js文件。然后可以使用wavesurfer.addRegion()方法来创建Region对象。 Region公开方法
[*]addRegion(options)：在waveform中创建一个Region。返回一个Region对象。
[*]clearRegions()：移除所有的Regions。
[*]enableDragSelection(options)：可以通过选择来创建Regin。waveform的区域通过鼠标来确定。options参数是Region对象的参数。
Region参数
参数类型默认值描述
idstringrandomregion的id。
startfloat0region的开始位置，单位秒。
endfloat0region的结束位置，单位秒。
loopbooleanfalseWhether to loop the region when played back.
dragbooleantrue是否允许拖拽region。
resizebooleantrue是否允许改变region的尺寸。
colorstring"rgba(0, 0, 0, 0.1)"HTML演示代码。
Region方法
[*]in：当playback进入region时触发。
[*]out：当playback离开region时触发。
[*]remove：在region被移除前触发。
[*]update：当region的选项被更新时触发。
[*]click：当鼠标在region中点击时触发。回调函数接收MouseEvent对象。
[*]dblclick：当鼠标在region中双击时触发。回调函数接收MouseEvent对象。
[*]over：当鼠标在region中滑过时触发。回调函数接收MouseEvent对象。
[*]leave：当鼠标离开region时触发。回调函数接收MouseEvent对象。
页:
[1]