Web Audio API
Baseline 廣泛可用 *
Web Audio API 為在 Web 上控制音訊提供了一個強大且多功能的系統，它允許開發者選擇音訊源、新增音訊效果、建立音訊視覺化、應用空間效果（如聲像）等等。
Web 音訊概念和用法
Web Audio API 涉及在**音訊上下文**中處理音訊操作，並且被設計為允許**模組化路由**。基本的音訊操作由**音訊節點**執行，這些節點連結在一起形成**音訊路由圖**。即使在單個上下文中，也支援多種來源（具有不同型別的通道佈局）。這種模組化設計提供了建立具有動態效果的複雜音訊功能的靈活性。
音訊節點透過其輸入和輸出連結成鏈和簡單的網路。它們通常從一個或多個源開始。源在非常小的時間片內提供聲音強度陣列（取樣），通常每秒數萬個。這些可以透過數學計算（例如 OscillatorNode），或者它們可以是來自聲音/影片檔案（如 AudioBufferSourceNode 和 MediaElementAudioSourceNode）的錄音以及音訊流（MediaStreamAudioSourceNode）。實際上，聲音檔案本身只是聲音強度的錄音，這些聲音強度來自麥克風或電子樂器，然後混合成一個單一的複雜波。
這些節點的輸出可以連結到其他節點的輸入，這些節點將這些聲音樣本流混合或修改成不同的流。一個常見的修改是將樣本乘以一個值，使其聲音更大或更小（例如 GainNode）。一旦聲音經過充分處理以達到預期效果，就可以將其連結到目標（BaseAudioContext.destination）的輸入，後者將聲音傳送到揚聲器或耳機。只有當用戶應該聽到音訊時，才需要此最後的連線。
一個簡單、典型的 Web 音訊工作流程如下所示
- 建立音訊上下文
- 在上下文中，建立源 — 例如
<audio>、振盪器、流 - 建立效果節點，例如混響、雙二階濾波器、聲像器、壓縮器
- 選擇音訊的最終目的地，例如您的系統揚聲器
- 將源連線到效果，並將效果連線到目的地。
計時以高精度和低延遲控制，允許開發者編寫能夠準確響應事件並能夠瞄準特定樣本的程式碼，即使在高速取樣率下也是如此。因此，鼓機和音序器等應用程式都觸手可及。
Web Audio API 還允許我們控制音訊的**空間化**方式。它使用基於**聲源-聽者模型**的系統，允許控制**聲像模型**並處理由移動聲源（或移動聽者）引起的**距離衰減**。
**注意：** 您可以在我們的文章 Web Audio API 的基本概念 中更詳細地閱讀有關 Web Audio API 理論。
Web Audio API 目標受眾
對於不熟悉音訊或音樂術語的人來說，Web Audio API 可能看起來令人生畏，而且由於它包含了大量功能，如果您是一名開發者，可能會發現入門困難。
它可用於將音訊整合到您的網站或應用程式中，例如 提供像 futurelibrary.no 網站那樣的氛圍，或 在表單上提供聽覺反饋。但是，它也可以用於建立**高階**互動式樂器。考慮到這一點，它既適用於開發者，也適用於音樂家。
我們為熟悉程式設計但需要良好了解 API 的一些術語和結構的人提供了一個簡單的入門教程。
還有一篇Web Audio API 背後的基本概念文章，可幫助您瞭解數字音訊的工作原理，特別是在 API 領域。這還包括對 API 構建的一些概念的良好介紹。
學習程式設計就像打牌——你學習規則，然後玩，然後回去再學習規則，然後再次玩。所以如果第一個教程和文章之後有些理論不太合適，還有一個高階教程，它擴充套件了第一個教程，幫助你練習所學，並應用一些更高階的技術來構建一個步進音序器。
我們還有其他教程和全面的參考資料，涵蓋了 API 的所有功能。請參閱本頁面側邊欄瞭解更多資訊。
如果您對音樂方面更熟悉，熟悉樂理概念，想開始製作樂器，那麼您可以繼續並以高階教程和其他教程為指導（上述連結的教程涵蓋了音符編排、建立定製振盪器和包絡，以及 LFO 等）。
如果您不熟悉程式設計基礎知識，您可能需要首先查閱一些初學者 JavaScript 教程，然後返回此處 — 請參閱我們的初學者 JavaScript 學習模組以獲取一個很好的起點。
Web Audio API 介面
Web Audio API 具有許多介面和相關事件，我們將其分為九個功能類別。
通用音訊圖定義
在 Web Audio API 使用中形成音訊圖的通用容器和定義。
AudioContext-
**
AudioContext** 介面表示一個由相互連結的音訊模組構建的音訊處理圖，每個模組由一個AudioNode表示。音訊上下文控制其包含的節點的建立以及音訊處理或解碼的執行。您需要先建立一個AudioContext，因為所有操作都發生在上下文中。 AudioNode-
**
AudioNode** 介面表示一個音訊處理模組，如*音訊源*（例如 HTML<audio>或<video>元素）、*音訊目的地*、*中間處理模組*（例如BiquadFilterNode等濾波器，或GainNode等音量控制）。 AudioParam-
**
AudioParam** 介面表示一個與音訊相關的引數，例如AudioNode的引數之一。它可以設定為特定值或值的變化，並且可以安排在特定時間按照特定模式發生。 AudioParamMap-
提供一個類似於對映的介面，用於一組
AudioParam介面，這意味著它提供forEach()、get()、has()、keys()和values()方法，以及size屬性。 BaseAudioContext-
**
BaseAudioContext** 介面作為線上和離線音訊處理圖的基本定義，分別由AudioContext和OfflineAudioContext表示。您不會直接使用BaseAudioContext— 您將透過這兩個繼承介面之一使用其功能。 ended事件-
當由於媒體結束而停止播放時，會觸發
ended事件。
定義音訊源
用於定義在 Web Audio API 中使用的音訊源的介面。
AudioScheduledSourceNode-
**
AudioScheduledSourceNode** 是多種音訊源節點介面的父介面。它是一個AudioNode。 OscillatorNode-
**
OscillatorNode** 介面表示週期性波形，例如正弦波或三角波。它是一個AudioNode音訊處理模組，用於生成給定**頻率**的波形。 AudioBuffer-
**
AudioBuffer** 介面表示駐留在記憶體中的短音訊資產，它使用BaseAudioContext.decodeAudioData方法從音訊檔案建立，或者使用BaseAudioContext.createBuffer使用原始資料建立。一旦解碼成這種形式，音訊就可以放入AudioBufferSourceNode中。 AudioBufferSourceNode-
**
AudioBufferSourceNode** 介面表示由記憶體中的音訊資料組成的音訊源，這些資料儲存在AudioBuffer中。它是一個充當音訊源的AudioNode。 MediaElementAudioSourceNode-
**
MediaElementAudioSourceNode** 介面表示由 HTML<audio>或<video>元素組成的音訊源。它是一個充當音訊源的AudioNode。 MediaStreamAudioSourceNode-
**
MediaStreamAudioSourceNode** 介面表示由MediaStream（例如網路攝像頭、麥克風或從遠端計算機發送的流）組成的音訊源。如果流上存在多個音軌，則使用其id在字典順序（按字母順序）上排在最前面的音軌。它是一個充當音訊源的AudioNode。 MediaStreamTrackAudioSourceNode-
MediaStreamTrackAudioSourceNode型別的節點表示資料來自MediaStreamTrack的音訊源。當使用createMediaStreamTrackSource()方法建立節點時，您需要指定要使用的軌道。這提供了比MediaStreamAudioSourceNode更多的控制。
定義音訊效果濾波器
用於定義要應用於音訊源的效果的介面。
BiquadFilterNode-
**
BiquadFilterNode** 介面表示一個簡單的低階濾波器。它是一個AudioNode，可以表示不同型別的濾波器、音調控制裝置或圖形均衡器。BiquadFilterNode始終只有一個輸入和一個輸出。 ConvolverNode-
**
ConvolverNode** 介面是一個AudioNode，它對給定的AudioBuffer執行線性卷積，通常用於實現混響效果。 DelayNode-
**
DelayNode** 介面表示一個延遲線；一個AudioNode音訊處理模組，它在輸入資料到達與其傳播到輸出之間產生延遲。 DynamicsCompressorNode-
**
DynamicsCompressorNode** 介面提供了一個壓縮效果，它降低訊號中最響亮部分的音量，以幫助防止在多個聲音同時播放和多路複用時可能發生的削波和失真。 GainNode-
**
GainNode** 介面表示音量的變化。它是一個AudioNode音訊處理模組，它在輸入資料傳播到輸出之前，對其施加給定的**增益**。 WaveShaperNode-
**
WaveShaperNode** 介面表示一個非線性失真器。它是一個AudioNode，它使用曲線對訊號應用波形失真。除了明顯的失真效果外，它還常用於為訊號新增溫暖的感覺。 PeriodicWave-
描述可用於塑造
OscillatorNode輸出的週期性波形。 IIRFilterNode-
實現通用的無限脈衝響應（IIR）濾波器；這種型別的濾波器也可用於實現音調控制裝置和圖形均衡器。
定義音訊目的地
處理完音訊後，這些介面定義了輸出位置。
AudioDestinationNode-
**
AudioDestinationNode** 介面表示給定上下文中音訊源的最終目的地 — 通常是您裝置的揚聲器。 MediaStreamAudioDestinationNode-
**
MediaStreamAudioDestinationNode** 介面表示一個音訊目的地，由一個帶有單個AudioMediaStreamTrack的 WebRTCMediaStream組成，其使用方式類似於從getUserMedia()獲取的MediaStream。它是一個充當音訊目的地的AudioNode。
資料分析和視覺化
如果您想從音訊中提取時間、頻率和其他資料，則需要 AnalyserNode。
AnalyserNode-
**
AnalyserNode** 介面表示一個能夠提供即時頻率和時域分析資訊的節點，用於資料分析和視覺化。
拆分和合並音訊通道
要拆分和合並音訊通道，您將使用這些介面。
ChannelSplitterNode-
**
ChannelSplitterNode** 介面將音訊源的不同通道分離成一組**單聲道**輸出。 ChannelMergerNode-
**
ChannelMergerNode** 介面將不同的單聲道輸入重新組合成一個輸出。每個輸入將用於填充輸出的一個通道。
音訊空間化
這些介面允許您向音訊源新增音訊空間化聲像效果。
AudioListener-
**
AudioListener** 介面表示音訊空間化中用於收聽音訊場景的唯一人物的位置和方向。 PannerNode-
**
PannerNode** 介面表示 3D 空間中音訊源訊號的位置和行為，允許您建立複雜的聲像效果。 StereoPannerNode-
**
StereoPannerNode** 介面表示一個簡單的立體聲聲像節點，可用於左右聲像音訊流。
JavaScript 中的音訊處理
使用音訊工作執行緒，您可以定義用 JavaScript 或 WebAssembly 編寫的自定義音訊節點。音訊工作執行緒實現了 Worklet 介面，它是 Worker 介面的輕量級版本。
AudioWorklet-
AudioWorklet介面可透過AudioContext物件的audioWorklet訪問，它允許您將模組新增到音訊工作執行緒中，以在主執行緒之外執行。 AudioWorkletNode-
AudioWorkletNode介面表示嵌入在音訊圖中的AudioNode，並且可以向相應的AudioWorkletProcessor傳遞訊息。 AudioWorkletProcessor-
AudioWorkletProcessor介面表示在AudioWorkletGlobalScope中執行的音訊處理程式碼，它直接生成、處理或分析音訊，並且可以向相應的AudioWorkletNode傳遞訊息。 AudioWorkletGlobalScope-
AudioWorkletGlobalScope介面是一個派生自WorkletGlobalScope的物件，表示執行音訊處理指令碼的工作執行緒上下文；它旨在允許在工作執行緒而不是主執行緒中直接使用 JavaScript 生成、處理和分析音訊資料。
已廢棄：指令碼處理器節點
在定義音訊工作執行緒之前，Web Audio API 使用 ScriptProcessorNode 進行基於 JavaScript 的音訊處理。由於程式碼在主執行緒中執行，因此它們的效能不佳。ScriptProcessorNode 因歷史原因保留，但已標記為廢棄。
ScriptProcessorNode已廢棄-
**
ScriptProcessorNode** 介面允許使用 JavaScript 生成、處理或分析音訊。它是一個AudioNode音訊處理模組，它連結到兩個緩衝區，一個包含當前輸入，一個包含輸出。每當輸入緩衝區包含新資料時，就會向物件傳送一個實現AudioProcessingEvent介面的事件，並且當它用資料填充輸出緩衝區時，事件處理程式會終止。 audioprocess(事件) 已廢棄-
當 Web Audio API
ScriptProcessorNode的輸入緩衝區準備好處理時，會觸發audioprocess事件。 AudioProcessingEvent已廢棄-
AudioProcessingEvent表示當ScriptProcessorNode輸入緩衝區準備好處理時發生的事件。
離線/後臺音訊處理
可以使用以下方法在後臺非常快速地處理/渲染音訊圖——將其渲染到 AudioBuffer 而不是裝置的揚聲器。
OfflineAudioContext-
**
OfflineAudioContext** 介面是一個AudioContext介面，表示一個由相互連結的AudioNode構建的音訊處理圖。與標準AudioContext不同，OfflineAudioContext並不真正渲染音訊，而是**儘可能快地**在緩衝區中生成音訊。 complete(事件)-
當
OfflineAudioContext的渲染終止時，會觸發complete事件。 OfflineAudioCompletionEvent-
OfflineAudioCompletionEvent表示當OfflineAudioContext的處理終止時發生的事件。complete事件使用此介面。
指南和教程
- 高階技術：建立和編排音訊
在本教程中，我們將涵蓋聲音建立和修改，以及時序和排程。我們將介紹樣本載入、包絡、濾波器、波表和頻率調製。如果您熟悉這些術語並正在尋找它們在 Web Audio API 中的應用介紹，那麼您來對地方了。
- 使用 AudioWorklet 進行後臺音訊處理
本文解釋瞭如何建立音訊工作執行緒處理器並在 Web Audio 應用程式中使用它。
- Web Audio API 背後的基本概念
本文解釋了 Web Audio API 功能工作原理背後的一些音訊理論，以幫助您在設計應用程式如何路由音訊時做出明智的決策。如果您還不是一名音響工程師，它將為您提供足夠的背景知識，以瞭解 Web Audio API 的工作原理。
- 使用 ConstantSourceNode 控制多個引數
本文演示瞭如何使用
ConstantSourceNode將多個引數連結在一起，使它們共享相同的值，該值可以透過設定ConstantSourceNode.offset引數的值來更改。- 示例和教程：簡單合成器鍵盤
本文展示了一個影片鍵盤的程式碼和工作演示，您可以使用滑鼠演奏。該鍵盤允許您在標準波形以及一個自定義波形之間切換，並且您可以使用鍵盤下方的音量滑塊控制主增益。此示例使用了以下 Web API 介面：
AudioContext、OscillatorNode、PeriodicWave和GainNode。- 使用 IIR 濾波器
Web Audio API 的 **
IIRFilterNode** 介面是一個AudioNode處理器，它實現了一個通用的 無限脈衝響應 (IIR) 濾波器；這種型別的濾波器可用於實現音調控制裝置和圖形均衡器，並且可以指定濾波器響應引數，以便根據需要進行調整。本文介紹瞭如何實現一個，並在一個簡單的示例中使用它。- 使用 Web Audio API
讓我們來看看如何開始使用 Web Audio API。我們將簡要介紹一些概念，然後研究一個簡單的手提式收錄機示例，該示例允許我們載入音軌、播放和暫停它，以及更改其音量和立體聲聲像。
- 使用 Web Audio API 進行視覺化
Web Audio API 最有趣的功能之一是能夠從音訊源中提取頻率、波形和其他資料，然後可用於建立視覺化。本文解釋瞭如何實現，並提供了一些基本用例。
- Web Audio API 最佳實踐
在編寫創意程式碼時，沒有嚴格的正確或錯誤方式。只要您考慮安全性、效能和可訪問性，您就可以適應自己的風格。在本文中，我們將分享一些**最佳實踐**——使用 Web Audio API 的指南、技巧和竅門。
- Web 音訊空間化基礎知識
Web Audio API 擁有豐富的聲音處理（及其他）選項，但這還不夠，它還提供了設施，允許您模擬聽者圍繞聲源移動時聲音的差異，例如在 3D 遊戲中您圍繞聲源移動時發生的聲像。這方面的官方術語是**空間化**，本文將介紹如何實現此類系統的基礎知識。
示例
您可以在 GitHub 上的 webaudio-examples 倉庫 中找到許多示例。
規範
| 規範 |
|---|
| Web Audio API # AudioContext |
瀏覽器相容性
載入中…
另見
教程/指南
庫
- Tone.js：一個用於在瀏覽器中建立互動式音樂的框架。
- howler.js：一個 JavaScript 音訊庫，預設使用 Web Audio API，並回退到 HTML 音訊，同時提供其他有用的功能。
- Mooog：jQuery 風格的 AudioNodes 鏈式呼叫、混音器風格的傳送/返回等。
- XSound：用於合成器、效果、視覺化、錄音等的 Web Audio API 庫。
- OpenLang：HTML 影片語言實驗室 Web 應用程式，使用 Web Audio API 錄製並將來自不同來源的影片和音訊組合成一個檔案（GitHub 上的原始碼）
- Pts.js：簡化 Web 音訊視覺化（指南）