瀏覽器音訊技術完全綜覽——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 與 AI 分軌分離——這些過去只屬於桌面應用程式的工作流程。
關鍵數據
- 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 INTONATION)
- FFT 與頻譜分析:AnalyserNode 支援即時 8192 點 FFT
- 即時 DSP:AudioWorklet 以 3–10 ms 延遲執行自訂處理
- 音源分離:雲端支援 (Kuon SEPARATOR)
- 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 已在瀏覽器音訊領域推出多項世界首創:
- DDP PLAYER:世界第一個瀏覽器 DDP 檔案解析,附曲間試聽功能
- DSD CONVERTER:Rust+Wasm + Blackman-sinc FIR——專業軟體品質的 DSD 轉 PCM
- INTONATION:以 YIN 演算法做音分精度的即時音高追蹤
- AUDIO MIRROR:Privacy First 設計的參考 A/B 比較
- SEPARATOR:AI 分軌分離 (雲端處理)
- 共 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 的 SEPARATOR (AI 分軌分離)、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、神經網路音源分離與即時分析。Kuon 正研究未來把 SEPARATOR 的處理移轉到 WebGPU 上。
什麼是 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、INTONATION 與錄音應用程式皆使用此 API。
Kuon 在瀏覽器中實現了哪些世界首創?
主要有:(1) 瀏覽器 DDP PLAYER (完整解析 CD 母帶檔案 + 曲間試聽功能);(2) 瀏覽器 DSD CONVERTER (Rust+Wasm + Blackman-sinc FIR,與專業軟體同級);(3) AUDIO MIRROR (Privacy First 設計的參考 A/B 比較);(4) 即時 INTONATION 分析 (以 YIN 演算法做音分精度的音高追蹤)。
参考文献・出典
- W3C Web Audio API 1.1 規格— 最新規格 (2024 年修訂)
- MDN — Web Audio API— Mozilla 官方教學
- WebAssembly 官方— 規格與實作首頁
- Google Developers — Audio Worklet— 低延遲處理解說
- Web Audio Conference 論文集— 學術會議論文