Wavesurfer.js是一款基於HTML5 canvas和Web Audio的音頻播放器插件,本文主要記錄它及其視覺效果插件Regions插件的使用方法。 1、創建實例 引入插件 創建實例對象 options | 參數 | 預設值 | 說明 | | : |: |: | | audioRate | ...
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官網