鑰匙要點

• Web Audio API提供了一種動態(tài)而復(fù)雜的方式來控制Web應(yīng)用程序中的聲音，提供了比HTML5音頻元素更強大的解決方案。 Web Audio API允許對原始波形數(shù)據(jù)進行操縱，分析和失真，使其非常適合游戲和聲音編輯等應(yīng)用程序。它還提供了一個整潔的API，可以在瀏覽器中得到很好的支持。
>
• > API允許創(chuàng)建AudioContext對象，該對象可用于封裝音頻數(shù)據(jù)，以及可以將各種可以鏈式鏈接在一起以進行復(fù)雜的聲音操作的各種Audionodes。這可以用于創(chuàng)建動態(tài)聲音，例如在飛行模擬器游戲中更改引擎聲音的音調(diào)。
除了基本的播放之外，API可以實現(xiàn)更復(fù)雜的聲音操縱，例如卷積和波浪形成。這可以用來創(chuàng)建現(xiàn)實的聲音效果，例如通過揚聲器傳來的聲音。此外，API還允許無間隙的音頻播放和循環(huán)播放，并解決網(wǎng)絡(luò)游戲中遇到的常見問題。
• 本文是Microsoft的Web Dev系列的一部分。感謝您支持使SitietPoint成為可能的合作伙伴。 在Web音頻API之前，HTML5為我們提供了音頻元素?，F(xiàn)在似乎很難記住，但是在音頻元素之前，我們在瀏覽器中的聲音最佳選擇是插件！確實，音頻元素令人興奮，但它具有非常單一的焦點。從本質(zhì)上講，這是一個沒有視頻的視頻播放器，適合音樂或播客等長音頻，但不適合游戲的需求。我們?nèi)淌芰耍ɑ虬l(fā)現(xiàn)的）循環(huán)問題，同時的聲音限制，故障以及完全缺乏對聲音數(shù)據(jù)本身的訪問。

>幸運的是，我們的耐心得到了回報。在可能缺少音頻元素的地方，Web音頻API提供。它為我們提供了對聲音的前所未有的控制權(quán)，非常適合從游戲到復(fù)雜的聲音編輯的所有內(nèi)容。所有這些都帶有整齊的API，非常有趣且得到很好的支持。

> >讓我們更具體一點：Web音頻使您可以訪問聲音的原始波形數(shù)據(jù)，并讓您操縱，分析，扭曲或以其他方式修改它。音頻是帆布API對像素的內(nèi)容。您對聲音數(shù)據(jù)有深度且大多不受限制的訪問。它真的很強大！

本教程是Flight Arcade系列的第二個教程 - 構(gòu)建，以演示W(wǎng)eb平臺以及新的Microsoft Edge瀏覽器和EdgeHTML渲染引擎中的可能性。本文的交互式代碼和示例也位于以下位置：http：//www.flightarcade.com/learn/

[YouTube XYAQ9TPMXRA]

>飛行聲音

即使是最早的飛行模擬器版本，也努力使用聲音重新創(chuàng)建飛行感覺。最重要的聲音之一是發(fā)動機的動態(tài)音高，它隨油門而變化。我們知道，當我們重新構(gòu)想網(wǎng)絡(luò)游戲時，靜態(tài)引擎噪聲確實看起來很平坦，因此發(fā)動機噪聲的動態(tài)音高顯然是Web音頻的候選者。

您可以在此處進行交互嘗試。

> 我們的飛行教練的聲音不太明顯（但可能更有趣）。在飛行街機的早期迭代中，我們像錄制的那樣播放了教練的聲音，聽起來好像是從一個良好的攤位出來的！我們注意到我們開始將聲音稱為“敘述者”，而不是“講師”。以某種方式，原始的聲音打破了游戲的幻想。如此完美的音頻在駕駛艙的嘈雜聲音上似乎是不對的。因此，在這種情況下，我們使用Web音頻對語音說明應(yīng)用了一些簡單的扭曲，并增強了學(xué)習(xí)飛行的現(xiàn)實主義！

