Wavesurfer.js音訊播放器外掛的使用教程
阿新 • • 發佈：2018-10-31
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.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官網