Web音頻API的動態聲音

鑰匙要點

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

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

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

本教程是Flight Arcade系列的第二個教程 - 構建，以演示Web平台以及新的Microsoft Edge瀏覽器和EdgeHTML渲染引擎中的可能性。本文的交互式代碼和示例也位於以下位置：http：//www.flightarcade.com/learn/

[YouTube XYAQ9TPMXRA]

>飛行聲音

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

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

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

>

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

使用API​​：AudioContext和Audio源

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

>

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

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

audionodes

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

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

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

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

>

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

發動機聲音

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

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

>發動機聲音也需要循環。這也很容易（也有一個屬性）：

>

，但是有一個陷阱。許多音頻格式（尤其是壓縮音頻）將音頻數據存儲在固定尺寸的幀中，並且通常，音頻數據本身不會“填充”最終幀。這可能會在音頻文件的末尾留下一個微小的縫隙，並在循環循環時會單擊或故障。標準的HTML音頻元素無法對此差距提供任何控制，對於依靠循環音頻的網絡遊戲來說，這可能是一個巨大的挑戰。

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

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

>

卷積

從W3C規格：

卷積是一個數學過程，可以應用於音頻信號，以實現許多有趣的高質量線性效應。通常，效果用於模擬聲學空間，例如音樂廳，大教堂或戶外露天劇場。它也可以用於復雜的過濾效果，例如壁櫥內部發出的悶悶不樂的聲音，在水下聲音，通過電話發出聲音或通過老式揚聲器櫃播放。該技術非常常用於主要的電影和音樂製作中，被認為是極具用途和高質量的。

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

要使用它，我們創建了一個插款節點，加載包含脈衝響應的音頻，然後連接節點。

波形

為了增加失真，我們還使用了waveShaper節點。這種類型的節點使您可以將數學失真應用於音頻信號，以達到一些真正的戲劇性效果。失真定義為曲線函數。這些功能可能需要一些複雜的數學。對於

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

>

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

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

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

>

與JavaScript更多動手

Microsoft在許多開源JavaScript主題上擁有大量免費學習，我們的任務是使用Microsoft Edge創建更多的東西。這裡有一些要退房：

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

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

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

> Web Audio API

的經常詢問有關動態聲音的問題（常見問題解答）

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

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

>如何使用Web Audio API控制音頻？該節點用於控制音頻的響度。您可以使用AudioContext的creategain（）方法創建一個增益表。創建後，您可以通過設置增益屬性的值來調整增益（卷）。

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

>

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

>您可以使用AudioBufferSourCenode播放聲音樣本。該節點用於直接從AudioBuffer播放音頻數據。您可以使用AudioContext的CreateBufferSource（）方法創建AudioBufferSourCenode。創建後，您可以將緩衝區設置為要播放的音頻數據，然後使用start（）方法開始播放。

>

>如何在Web Audio API中連接音頻節點？

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

>

>如何在Web音頻API中操縱音頻數據？音頻節點提供的屬性。例如，您可以更改示波器的頻率，調整增益表的增益或將濾波器應用於Biquadfilternode。您還可以使用AnalySernode捕獲實時頻率和時間域數據。

>

> audiocontext在Web Audio API中的作用是什麼？ '對於您的音頻項目。它用於創建音頻節點，管理音頻路由圖並控製播放。您可以在頁面加載時創建AudioContext的實例，然後使用此實例創建和操縱音頻節點。

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

>

以上是Web音頻API的動態聲音的詳細內容。更多資訊請關注PHP中文網其他相關文章！