>

>在文章末尾有一個講師音頻示例。在下面的部分中，我們將為您提供有關(guān)如何使用Web音頻API創(chuàng)建這些聲音的詳細視圖。

使用API??：AudioContext和Audio源

>任何Web音頻項目的第一步是創(chuàng)建AudioContext對象。一些瀏覽器（包括Chrome）仍然需要將此API進行前綴，因此代碼看起來像這樣：

>

然后，您需要聲音。您實際上可以使用Web Audio API從頭開始生成聲音，但是出于我們的目的，我們想加載預(yù)先記錄的音頻源。如果您已經(jīng)有了HTML音頻元素，則可以使用它，但是很多次。畢竟，如果您有網(wǎng)絡(luò)音頻，誰需要音頻元素？最常見的是，您只需將音頻直接下載到帶有http請求的緩沖區(qū)中：>

現(xiàn)在，我們有了AudioContext和一些音頻數(shù)據(jù)。下一步是使這些事情共同努力。為此，我們需要…

audionodes

您使用Web音頻進行的所有操作都會通過某種Audionode發(fā)生，它們具有許多不同的口味：有些節(jié)點被用作音頻源，有些節(jié)點用作音頻輸出，有些則用作音頻處理器或分析儀。您可以將它們鏈在一起做有趣的事情。

>您可能會認為AudioContext是一種聲音階段。它包含的各種儀器，放大器和揚聲器都將是不同類型的Audionodes。使用Web音頻API很像將所有這些東西插入在一起（例如，效果踏板和踏板的樂器中，然后將其插入放大器，然后插入揚聲器等）。

好吧，為了對我們新獲取的AudioContext音頻源做任何有趣的事情，我們需要首先將音頻數(shù)據(jù)封裝為源audionode。

播放 就是這樣。我們有一個來源。但是在播放它之前，我們需要將其連接到目標節(jié)點。為方便起見，AudioContext公開了默認的目標節(jié)點（通常是您的耳機或揚聲器）。連接后，這只是打電話開始和停止的問題。

>

>值得注意的是，您只能在每個源節(jié)點上調(diào)用一次啟動（）。這意味著“停頓”不受直接支持。一旦來源停止，它就會過期。幸運的是，源節(jié)點是廉價的對象，旨在輕松創(chuàng)建（音頻數(shù)據(jù)本身，請記住，在單獨的緩沖區(qū)中）。因此，如果要恢復(fù)暫停的聲音，您可以簡單地創(chuàng)建一個新的源節(jié)點，然后使用時間戳參數(shù)來調(diào)用start（）。 AudioContext具有一個內(nèi)部時鐘，您可以使用該時鐘來管理時間戳。>

發(fā)動機聲音

>就是這樣的基礎(chǔ)知識，但是到目前為止，我們所做的一切（簡單的音頻播放）本可以使用舊的音頻元素來完成。對于飛行街機，我們需要做一些動態(tài)的事情。我們希望球場隨著發(fā)動機的速度而變化。

>對于Web Audio來說，這實際上很簡單（沒有它，幾乎是不可能的）！源節(jié)點具有影響播放速度的速率屬性。為了增加球場，我們只會提高播放速度：

>發(fā)動機聲音也需要循環(huán)。這也很容易（也有一個屬性）：

>

，但是有一個陷阱。許多音頻格式（尤其是壓縮音頻）將音頻數(shù)據(jù)存儲在固定尺寸的幀中，并且通常，音頻數(shù)據(jù)本身不會“填充”最終幀。這可能會在音頻文件的末尾留下一個微小的縫隙，并在循環(huán)循環(huán)時會單擊或故障。標準的HTML音頻元素?zé)o法對此差距提供任何控制，對于依靠循環(huán)音頻的網(wǎng)絡(luò)游戲來說，這可能是一個巨大的挑戰(zhàn)。

