基于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');                
              

配置参数

方法

所有的方法都是公开的，下面是一些常用的方法：

• 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]])：从当前位置开始播放音频文件。结合使用start和end可以指定一个音频播放范围。
• playPause()：如果当前为状态状态开始播放，反之暂停播放。
• seekAndCenter(progress)：Seeks to a progress and centers view [0..1] (0 = beginning, 1 = end).
• seekTo(progress： Seeks to a progress [0..1] (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..1]。（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或拖拽文件时不断触发。回调函数接收一个百分比的加载进度[1..100]和一个事件对象。
• mouseup：当松开一个鼠标按键时触发。回调函数接收MouseEvent对象。
• pause：音频播放器暂停时触发
• play：音频播放器处于播放状态时触发。
• ready：当音频文件被调用，解码完成，并且waveform已经绘制完成后触发。
• scroll：当滚动条被移动时触发。回调函数接收一个ScrollEvent对象。
• seek：当seek时触发。回调函数接收一个浮点数的进度[0..1]。

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

Region方法

• in：当playback进入region时触发。
• out：当playback离开region时触发。
• remove：在region被移除前触发。
• update：当region的选项被更新时触发。
• click：当鼠标在region中点击时触发。回调函数接收MouseEvent对象。
• dblclick：当鼠标在region中双击时触发。回调函数接收MouseEvent对象。
• over：当鼠标在region中滑过时触发。回调函数接收MouseEvent对象。
• leave：当鼠标离开region时触发。回调函数接收MouseEvent对象。