Wavesurfer.js是一款基於HTML5 canvas和Web Audio的音頻播放器插件，本文主要記錄它及其視覺效果插件Regions插件的使用方法。
1、創建實例
- 引入插件
import WaveSurfer from "wavesurfer.js";
- 創建實例對象
this.wavesurfer = WaveSurfer.create(options);
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參數 |
實例演示：
this.wavesurfer = WaveSurfer.create({
container: "#wave",
waveColor: "#368666",
progressColor: "#6d9e8b",
cursorColor: "#fff",
height: 80,
plugins: [RegionsPlugin.create()]
});
2、方法調用
| 方法 | 說明 |
|---|---|
| load(url) | 加載音頻 |
| loadBlob(url) | 從Bolb或者file對象中調用音頻 |
| play([start[, end]]) | 從當前位置開始播放音頻文件。結合使用start和end可以指定一個音頻播放范圍 |
| playPause() | 如果當前為狀態狀態開始播放，反之暫停播放 |
| pause() | 停止播放 |
| stop() | 停止播放並回到音頻文件的起始處 |
| empty() | 清空waveform |
| destroy() | 銷毀waveform，移除事件，元素和關聯節點 |
| getCurrentTime() | 獲取當前播放的進度，單位：秒 |
| getDuration() | 獲取音頻的總時長，單位：秒 |
| getVolume() | 獲取音量 |
| setVolume(v) | 設置音量[0-1] |
| skip(offset) | 調到offset的位置 |
| skipBackward() | 倒退skipLength秒 |
| skipForward() | 前進skipLength秒 |
| isPlaying() | 判斷音頻是否在播放 |
| on(eventName, callback) | 綁定事件 |
| un(eventName, callback) | 解綁事件 |
| unAll | 綁定所有的事件 |
實例演示：
// 音頻加載
this.wavesurfer.load(audioUrl);
// 獲取總時長
let duration = parseInt(this.wavesurfer.getDuration());
// 停止播放並回到起始點
this.wavesurfer.stop();
3、事件綁定
使用on()和un()對事件進行綁定和解綁操作。
| 事件 | 說明 |
|---|---|
| audioprocess | 音頻播放時觸發 |
| destroy | 音頻銷毀時觸發 |
| error | 音頻出錯時觸發 |
| finish | 音頻播放結束時觸發 |
| loading | 音頻加載時觸發 |
| ready | 音頻加載成功時觸發 |
| play | 音頻開始播放時觸發 |
| pause | 音頻暫停時觸發 |
| scroll | 當有滾動條滾動的時候觸發 |
| volume | 聲音調整時觸發 |
| seek | 鼠標點擊某個位置的時候觸發 |
實例演示：
// 加載時候
this.wavesurfer.on("loading", percents => {
// 當前加載的進度
this.percent = percents;
});
// 加載成功
this.wavesurfer.on("ready", () => {
this.progress = false;
});
// 播放中
this.wavesurfer.on("audioprocess", () => {
this.currentTime = this.getCurrentTime();
});
// 結束播放
this.wavesurfer.on("finish", () => {
this.wavesurfer.pause();
});
4、Regions插件
Regions用於音頻播放器waveform視覺效果部分，可以用它來標注某個區域。Regions可以被拖拽和改變尺寸大小。
- 引入插件
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";
- 插件定義
this.wavesurfer = WaveSurfer.create({
plugins: [RegionsPlugin.create()]
});
- Regions方法
| 方法 | 說明 |
|---|---|
| addRegion(options) | 在waveform中創建一個Region。返回一個Region對象 |
| clearRegions() | 移除所有的regions |
| enableDragSelection(options) | 可以通過選擇來創建支持拖拽和改變大小的Regin |
- Regions的options
| 參數 | 默認值 | 說明 |
|---|---|---|
| id | region的id | |
| start | 0 | region的開始位置，單位秒 |
| end | 0 | region的開始位置，單位秒 |
| loop | false | 播放完畢后是否循環播放 |
| drag | true | 是否支持拖拽 |
| resize | true | 是否支持改變region的大小 |
| color | "rgba(0, 0, 0, 0.1)" | region的顏色 |
實例演示：
this.currentRegion = this.wavesurfer.addRegion({
id: id,
start: startTime,
end: endTime,
loop: false,
drag: false,
resize: false,
color: "rgba(254, 255, 255, 0.4)"
});
- Regions的方法
| 方法 | 說明 |
|---|---|
| play() | 播放region |
| playLoop() | 循環播放region |
| remove() | 移除region |
- Regions的事件
| 事件 | 說明 |
|---|---|
| remove | 在region被移除前觸發 |
| update | 當region被更新時觸發 |
| click | 當region點擊時觸發 |
| dbclick | 當region被雙擊時觸發 |
| over | 當region被鼠標滑入時觸發 |
| leave | 當在region上的鼠標離開時觸發 |
// 更新起始時間
this.currentRegion.update({ start: newStartTime });
// 移除region
this.currentRegion.remove();
更多方法請看官網：wavesurfer官網