使用Web音頻API使用傅立葉變換

Web音頻API使JavaScript程序員輕鬆訪問聲音處理和綜合。在本文中，我們將介紹自定義振盪器，這是Web音頻API的鮮為人知的功能，它使其易於放置傅立葉變換以合成瀏覽器中獨特的聲音效果。

鑰匙要點

• > Web Audio API允許JavaScript程序員使用聲音處理和合成，包括使用自定義振盪器和傅立葉變換來在瀏覽器中創建獨特的聲音效果。
>
• 傅立葉變換是一種數學工具，用於將復雜的信號分解為增量頻率的離散正弦曲線，使其非常適合逼真的聲音生成。此方法由音頻壓縮標準（例如MP3。>）使用 Web音頻API中的自定義振盪器可以使用傅立葉變換來生成波形。此功能允許合成複雜的音調，例如警察警報器或獨特的號角聲。 Web音頻API中使用傅立葉變換和自定義振盪器的聲音合成比使用音頻樣品更靈活，從而使開發人員能夠完全自動化自定義效果並合成複雜的音調。
• > Web音頻振盪器
Web音頻API允許您撰寫音頻元素以產生聲音的圖。振盪器就是這樣的元素 - 一種生成純音頻信號的聲源。您可以設置其頻率及其類型，可以是正弦，方形，鋸齒或三角形，但是，正如我們將要看到的那樣，還有一個強大的自定義類型。 首先，讓我們嘗試一個標準振盪器。我們只是將其頻率設置為440 Hz，音樂家將其識別為A4音符，我們包括一個類型的選擇器，讓您聽到正弦，方形，鋸齒和三角形波形之間的區別。
• 請參閱codepen上的seb molines（@clafou）的筆網絡音頻振盪器。
自定義振盪器可讓您定義自己的波形代替這些內置類型，但有一個扭曲：它們使用傅立葉變換來生成此波形。這使它們非常適合現實的聲音。

傅立葉以示例

轉換 傅立葉變換是音頻壓縮標準（例如MP3）使用的數學工具，以及許多其他應用程序。逆傅里葉變換將信號分解為其組成頻率，就像人耳的過程一樣，振動以感知單個音調。 在高水平上，傅立葉會轉化一個事實，即可以將復雜的信號分解為增量頻率的離散正弦曲線。它使用係數表工作，每種都應用於基本頻率的倍數。桌子越大，近似越近。感興趣？ Wikipedia頁面值得一看，並包括動畫，以幫助將信號的分解為離散的正弦曲線。 但是，讓我們沒有深入研究理論，而是通過解構簡單的連續聲音來付諸實踐：空氣號。

合成一個喇叭

在本文中，我們將使用警察警報器和號角的錄音。此處顯示了使用開源音頻編輯器Audacity創建的喇叭聲的光譜儀。 它清楚地顯示了許多不同強度的線，所有這些都以相等的間隔間隔。如果我們仔細觀察，則此間隔約為160Hz。 傅立葉變換以基本頻率（我們稱之為）及其泛音，這是f的倍數。如果我們選擇160Hz作為基本F，則該線為320Hz（2 x f）是我們的第一個泛音，該線位於480Hz（3 x f）我們的第二個泛音器等線，依此類推。 由於光譜儀顯示所有線均處於F的倍數，因此在F的每個倍數上觀察到的強度的數組足以表示對記錄的聲音的體面模仿。 從傅立葉係數創建自定義波形的CreatePerioDicwave的Web音頻API文檔告訴我們： 還有一個圖像 我們可以忽略的參數作為階段與此示例無關。 因此，讓我們創建一個這些係數的數組（估計它們為0.4、1.4、1、1、1.3、0.7、0.6、0.5、0.9、0.9、0.8，基於光譜儀上線上的亮度從底部開始）。然後，我們從該表創建一個自定義振盪器，並合成所得聲音。

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

請參閱Pen自定義振盪器：Seb Molines（@clafou）的horn of codepen。

並不是完全舒緩的聲音，而是非常接近錄製的聲音。當然，聲音綜合遠遠超出了單獨的頻譜，特別是信封是音色同樣重要的方面。 從信號數據到傅立葉表 像我們剛剛一樣手工創建傅立葉係數是很不尋常的（很少有聲音像我們的喇叭聲一樣簡單，它僅由諧波部分組成，即F的倍數）。通常，通過將真實信號數據饋入逆FFT（快速傅立葉變換）算法來計算傅立葉表。 您可以在鉻存儲庫中找到用於選擇聲音的傅立葉係數，其中包括下面播放的器官聲音：

請參閱codepen上的seb molines（@clafou）的筆自定義振盪器：器官 DSP.JS開源庫可讓您從自己的示例數據中計算此類傅立葉係數。現在，我們將證明這一點以產生特定的波形。

低頻振盪器：警察警報音

美國警察警報器在低頻和高頻之間振盪。通過連接兩個振盪器，我們可以使用Web音頻API實現這一目標。第一個（低頻振盪器或LFO）調節第二個產生可聽見聲波的第二個頻率。 與以前一樣，為了解構真實的東西，我們從同一錄音中拍攝了警察警報聲的光譜儀。

