Kuon R&D

瀏覽器音訊技術完全綜覽——Web Audio API、WebAssembly 與最前線

最後更新:2026 年 6 月 13 日 · 作者:朝比奈幸太郎 (Kuon 創辦人・音響工程師)

Quick Answer

截至 2026 年,五項技術讓瀏覽器具備專業級音訊處理能力:Web Audio API (W3C,2011 年)、WebAssembly (2017 年 W3C 標準化,約 90% 原生速度)、AudioWorklet (3–10ms 延遲)、SharedArrayBuffer,以及 File System Access API (支援數 GB 檔案)。Kuon 整合全部五項,實現瀏覽器 DDP 解析與 DSD 轉 PCM——這些過去只屬於桌面應用程式的工作流程。

關鍵數據

Web Audio API 制定
2011 年
W3C 規格作業開始
WebAssembly 標準化
2017 年
W3C Recommendation
AudioWorklet 延遲
3–10 ms
getUserMedia 輸入延遲
20–50 ms
WebGPU 標準化
2023 年
Chrome 113 出貨
Web MIDI API 正式建議
2022 年
Wasm 速度 (對原生)
約 90%
File System Access 最大檔案
約數十 GB
依實作而異

什麼是瀏覽器音訊處理?

瀏覽器音訊處理,是 Web Audio API、WebAssembly、AudioWorklet、File System Access API 等網路標準聯手實現的領域——免安裝、不分 OS、Privacy First 的音訊處理。同一份程式碼在 Chrome、Safari、Firefox、Edge 上運行,橫跨 Mac、Windows、Linux 與 Chromebook。

直到 2014 年前後,「瀏覽器只能做輕量處理」仍是常識。WebAssembly 與 AudioWorklet 的登場改寫了這個假設:如今專業級的 DAW、分軌分離、母帶處理、高解析轉換,全都能在瀏覽器中實作。

Web Audio API 的基礎

Web Audio API 是 W3C 於 2011 年開始標準化的 JavaScript API,用於在瀏覽器中生成、處理與分析音訊。核心物件如下:

Web Audio API 的主要物件
物件角色典型用途
AudioContext音訊處理的容器——一切工作的基礎通常每個應用程式一個
AudioNode個別處理單元 (振盪器、濾波器、增益等)把節點連成圖,構築音訊路由
AudioBuffer記憶體中的音訊資料檔案載入、錄音緩衝
AudioWorkletNode專用執行緒上的自訂 DSP即時低延遲處理
AnalyserNode即時 FFT 與頻譜分析調音器、頻譜顯示

WebAssembly 為音訊帶來的革命

WebAssembly (Wasm) 是 W3C 於 2017 年標準化的二進位執行格式,以接近原生的速度在瀏覽器運行。以 C、C++、Rust 撰寫的程式可編譯為 Wasm——意味著數十年累積的音訊程式庫 (FFTW、libsoxr、librosa 等) 都能移植到瀏覽器。

Wasm 約以原生 90% 的速度運行,比 JavaScript 快 5–20 倍。FFT、重新取樣、編解碼、分軌分離——這些在 JavaScript 中根本不可行的工作,因 Wasm 而變得實用。瀏覽器音訊處理的每一次質變,幾乎都可追溯到 Wasm。

以 File System Access API 處理大檔案

傳統的 Blob/ArrayBuffer 檔案處理約以 2 GB 記憶體為上限——不足以容納數張 CD 的 DSD 音訊或長時間的現場錄音。File System Access API (Chrome 86+,2020 年) 以直接讀寫磁碟的方式解除了這道屏障。

Kuon DSD CONVERTER 利用此 API,直接在瀏覽器串流處理超過 5 GB 的 DSD512 檔案——這是過去只有桌面專用軟體才有的工作流程。

代表性案例

代表性的瀏覽器音訊平台
服務提供者能力特色
SoundtrapSpotify (2017 年收購)音樂製作 DAW教育導向、協作
Splice獨立 (美國)取樣管理 + 外掛創作者導向
BandLabBandLab TechDAW + 社群免費、社群網路整合
Ableton Note WebAbleton草稿 DAW行動裝置友善
KuonKuon R&D44 應用程式整合平台CD 母帶檢查與 DSD 轉換 (KUON CD MASTER CHECKER 等)

瀏覽器能做到的事

瀏覽器音訊的優點

四大優勢。第一,免安裝——打開網址即可使用;換一台電腦也能接著做。第二,跨平台:Mac、Windows、Linux、Chromebook、iPad 行為完全一致。第三,可分享性——傳一條連結就能分享專案或作品。第四,Privacy First——檔案可以只留在瀏覽器記憶體中,永不觸及伺服器。

限制

瀏覽器 vs 原生 DAW:限制比較
面向瀏覽器原生 DAW
錄音延遲20–50 ms3–10 ms (ASIO / Core Audio)
處理速度Wasm 約 90%100% (基準)
外掛相容性僅 Web Audio Worklet完整支援 VST / AU / AAX
檔案大小經 FSA API 實質無上限無上限
離線運作可經 PWA / Service Worker永遠離線
GPU 平行運算WebGPU (2023 年起)CUDA / Metal

在專業錄音室的錄音監聽與即時 MIDI 演奏上,原生 DAW 仍占優勢;但在母帶處理、分析、轉換與教育領域,瀏覽器平台如今已綽綽有餘。

