鑰匙要點

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

傅立葉以示例

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

合成一個喇叭

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

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。

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

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

低頻振蕩器：警察警報音

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

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

請參閱codepen上的seb molines（@clafou）的警笛調(diào)制的筆波形函數(shù)。

接下來，我們使用dsp.js從此信號數(shù)據(jù)中計算傅立葉系數(shù)。我們獲得了真實和圖像陣列，然后使用這些陣列來初始化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.

最后，我們創(chuàng)建第二個振蕩器，并通過增益節(jié)點將LFO輸出的增益節(jié)點連接到其頻率。我們的光譜儀顯示波形持續(xù)約380ms，因此我們將LFO的頻率設(shè)置為1/0.380。它還向我們表明，警笛的基本音調(diào)范圍從約750Hz的低點到高約1650Hz（中位數(shù)為1200Hz±450Hz），因此我們將振蕩器的頻率設(shè)置為1200，LFO的增益為450。 現(xiàn)在，我們可以啟動兩個振蕩器，以聽到我們的警察。

<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）的筆警笛。

對于更多的現(xiàn)實主義，我們還可以將自定義波形應(yīng)用于第二個振蕩器，正如我們用喇叭聲所顯示的那樣。

結(jié)論

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

>關(guān)于使用Web音頻API

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

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

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

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

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

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

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

Web Audio API API的某些限制是什么？強大而靈活，它確實有一些局限性。例如，它需要一個支持API的現(xiàn)代瀏覽器，用于更高級的音頻處理任務(wù)可能很復(fù)雜。此外，由于它是高級API，因此與低級API相比，它可能無法提供某些應(yīng)用所需的控制級別。

>

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

>我如何了解有關(guān)Web Audio API的更多信息？ ??>

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

以上是使用Web音頻API使用傅立葉變換的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！