現在，我們看到一個鯊魚鰭狀波形，代表了警笛的節奏調製。標準振盪器僅支持正弦，方形，鋸齒和三角形波形，因此我們不能依靠這些波形來模仿這種特定的波形。但是我們可以再次創建一個自定義振盪器。 首先，我們需要代表所需曲線的值數組。以下功能會產生這樣的值，我們將其塞入一個名為Sharkfinvalues的數組中。

請參閱codepen上的seb molines（@clafou）的警笛調製的筆波形函數。

接下來，我們使用dsp.js從此信號數據中計算傅立葉係數。我們獲得了真實和圖像陣列，然後使用這些陣列來初始化LFO。

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

最後，我們創建第二個振盪器，並通過增益節點將LFO輸出的增益節點連接到其頻率。我們的光譜儀顯示波形持續約380ms，因此我們將LFO的頻率設置為1/0.380。它還向我們表明，警笛的基本音調範圍從約750Hz的低點到高約1650Hz（中位數為1200Hz±450Hz），因此我們將振盪器的頻率設置為1200，LFO的增益為450。 現在，我們可以啟動兩個振盪器，以聽到我們的警察。

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

請參閱Codepen上的Seb Molines（@clafou）的筆警笛。

對於更多的現實主義，我們還可以將自定義波形應用於第二個振盪器，正如我們用喇叭聲所顯示的那樣。

結論

借助其使用傅立葉變換，自定義振盪器為Web音頻開發人員提供了一種簡單的方法來綜合複雜的音調並完全自動化自定義效果，例如我們已經證明的警笛波形。 聲音合成比使用音頻樣品更靈活。例如，在此警笛效果上很容易添加更多效果，就像我在此移動應用程序中添加多普勒變化所做的那樣。 “我可以使用”規格表明，除IE外，Web Audio API享有廣泛的瀏覽器支持。並非所有瀏覽器都具有最新的W3C標準，但是可以幫助編寫跨瀏覽器代碼。 Android L將在WebView中添加Web Audio API支持，iOS自6版以來一直在做。現在是開始實驗的好時機！

>關於使用Web音頻API

使用傅立葉變換的常見問題（常見問題解答）

Web音頻API是什麼，它如何工作？

> Web Audio API是用於處理和合成Web應用程序中音頻的高級JavaScript API。它允許開發人員選擇音頻源，為音頻添加效果，創建音頻可視化，應用空間效果（例如平移）等等。它通過創建音頻上下文來起作用，可以從中創建各種音頻節點並將其連接在一起以形成音頻路由圖。每個節點都執行特定的音頻函數，例如產生聲音，更改音量或應用音頻效果。

>傅立葉變換如何在Web音頻API中的工作？

> Web Audio API中的fftSize屬性是什麼？ Web音頻API中的fftSize屬性用於設置快速傅立葉變換（FFT）的大小以確定頻域。它是兩個值的功率，它決定執行傅立葉變換時將使用的樣品數量。值越高，頻率箱就越多，頻率數據的詳細信息就越詳細。但是，較高的值還意味著需要更多的計算能力。
>如何使用Web Audio API來創建音頻可視化？然後使用該數據創建視覺表示。這通常是使用AnalySernode接口完成的，該接口提供實時頻率和時間域分析信息。然後，這些數據可用於創建可視化，例如波形圖或頻譜圖。創建可視化的特定方法將取決於您要創建的可視化類型以及用於創建圖形的庫或工具。
如何使用Web音頻API應用於音頻Web Audio API提供了多種節點，可用於在音頻上應用效果。其中包括用於變化體積的增益表，用於應用各種濾波器效果的Biquadfilternode，用於應用卷積效應（例如混響）等的探路表等。可以從音頻上下文創建這些節點，然後在音頻路由圖中連接以將期望的效果應用於音頻。

Web Audio API？ Web音頻API通常用於Web應用程序中的各種目的。其中包括播放和控制音頻，在遊戲中添加聲音效果，創建音頻可視化，在虛擬現實應用程序中應用空間效果，等等。它提供了一種強大而靈活的方式，可以在Web應用程序中使用音頻。 >

>如何使用Web Audio API控制音頻的播放？這包括啟動和停止音頻，調整播放率並尋求音頻不同部分的能力。這通常是使用AudioBufferSourcenode接口完成的，該接口代表由內存音頻數據組成的音頻源。

Web Audio API API的某些限制是什麼？強大而靈活，它確實有一些局限性。例如，它需要一個支持API的現代瀏覽器，用於更高級的音頻處理任務可能很複雜。此外，由於它是高級API，因此與低級API相比，它可能無法提供某些應用所需的控制級別。

>

我可以使用Web Audio API記錄音頻嗎？是的，可以使用Web音頻API記錄音頻，儘管這不是其主要目的。這通常是使用MediaStreamAudioSourCenode接口完成的，該接口代表由媒體流組成的音頻源（例如來自麥克風或其他音頻輸入設備）。

>我如何了解有關Web Audio API的更多信息？ 🎜>

>有許多資源可用於了解有關Web音頻API的更多信息。 Mozilla開發人員網絡（MDN）提供了有關API的全面文檔，包括指南和教程。在Codecademy，Udemy和Coursera等網站上也有許多在線教程和課程。此外，還有幾本關於該主題的書籍，例如Boris Smus的“ Web Audio API”。

以上是使用Web音頻API使用傅立葉變換的詳細內容。更多資訊請關注PHP中文網其他相關文章！