幸運的是，使用Web Audio API播放的無間隙音頻播放確實很簡單。這只是為音頻循環(huán)部分的開始和結(jié)束設(shè)置時間戳（請注意，這些值與音頻源本身而不是AudioContext時鐘相對

講師的語音 到目前為止聲音操縱或分析。在Flight Arcade中，我們使用了兩種節(jié)點類型（confolvernode和waveShapernode）來使教練的聲音聽起來像是通過揚聲器出現(xiàn)的。

>

卷積

從W3C規(guī)格：

卷積是一個數(shù)學(xué)過程，可以應(yīng)用于音頻信號，以實現(xiàn)許多有趣的高質(zhì)量線性效應(yīng)。通常，效果用于模擬聲學(xué)空間，例如音樂廳，大教堂或戶外露天劇場。它也可以用于復(fù)雜的過濾效果，例如壁櫥內(nèi)部發(fā)出的悶悶不樂的聲音，在水下聲音，通過電話發(fā)出聲音或通過老式揚聲器柜播放。該技術(shù)非常常用于主要的電影和音樂制作中，被認為是極具用途和高質(zhì)量的。

卷積基本上結(jié)合了兩種聲音：要處理的聲音（講師的聲音）和一種稱為沖動響應(yīng)的聲音。脈沖響應(yīng)確實是一個聲音文件，但它對于這種卷積過程確實很有用。您可以將其視為各種音頻過濾器，旨在與另一種聲音卷入時產(chǎn)生特定的效果。結(jié)果通常比音頻的簡單數(shù)學(xué)操縱更為現(xiàn)實。>

要使用它，我們創(chuàng)建了一個插款節(jié)點，加載包含脈沖響應(yīng)的音頻，然后連接節(jié)點。

波形

為了增加失真，我們還使用了waveShaper節(jié)點。這種類型的節(jié)點使您可以將數(shù)學(xué)失真應(yīng)用于音頻信號，以達到一些真正的戲劇性效果。失真定義為曲線函數(shù)。這些功能可能需要一些復(fù)雜的數(shù)學(xué)。對于

下面的示例，我們從MDN的朋友那里借了一個好人。

>

請注意原始波形和波形之間的巨大差異，并將波形施加到它。

您可以在此處進行交互嘗試。>

上面的示例是您可以使用Web音頻API進行多少的戲劇性表示。我們不僅從瀏覽器對聲音進行了一些非常戲劇性的更改，而且我們還分析了波形并將其渲染為帆布元素！網(wǎng)絡(luò)音頻API功能強大，多才多藝，坦率地說，很有趣！

>

與JavaScript更多動手

Microsoft在許多開源JavaScript主題上擁有大量免費學(xué)習(xí)，我們的任務(wù)是使用Microsoft Edge創(chuàng)建更多的東西。這里有一些要退房：

2015年Microsoft Edge Web峰會（Microsoft Edge Web Summit）（新瀏覽器，新的Web平臺功能和社區(qū)的嘉賓演講者的期望完整系列）

• >構(gòu)建// build/and Windows 10（包括用于網(wǎng)站和應(yīng)用的新JavaScript引擎）
>
• >不打破網(wǎng)絡(luò)的javascript（克里斯蒂安·海爾曼（Christian Heilmann）最近的主題演講）
• 托管的Web應(yīng)用程序和Web平臺創(chuàng)新（對諸如歧管之類的主題的深入研究）
• 實用的性能提示，使您的HTML/JavaScript更快（從響應(yīng)式設(shè)計到休閑游戲再到性能優(yōu)化的7部分系列）
>現(xiàn)代Web平臺Jumpstart（HTML，CSS和JS的基本原理）
• >
• 和一些免費的工具要入門：Visual Studio代碼，Azure試用和跨瀏覽器測試工具 - 所有這些都可用于Mac，Linux或Windows。

本文是Microsoft的Web Dev技術(shù)系列的一部分。我們很高興與您共享Microsoft Edge和新的EdgeHTML渲染引擎。在Modern.ie上獲取免費的虛擬機或遠程測試。