下一步:WebGPU、WebCodecs 與 Audio Worklet

三項技術將塑造下一波浪潮。WebGPU (2023 年標準化) 為瀏覽器打開 GPU 平行運算,加速神經網路音源分離、大型 FFT 與即時頻譜合成。WebCodecs API (2022 年起) 提供對視訊與音訊編解碼器的低階存取,讓 Opus、FLAC、AAC 的即時編解碼更有效率。持續演進的 Audio Worklet 與 SharedArrayBuffer 結合,讓瀏覽器能構築更複雜的即時 DSP 管線。

Kuon 在瀏覽器中實現的功能

截至 2026 年,Kuon 已在瀏覽器音訊領域推出以下功能:

深入的技術解析請見 Kuon 的技術。

開發者參考資料

常見問題

瀏覽器真的能做專業級的音訊處理嗎?

可以。WebAssembly 能把以 C/C++ 撰寫的業界級音訊程式庫以超過原生 90% 的速度移植到瀏覽器,AudioWorklet 則可達到 3–10 ms 的低延遲。Kuon 的 DSD CONVERTER、AUDIO MIRROR 皆在瀏覽器中運行,品質與桌面專用軟體相當。

Web Audio API 是什麼時候出現的?

W3C 於 2011 年開始標準化,主要瀏覽器約自 2014 年起陸續實作。如今 Chrome、Safari、Firefox、Edge 等所有現代瀏覽器皆可使用。AudioWorklet (低延遲處理用) 自 2018 年起逐步實作,現已成為標準。

什麼是 WebAssembly?

WebAssembly (Wasm) 是 W3C 於 2017 年標準化的二進位執行格式,能以接近原生的速度在瀏覽器中運行。以 C、C++、Rust 撰寫的程式可編譯為 Wasm 在瀏覽器執行。在音訊處理中用於 FFT、濾波、編解碼等需要原生速度的工作。

什麼是 AudioWorklet?

AudioWorklet 是 Web Audio API 的一部分,在專用的音訊處理執行緒上運行。可獨立於主執行緒進行即時處理,延遲約 3–10 ms。它是已棄用的 ScriptProcessorNode 的後繼者,是現代瀏覽器音訊處理的核心技術。

瀏覽器音訊處理有檔案大小限制嗎?

過去基於 Blob/ArrayBuffer 的處理約以 2 GB 記憶體為上限。File System Access API (Chrome 86+,2020 年) 透過直接讀寫磁碟上的大檔案 (數十 GB) 解除了這項限制。Kuon DSD CONVERTER 便利用此 API 處理超過 5 GB 的檔案。

瀏覽器音訊處理的缺點是什麼?

主要有三點:(1) 即時效能仍落後原生 DAW (不適合低延遲錄音監聽);(2) GPU 加速流程仍隨 WebGPU 成熟中;(3) Web Audio API 的取樣率依 OS 設定而定。對母帶處理、分析、轉換等非即時工作,瀏覽器已可與原生軟體一較高下。

Soundtrap 和 Splice 是瀏覽器音訊平台嗎?

是。Soundtrap (Spotify,2017 年收購) 與 Splice (美國) 是在瀏覽器運行的音樂創作平台。BandLab 與 Ableton Note Web 使用類似技術。Kuon 屬於同一譜系,專注於音樂教育、轉換與分析。

WebGPU 會如何影響瀏覽器音訊處理?

WebGPU (2023 年在 Chrome 標準化) 讓瀏覽器能使用 GPU 平行運算。在音訊領域,可望加速大型 FFT、神經網路音源分離與即時分析。

什麼是 SharedArrayBuffer?

SharedArrayBuffer 是可在多個 JavaScript 執行緒間共享的記憶體區域。與 AudioWorklet 結合,可在主執行緒與音訊處理執行緒之間高速傳遞資料。曾因 Spectre 漏洞一度停用,如今透過 Cross-Origin Isolation (COOP/COEP) 標頭重新啟用。

瀏覽器可以輸入輸出 MIDI 嗎?

可以。Web MIDI API (2015 年 W3C 候選建議、2022 年正式建議) 讓瀏覽器直接與 USB / 藍牙 MIDI 裝置通訊。Kuon 的多個音樂應用程式使用了這個 API。

瀏覽器如何處理麥克風輸入?

getUserMedia API (WebRTC 的一部分) 在使用者許可下提供麥克風存取。延遲約 20–50 ms——足以支撐即時調音器與錄音應用程式。Kuon 的 TUNER 與錄音應用程式皆使用此 API。

Kuon 在瀏覽器中實現了哪些功能?

主要有:(1) 瀏覽器 KUON CD MASTER CHECKER (完整解析 CD 母帶檔案 + 曲間試聽功能);(2) 瀏覽器 DSD CONVERTER (Rust+Wasm + Blackman-sinc FIR,與專業軟體同級);(3) AUDIO MIRROR (Privacy First 設計的參考 A/B 比較);(4) KUON TUNER 的音準教練 (即時、以 YIN 演算法做音分精度的音高追蹤)。

参考文献・出典

  1. W3C Web Audio API 1.1 規格— 最新規格 (2024 年修訂)
  2. MDN — Web Audio API— Mozilla 官方教學
  3. WebAssembly 官方— 規格與實作首畫面
  4. Google Developers — Audio Worklet— 低延遲處理解說
  5. Web Audio Conference 論文集— 學術會議論文

相關連結