JS 音頻可視化插件Wavesurfer.js的使用教程
更新時(shí)間：2018年10月31日 16:40:33 作者：webhmy
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音頻播放器插件，本文主要記錄它及其視覺效果插件Regions插件的使用方法，感興趣的朋友跟隨小編一起看看吧
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音頻播放器插件，本文主要記錄它及其視覺效果插件Regions插件的使用方法。
1、創(chuàng)建實(shí)例
引入插件
import WaveSurfer from "wavesurfer.js";
創(chuàng)建實(shí)例對(duì)象
this.wavesurfer = WaveSurfer.create(options);
options
| 參數(shù) | 默認(rèn)值 | 說明 |
|---|---|---|
| audioRate | 1 | 音頻的播放速度，數(shù)值越小越慢 |
| barWidth | none | 如果設(shè)置，波紋的樣式將變成類似柱狀圖的形狀 |
| barHeight | 1 | 波紋柱狀圖的高度，當(dāng)大于1的時(shí)候，將增加設(shè)置的高度 |
| barGap | none | 波紋柱狀圖之間的間距 |
| container | none | 必填參數(shù)，指定渲染的dom的id名、類名或者dom本身 |
| cursorColor | none | 鼠標(biāo)點(diǎn)擊的顏色 |
| cursorWidth | 1 | 鼠標(biāo)點(diǎn)擊顯示的寬度 |
| height | 128 | 音頻的顯示高度 |
| hideScrollbar | false | 當(dāng)出現(xiàn)橫坐標(biāo)的時(shí)候，設(shè)置是否顯示 |
| mediaType | audio | 音頻的類型，支持video |
| plugins | [] | 使用的插件 |
| progressColor | #555 | 光標(biāo)后面的波形部分的填充顏色 |
| waveColor | #555 | 光標(biāo)后面的波形的填充顏色 |
| xhr | {} | 額外的請(qǐng)求XHR參數(shù) |
實(shí)例演示：
this.wavesurfer = WaveSurfer.create({
container: "#wave",
waveColor: "#368666",
progressColor: "#6d9e8b",
cursorColor: "#fff",
height: 80,
plugins: [RegionsPlugin.create()]
});
2、方法調(diào)用
| 方法 | 說明 |
|---|---|
| load(url) | 加載音頻 |
| loadBlob(url) | 從Bolb或者file對(duì)象中調(diào)用音頻 |
| play([start[, end]]) | 從當(dāng)前位置開始播放音頻文件。結(jié)合使用start和end可以指定一個(gè)音頻播放范圍 |
| playPause() | 如果當(dāng)前為狀態(tài)狀態(tài)開始播放，反之暫停播放 |
| pause() | 停止播放 |
| stop() | 停止播放并回到音頻文件的起始處 |
| empty() | 清空waveform |
| destroy() | 銷毀waveform，移除事件，元素和關(guān)聯(lián)節(jié)點(diǎn) |
| getCurrentTime() | 獲取當(dāng)前播放的進(jìn)度，單位：秒 |
| getDuration() | 獲取音頻的總時(shí)長，單位：秒 |
| getVolume() | 獲取音量 |
| setVolume(v) | 設(shè)置音量[0-1] |
| skip(offset) | 調(diào)到offset的位置 |
| skipBackward() | 倒退skipLength秒 |
| skipForward() | 前進(jìn)skipLength秒 |
| isPlaying() | 判斷音頻是否在播放 |
| on(eventName, callback) | 綁定事件 |
| un(eventName, callback) | 解綁事件 |
| unAll | 綁定所有的事件 |
實(shí)例演示
// 音頻加載 this.wavesurfer.load(audioUrl); // 獲取總時(shí)長 let duration = parseInt(this.wavesurfer.getDuration()); // 停止播放并回到起始點(diǎn) this.wavesurfer.stop();
3、事件綁定
使用on()和un()對(duì)事件進(jìn)行綁定和解綁操作。
| 事件 | 說明 |
|---|---|
| audioprocess | 音頻播放時(shí)觸發(fā) |
| destroy | 音頻銷毀時(shí)觸發(fā) |
| error | 音頻出錯(cuò)時(shí)觸發(fā) |
| finish | 音頻播放結(jié)束時(shí)觸發(fā) |
| loading | 音頻加載時(shí)觸發(fā) |
| ready | 音頻加載成功時(shí)觸發(fā) |
| play | 音頻開始播放時(shí)觸發(fā) |
| pause | 音頻暫停時(shí)觸發(fā) |
| scroll | 當(dāng)有滾動(dòng)條滾動(dòng)的時(shí)候觸發(fā) |
| volume | 聲音調(diào)整時(shí)觸發(fā) |
| seek | 鼠標(biāo)點(diǎn)擊某個(gè)位置的時(shí)候觸發(fā) |
實(shí)例演示：
// 加載時(shí)候
this.wavesurfer.on("loading", percents => {
// 當(dāng)前加載的進(jìn)度
this.percent = percents;
});
// 加載成功
this.wavesurfer.on("ready", () => {
this.progress = false;
});
// 播放中
this.wavesurfer.on("audioprocess", () => {
this.currentTime = this.getCurrentTime();
});
// 結(jié)束播放
this.wavesurfer.on("finish", () => {
this.wavesurfer.pause();
});
4、Regions插件
Regions用于音頻播放器waveform視覺效果部分，可以用它來標(biāo)注某個(gè)區(qū)域。Regions可以被拖拽和改變尺寸大小。
引入插件
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
插件定義
this.wavesurfer = WaveSurfer.create({
plugins: [RegionsPlugin.create()]
});
Regions方法
| 方法 | 說明 |
|---|---|
| addRegion(options) | 在waveform中創(chuàng)建一個(gè)Region。返回一個(gè)Region對(duì)象 |
| clearRegions() | 移除所有的regions |
| enableDragSelection(options) | 可以通過選擇來創(chuàng)建支持拖拽和改變大小的Regin |
實(shí)例演示：
| 參數(shù) | 默認(rèn)值 | 說明 |
|---|---|---|
| id | region的id | |
| start | 0 | region的開始位置，單位秒 |
| end | 0 | region的開始位置，單位秒 |
| loop | false | 播放完畢后是否循環(huán)播放 |
| drag | true | 是否支持拖拽 |
| resize | true | 是否支持改變r(jià)egion的大小 |
| 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() | 循環(huán)播放region |
| remove() | 移除region |
Regions事件
| 事件 | 說明 |
|---|---|
| remove | 在region被移除前觸發(fā) |
| update | 當(dāng)region被更新時(shí)觸發(fā) |
| click | 當(dāng)region點(diǎn)擊時(shí)觸發(fā) |
| dbclick | 當(dāng)region被雙擊時(shí)觸發(fā) |
| over | 當(dāng)region被鼠標(biāo)滑入時(shí)觸發(fā) |
| leave | 當(dāng)在region上的鼠標(biāo)離開時(shí)觸發(fā) |
// 更新起始時(shí)間
this.currentRegion.update({ start: newStartTime });
// 移除region
this.currentRegion.remove();
更多方法請(qǐng)看官網(wǎng)：wavesurfer官網(wǎng)
總結(jié)
以上所述是小編給大家介紹的JS 音頻可視化插件Wavesurfer.js的使用教程，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript模擬實(shí)現(xiàn)網(wǎng)易云輪播效果
這篇文章主要介紹了如何利用JavaScript模仿網(wǎng)易云輪播效果的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定幫助，需要的可以參考一下2022-04-04
本文是筆者看了eventemitter3 和 Node.js 事件模塊源碼后實(shí)現(xiàn)的 EventEmitter 。JavaScript 事件很重要，希望看了這篇文章的你們能有所收獲2018-03-03
JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒有indexOf()方法，可通過下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05
JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較
這篇文章主要介紹了JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較,需要的朋友可以參考下2014-03-03
Array.prototype.slice 使用擴(kuò)展
slice 可以用來獲取數(shù)組片段，它返回新數(shù)組，不會(huì)修改原數(shù)組。2010-06-06
利用innerHTML代替createElement來動(dòng)態(tài)添加網(wǎng)頁內(nèi)容已成為一種普遍的認(rèn)識(shí)。但在商務(wù)應(yīng)用，大數(shù)據(jù)的datagrid屢見不鮮，就算是innerHTML也捉襟見肘，于是人們又開發(fā)了分時(shí)加載的技術(shù)了（利用setTimeout）。2009-12-12
JS實(shí)現(xiàn)標(biāo)簽頁效果(配合css)
實(shí)現(xiàn)的效果是當(dāng)鼠標(biāo)移到某一個(gè)標(biāo)簽的時(shí)候，在下面的內(nèi)容區(qū)顯示對(duì)應(yīng)的內(nèi)容，并且相應(yīng)標(biāo)簽的顏色需要改變,這樣的效果是CSS和JS配合實(shí)現(xiàn)的,下面我們就來看看具體代碼2013-04-04
JavaScript代碼實(shí)現(xiàn)簡單日歷效果
這篇文章主要為大家詳細(xì)介紹了JavaScript代碼實(shí)現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
FireFox的getYear的注意事項(xiàng)...2007-04-04
JS模塊與命名空間的介紹，需要的朋友可以參考一下2013-03-03