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 | 綁定所有的事件 |
新聞熱點
疑難解答
圖片精選
