Web Audio API 實戰：瀏覽器端音訊處理架構

Web Audio API 架構

Web Audio API 基於音訊圖 (Audio Graph) 模型——音訊資料流經一系列節點，每個節點執行特定處理：

AudioBufferSource → GainNode → AnalyserNode → AudioDestination
     (音源)         (音量)      (分析/視覺化)     (揚聲器)

與 HTML5 <audio> 元素不同，Web Audio API 提供底層、精確的音訊控制能力。

---

核心物件

物件	作用	類比
AudioContext	音訊處理的入口和時鐘	音訊引擎
AudioBuffer	記憶體中的音訊資料	音訊檔案
AudioNode	處理單元	效果器/混音台
AudioParam	可動畫的參數	音量旋鈕

建立 AudioContext

const ctx = new AudioContext();

// 瀏覽器策略：需要使用者互動後才能啟動
button.addEventListener('click', () => ctx.resume());

---

音訊剪輯實作

工具庫 音訊剪輯工具 的處理流程：

async function trimAudio(file: File, startSec: number, endSec: number) {
  const arrayBuffer = await file.arrayBuffer();
  const audioBuffer = await ctx.decodeAudioData(arrayBuffer);

  const duration = endSec - startSec;
  const sampleRate = audioBuffer.sampleRate;
  const startSample = Math.floor(startSec * sampleRate);
  const endSample = Math.floor(endSec * sampleRate);
  const length = endSample - startSample;

  // 建立裁剪後的 buffer
  const trimmed = ctx.createBuffer(
    audioBuffer.numberOfChannels, length, sampleRate
  );

  for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
    const sourceData = audioBuffer.getChannelData(ch);
    const destData = trimmed.getChannelData(ch);
    destData.set(sourceData.subarray(startSample, endSample));
  }

  return trimmed;
}

---

波形視覺化

AnalyserNode 提供即時頻域/時域資料：

const analyser = ctx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(ctx.destination);

const dataArray = new Uint8Array(analyser.frequencyBinCount);

function drawWaveform() {
  analyser.getByteTimeDomainData(dataArray);
  // 在 Canvas 上繪製波形
  requestAnimationFrame(drawWaveform);
}

---

音訊格式與編碼

格式	瀏覽器解碼	瀏覽器編碼	品質
WAV	✅	✅ (AudioContext)	無損
MP3	✅	❌	有損
OGG	✅	❌	有損
AAC	✅ (Safari)	❌	有損
WebM/Opus	✅	✅ (MediaRecorder)	有損

瀏覽器端編碼能力有限。工具庫音訊工具主要處理 WAV 格式，影片工具的 音訊提取 則借助 ffmpeg.wasm 支援 MP3/OGG 輸出。

---

效能注意事項

1. AudioContext 是單例：一個頁面只需一個 AudioContext
2. 大檔案分塊解碼：超過 100MB 的音訊先分塊再 decodeAudioData
3. 及時 disconnect：不用的節點呼叫 node.disconnect() 釋放資源
4. OfflineAudioContext：離線渲染不需要即時播放，效能更好

---

總結

Web Audio API 讓瀏覽器具備了專業級音訊處理能力。AudioContext 音訊圖、AudioBuffer 精確裁剪、AnalyserNode 即時分析——這些原語組合起來，可以實現從簡單剪輯到複雜 DSP 的全譜系音訊工具。