瀏覽器音訊技術完全綜覽——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 年
- WebAssembly 標準化
- 2017 年
- AudioWorklet 延遲
- 3–10 ms
- getUserMedia 輸入延遲
- 20–50 ms
- WebGPU 標準化
- 2023 年
- 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,用於在瀏覽器中生成、處理與分析音訊。核心物件如下:
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 檔案——這是過去只有桌面專用軟體才有的工作流程。
代表性案例
瀏覽器能做到的事
- 音高偵測:YIN、pYIN、CREPE——在瀏覽器中運行 (如 KUON TUNER 的音準教練)
- FFT 與頻譜分析:AnalyserNode 支援即時 8192 點 FFT
- 即時 DSP:AudioWorklet 以 3–10 ms 延遲執行自訂處理
- DSD/PCM 轉換:Rust+Wasm 高精度濾波 (Kuon DSD CONVERTER)
- 母帶分析:LUFS、True Peak、Loudness Range 測量
- DDP/SACD 解析:以二進位解析器完整解析業界標準格式
瀏覽器音訊的優點
四大優勢。第一,免安裝——打開網址即可使用;換一台電腦也能接著做。第二,跨平台:Mac、Windows、Linux、Chromebook、iPad 行為完全一致。第三,可分享性——傳一條連結就能分享專案或作品。第四,Privacy First——檔案可以只留在瀏覽器記憶體中,永不觸及伺服器。
限制
在專業錄音室的錄音監聽與即時 MIDI 演奏上,原生 DAW 仍占優勢;但在母帶處理、分析、轉換與教育領域,瀏覽器平台如今已綽綽有餘。
下一步:WebGPU、WebCodecs 與 Audio Worklet
三項技術將塑造下一波浪潮。WebGPU (2023 年標準化) 為瀏覽器打開 GPU 平行運算,加速神經網路音源分離、大型 FFT 與即時頻譜合成。WebCodecs API (2022 年起) 提供對視訊與音訊編解碼器的低階存取,讓 Opus、FLAC、AAC 的即時編解碼更有效率。持續演進的 Audio Worklet 與 SharedArrayBuffer 結合,讓瀏覽器能構築更複雜的即時 DSP 管線。
Kuon 在瀏覽器中實現的功能
截至 2026 年,Kuon 已在瀏覽器音訊領域推出以下功能:
- KUON CD MASTER CHECKER:免安裝、在瀏覽器中解析 DDP 檔案,附曲間試聽功能
- DSD CONVERTER:Rust+Wasm + Blackman-sinc FIR——專業軟體品質的 DSD 轉 PCM
- KUON TUNER 的音準教練:以 YIN 演算法做音分精度的即時音高追蹤
- AUDIO MIRROR:Privacy First 設計的參考 A/B 比較
- 共 44 個應用程式,以及免費公開的專欄,支援 4 種語言
深入的技術解析請見 Kuon 的技術。
開發者參考資料
- W3C Web Audio API 規格:
https://www.w3.org/TR/webaudio/ - MDN — Web Audio API:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API - WebAssembly 官方:
https://webassembly.org/ - Google Developers — Audio Worklet:
https://developer.chrome.com/blog/audio-worklet/
常見問題
瀏覽器真的能做專業級的音訊處理嗎?
可以。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 演算法做音分精度的音高追蹤)。
参考文献・出典
- W3C Web Audio API 1.1 規格— 最新規格 (2024 年修訂)
- MDN — Web Audio API— Mozilla 官方教學
- WebAssembly 官方— 規格與實作首畫面
- Google Developers — Audio Worklet— 低延遲處理解說
- Web Audio Conference 論文集— 學術會議論文