> Web Audio API

的經(jīng)常詢問有關(guān)動態(tài)聲音的問題（常見問題解答）

>如何開始使用Web Audio API為我的Web應(yīng)用程序？開始使用Web Audio API，您首先需要創(chuàng)建AudioContext接口的實例。這是您的音頻項目的主要“容器”，通常是在頁面加載時創(chuàng)建的。有了AudioContext的實例后，您可以在此上下文中創(chuàng)建節(jié)點，將它們連接在一起以形成音頻路由圖，然后操縱音頻數(shù)據(jù)。請記住要檢查瀏覽器的兼容性，因為并非所有瀏覽器都完全支持Web音頻API。

> Web Audio API中可用的不同類型的音頻節(jié)點是什么？音頻節(jié)點的類型，每個節(jié)點具有特定目的。一些最常用的節(jié)點包括：用于控制音量的增益節(jié)點，用于生成聲音的示波器，用于應(yīng)用音頻效果的Biquadfilternode以及用于播放聲音樣本的AudioBufferSourCenode。每個節(jié)點可以連接到其他節(jié)點以形成音頻路由圖。

>如何使用Web Audio API控制音頻？該節(jié)點用于控制音頻的響度。您可以使用AudioContext的creategain（）方法創(chuàng)建一個增益表。創(chuàng)建后，您可以通過設(shè)置增益屬性的值來調(diào)整增益（卷）。

如何使用Web Audio API來生成聲音？ 。該節(jié)點會生成周期性波形。您可以使用AudioContext的CreateSoscillator（）方法創(chuàng)建一個oscillatornode。創(chuàng)建后，您可以設(shè)置波形的類型以生成（正弦，方形，鋸齒或三角形）和頻率。您可以使用Biquadfilternode應(yīng)用音頻效果。該節(jié)點代表一個二階過濾器，可用于創(chuàng)建各種效果，例如音調(diào)控制。您可以使用AudioContext的CreateBiquadFilter（）方法創(chuàng)建一個Biquadfilternode。創(chuàng)建后，您可以設(shè)置過濾器的類型（低通，高通，帶通等），并設(shè)置頻率，Q和增益。

>

>如何使用Web Audio API播放聲音樣品？

>您可以使用AudioBufferSourCenode播放聲音樣本。該節(jié)點用于直接從AudioBuffer播放音頻數(shù)據(jù)。您可以使用AudioContext的CreateBufferSource（）方法創(chuàng)建AudioBufferSourCenode。創(chuàng)建后，您可以將緩沖區(qū)設(shè)置為要播放的音頻數(shù)據(jù)，然后使用start（）方法開始播放。

>

>如何在Web Audio API中連接音頻節(jié)點？

>您可以使用Connect（）方法將音頻節(jié)點連接在一起。此方法用于形成音頻路由圖。您可以將一個節(jié)點連接到另一個節(jié)點，也可以將一個節(jié)點連接到多個節(jié)點。音頻數(shù)據(jù)從源節(jié)點流到目標節(jié)點。

>

>如何在Web音頻API中操縱音頻數(shù)據(jù)？音頻節(jié)點提供的屬性。例如，您可以更改示波器的頻率，調(diào)整增益表的增益或?qū)V波器應(yīng)用于Biquadfilternode。您還可以使用AnalySernode捕獲實時頻率和時間域數(shù)據(jù)。

>

> audiocontext在Web Audio API中的作用是什么？ '對于您的音頻項目。它用于創(chuàng)建音頻節(jié)點，管理音頻路由圖并控制播放。您可以在頁面加載時創(chuàng)建AudioContext的實例，然后使用此實例創(chuàng)建和操縱音頻節(jié)點。

> Web音頻API的瀏覽器兼容性是什么？但是，并非所有瀏覽器中都完全支持所有功能。建議在在Web應(yīng)用程序中使用它之前檢查特定功能支持。

>

以上是Web音頻API的動態(tài)聲音的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！