空音開発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 與 AI 分軌分離——這些過去只屬於桌面應用程式的工作流程。

關鍵數據

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 應用程式整合平台多項世界首創 (DDP PLAYER 等)

瀏覽器能做到的事

瀏覽器音訊的優點

四大優勢。第一,免安裝——打開網址即可使用;換一台電腦也能接著做。第二,跨平台: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 的 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 演算法做音分精度的音高追蹤)。

参考文献・出典

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

相關連結