WaveSurfer.js 是一個可以用於網頁上的 JavaScript 應用程式庫，它的主要功能是讓開發人員可以輕鬆地在網站裡，嵌入音訊播放器並加入許多特別影像效果，將聲音轉換成可視化圖形。
隨著短影音和影片流行起來，其中不管是音樂或音效製作，聲音處理都是不可或缺的一部分。
今天要特別記錄下來學習的「wavesurfer.js」，是一個基於 Web 技術的聲音可視化和處理庫，透過 Web Audio API 和 HTML5 Canvas 技術，可以方便地在網頁中加載 Audio 音訊文件，實時顯示聲音波形，同時還提供一些強大的聲音處理功能（例如下圖一所示的等化器功能），是有志在開發聲音、音樂、音效類網頁的人不可錯過的好用工具。
下面將來介紹 wavesurfer.js 的一些基本功能和技術特點。
WaveSurfer.js 基本功能
加載音頻文件
wavesurfer.js 可以輕鬆加載音頻文件，並自動繪製出音頻波形。使用者可以透過 load 方法將音頻文件加載進來，例如：
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.load('/path/to/my/audio/file.mp3');在上面的例子中，container 是指定音頻波形繪製的位置，waveColor 和 progressColor 是設置波形的顏色。使用 load 方法將指定的音頻文件加載進來後，就可以在網頁中顯示如下圖二所示的音頻波形了。
聲音處理
wavesurfer.js 提供了一些基本的聲音處理功能，包括：
- 音量調整
- 暫停和播放
- 快進和快退
- 循環播放
- 靜音
- 播放速度調整
使用者可以透過相應的方法調用這些功能。例如，要暫停、播放音頻，或是設置循環播放，可以分別使用以下二代碼：
wavesurfer.playPause(); // 暫停或播放
wavesurfer.setLoop(true); // 設置循環播放為 true波形視覺化
wavesurfer.js 提供了豐富的波形視覺化選項，可以讓使用者自由設置波形的顏色、寬度、高度等。例如，可以使用以下代碼設置波形的顏色和高度：
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
height: 200
});支援外掛（插件）
wavesurfer.js 提供了多個外掛（插件），可以進一步擴展其功能和增加更多的聲音處理選項。以下是幾個常用的插件：
- Timeline（時間軸）：這個插件可以在音訊波形上添加時間軸，方便使用者對音訊進行精確的導航和編輯。使用者可以在時間軸上拖動標記點，快速跳轉到指定的時間點。
- Regions（區域）：這個插件允許使用者在音訊波形上劃定區域，並對這些區域應用不同的操作。例如，可以選擇對某個區域進行循環播放、增加特效或者提取聲音片段。
- Spectrogram（頻譜圖，參考下圖三）：這個插件可以生成音訊的頻譜圖，將其頻譜信息以圖形方式呈現。使用者可以更直觀地觀察音頻的頻率分佈和變化。
- Minimap（縮略圖）：這個插件可以在音頻波形旁邊添加一個縮略圖，顯示整個音頻文件的縮小版本。使用者可以通過縮略圖快速導航長音頻文件，並在整個波形上進行操作。
除了以上提到的插件，wavesurfer.js 還有其他一些插件，如錄音、回放、可編輯標籤等，這些插件提供了更多的音頻處理和操作選項，讓使用者能夠根據自己的需求進行更多的定製和功能擴展。
參考文獻
- 官方網站：「wavesurfer.js」
發佈留言