視覺化學習 Web Audio API 的方式
在編輯器中撰寫 JavaScript，立即看到它所建立的音訊節點圖。理解訊號流，實時調整參數，並透過連結分享你的音訊配置。整個過程完全在瀏覽器中執行，無需註冊帳號。
在編輯器中撰寫 Web Audio API 程式碼，按下執行，立刻在畫布上看到一個互動式的節點圖。支援規範中所有節點。
每個 AudioParam 都是可操作的旋鈕，隨時調整並立即聽到效果，無需重新執行程式碼。
點擊任一連接線即可插入分析器，隨時查看該點的波形或頻譜。
調變連接以虛線顯示，每個旋鈕會顯示調變範圍，清楚看到 LFO 如何塑造聲音。
內建完整合成器範例，如 FM 合成器、琶音器、白噪音踢鼓等，並提供每種節點類型的範例，方便參考。
Audio Worklet 允許在 Web Worker 中執行 JavaScript，創建自訂音訊處理節點。
所有你需要知道的資訊，助你順利使用 Studio。
Web Audio Studio 是一個免費且基於瀏覽器的互動式學習平台，專為學習 Web Audio API 設計。你在左側撰寫 JavaScript，右側即時生成音訊節點圖，並即時聽到結果。圖中每個 AudioParam 都會變成可拖曳的旋鈕或選擇器，播放時可即時調整。整個過程完全在瀏覽器端執行，無需帳號。
MDN 以文字說明 Web Audio API，CodePen 可執行程式碼但不顯示音訊圖。Web Audio Studio 則將你的 Web Audio API 程式碼轉換成即時音訊節點圖，並將所有 AudioParam 以旋鈕形式呈現，連接線可檢視訊號，程式碼是唯一真實來源，圖形即時反映程式碼所建立的結構。
此應用程式可在任何現代瀏覽器於 app.webaudio.studio 使用，無需安裝、註冊或登入。所有音訊處理皆在瀏覽器端完成，除非你選擇分享音訊配置，否則不會傳送資料至伺服器。
支援 Web Audio API 規範中所有節點，包括 OscillatorNode、GainNode、BiquadFilterNode、IIRFilterNode、DelayNode、ConvolverNode、DynamicsCompressorNode、WaveShaperNode、AnalyserNode、AudioBufferSourceNode、ConstantSourceNode、StereoPannerNode、PannerNode（3D / HRTF）、ChannelSplitterNode、ChannelMergerNode、MediaElementAudioSourceNode、MediaStreamAudioSourceNode、MediaStreamAudioDestinationNode 及自訂 AudioWorkletNode 處理器。
你可以直接在編輯器中撰寫自訂 AudioWorkletProcessor。編輯器支援多檔案，主程式與 AudioWorklet 檔案各自有分頁。處理器會被註冊、實例化，並以一般節點呈現在圖中，AudioParam 也會以可拖曳旋鈕顯示。
編輯器內建約 25 種範本，涵蓋 FM 合成、AM 合成、加法合成、混響、波形失真、LFO 調變、3D 聲像、延遲回饋、動態壓縮、麥克風輸入、AudioWorklet 處理器等。可從範本選單快速載入。
點擊圖中任一連接線即可插入即時分析器，實時顯示該訊號的波形與頻譜。
每個節點都有旁路開關，旁路時訊號會繞過該節點，方便你在不改程式碼的情況下做 A/B 比較。
點擊分享按鈕可儲存你的音訊配置，程式碼會存放在伺服器，並產生短網址方便分享。
適合首次學習 Web Audio API 的網頁開發者、想視覺化訊號鏈的音訊程式設計師、數位訊號處理與音效設計課程的學生與教師，以及對瀏覽器音訊運作有興趣的任何人。
若遇到困難，可搜尋官方部落格或加入 Discord 伺服器求助。
Web Audio Studio 由 Alex Griss 開發，更多資訊請見 alexgriss.tech 。