【學習筆記】網頁開發專用聲音處理程式:「wavesurfer.js」


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.js 提供了一些基本的聲音處理功能,包括:

  • 音量調整
  • 暫停和播放
  • 快進和快退
  • 循環播放
  • 靜音
  • 播放速度調整

使用者可以透過相應的方法調用這些功能。例如,要暫停、播放音頻,或是設置循環播放,可以分別使用以下二代碼:

wavesurfer.playPause(); // 暫停或播放

wavesurfer.setLoop(true); // 設置循環播放為 true

波形視覺化

wavesurfer.js 提供了豐富的波形視覺化選項,可以讓使用者自由設置波形的顏色、寬度、高度等。例如,可以使用以下代碼設置波形的顏色和高度:

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    height: 200
});

支援外掛(插件)

wavesurfer.js 提供了多個外掛(插件),可以進一步擴展其功能和增加更多的聲音處理選項。以下是幾個常用的插件:

  1. Timeline(時間軸):這個插件可以在音訊波形上添加時間軸,方便使用者對音訊進行精確的導航和編輯。使用者可以在時間軸上拖動標記點,快速跳轉到指定的時間點。
  2. Regions(區域):這個插件允許使用者在音訊波形上劃定區域,並對這些區域應用不同的操作。例如,可以選擇對某個區域進行循環播放、增加特效或者提取聲音片段。
  3. Spectrogram(頻譜圖,參考下圖三):這個插件可以生成音訊的頻譜圖,將其頻譜信息以圖形方式呈現。使用者可以更直觀地觀察音頻的頻率分佈和變化。
  4. Minimap(縮略圖):這個插件可以在音頻波形旁邊添加一個縮略圖,顯示整個音頻文件的縮小版本。使用者可以通過縮略圖快速導航長音頻文件,並在整個波形上進行操作。
圖三,透過外掛處理的頻譜圖(Spectrogram)

除了以上提到的插件,wavesurfer.js 還有其他一些插件,如錄音、回放、可編輯標籤等,這些插件提供了更多的音頻處理和操作選項,讓使用者能夠根據自己的需求進行更多的定製和功能擴展。

參考文獻

  1. 官方網站:「wavesurfer.js

使用 Email 訂閱 最新消息不漏接

我們尊重您的隱私,隨時可取消訂閱。

留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *