鑰匙要點(diǎn)

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

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

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

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

[YouTube XYAQ9TPMXRA]

>飛行聲音

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

您可以在此處進(jìn)行交互嘗試。

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

>

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

使用API??：AudioContext和Audio源

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

>

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

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

audionodes

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

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

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

播放 就是這樣。我們有一個(gè)來(lái)源。但是在播放它之前，我們需要將其連接到目標(biāo)節(jié)點(diǎn)。為方便起見(jiàn)，AudioContext公開(kāi)了默認(rèn)的目標(biāo)節(jié)點(diǎn)（通常是您的耳機(jī)或揚(yáng)聲器）。連接後，這只是打電話開(kāi)始和停止的問(wèn)題。

>

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

發(fā)動(dòng)機(jī)聲音

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

>對(duì)於Web Audio來(lái)說(shuō)，這實(shí)際上很簡(jiǎn)單（沒(méi)有它，幾乎是不可能的）！源節(jié)點(diǎn)具有影響播放速度的速率屬性。為了增加球場(chǎng)，我們只會(huì)提高播放速度：

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

>

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

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

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

>

卷積

從W3C規(guī)格：

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

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

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

波形

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

下面的示例，我們從MDN的朋友那裡借了一個(gè)好人。

>

請(qǐng)注意原始波形和波形之間的巨大差異，並將波形施加到它。

您可以在此處進(jìn)行交互嘗試。 >

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

>

與JavaScript更多動(dòng)手

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

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

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

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

> Web Audio API

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

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

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

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

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

>

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

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

>

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

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

>

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

>

> audiocontext在Web Audio API中的作用是什麼？ '對(duì)於您的音頻項(xiàng)目。它用於創(chuàng)建音頻節(jié)點(diǎn)，管理音頻路由圖並控製播放。您可以在頁(yè)面加載時(shí)創(chuàng)建AudioContext的實(shí)例，然後使用此實(shí)例創(chuàng)建和操縱音頻節(jié)點(diǎn)。

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

>

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