Key Takeaways

• Die Web -Audio -API bietet eine dynamische und ausgefeilte M?glichkeit, Sound in Webanwendungen zu steuern, und bietet eine robustere L?sung als das HTML5 -Audioelement, das in ihren Funktionen begrenzt war.
• Web -Audio -API erm?glicht die Manipulation, Analyse und Verzerrung von Rohwellenformdaten, wodurch sie ideal für Anwendungen wie Spiele und Schallbearbeitung. Es bietet auch eine ordentliche API, die in Browsern gut unterstützt wird.
• Die API erm?glicht die Erstellung eines Audiocontext -Objekts, mit dem Audiodaten zusammengefasst werden k?nnen, und eine Vielzahl von Audionoden, die für eine komplexe Klangmanipulation miteinander verkettet werden k?nnen. Dies kann verwendet werden, um dynamische Kl?nge zu erstellen, z. B. das ?ndern der Tonh?he eines Motorschalls in einem Flugsimulatorspiel.
Abgesehen von der grundlegenden Wiedergabe erm?glicht die API ausgefeiltere Klangmanipulationen wie Faltung und Wellenformung. Dies kann verwendet werden, um realistische Soundeffekte zu erzielen, wie z. B. eine Stimme, die durch einen Lautsprecher kommt. Darüber hinaus erm?glicht die API auch eine gaplose Audio -Wiedergabe und -aufschlüsselung, wobei die in Webspielen aufgetretenen h?ufig auftretenden Probleme gel?st werden.

Dieser Artikel ist Teil einer Web -Dev -Serie von Microsoft. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint erm?glichen.

Vor der Web -Audio -API gab uns HTML5 das Audioelement. Es mag sich jetzt schwer erinnern, jetzt zu erinnern, aber vor dem Audioelement war unsere beste Option für Sound in einem Browser ein Plugin! Das Audioelement war in der Tat aufregend, hatte aber einen ziemlich einzigartigen Fokus. Es war im Wesentlichen ein Videoplayer ohne das Video, gut für lange Audio wie Musik oder Podcast, aber für die Anforderungen des Spielens nicht geeignet. Wir haben (oder haben Problemumgehungen für) Schleifenprobleme, gleichzeitige Klanglimits, St?rungen und v?lliger Mangel an Zugriff auf die Schalldaten selbst erledigt.

.

Zum Glück hat sich unsere Geduld ausgezahlt. Wenn das Audioelement m?glicherweise fehlte, liefert die Web -Audio -API. Es gibt uns eine beispiellose Kontrolle über Sound und ist perfekt für alles, vom Spielen bis hin zu anspruchsvoller Klangbearbeitung. All dies mit einer ordentlichen API, die wirklich Spa? macht und gut unterstützt wird.

Seien wir etwas genauer: Web -Audio erhalten Sie auf die RAW -Wellenformdaten eines Klangs und k?nnen Sie ihn manipulieren, analysieren, verzerren oder auf andere Weise ?ndern. Es ist zu audio, was die Canvas -API für Pixel ist. Sie haben einen tiefen und meist uneingeschr?nkten Zugriff auf die Klangdaten. Es ist wirklich m?chtig!

Dieses Tutorial ist das zweite in einer Serie auf Flug Arcade - erstellt, um zu demonstrieren, was auf der Webplattform m?glich ist, und im neuen Microsoft Edge -Browser und im Renderning Engine von EdgeHtml. Interaktiver Code und Beispiele für diesen Artikel befinden sich auch unter: http://www.flightarcade.com/learn/

[YouTube XYAQ9TPMXRA]

Flugt?ne

Selbst die frühesten Versionen des Flugsimulators bemühten sich, das Gefühl des Fluges mit Klang nachzubilden. Einer der wichtigsten Ger?usche ist die dynamische Tonh?he des Motors, die mit dem Gas die Tonh?he ?ndert. Wir wussten, dass ein statisches Motorger?usch, als wir das Spiel für das Web neu erfunden haben, wirklich flach erscheinen würde, sodass die dynamische Tonh?he des Motorger?usches ein offensichtlicher Kandidat für Web -Audio war.

Sie k?nnen es hier interaktiv ausprobieren.

weniger offensichtlich (aber m?glicherweise interessanter) war die Stimme unseres Fluglehrers. In frühen Iterationen von Flight Arcade spielten wir die Stimme des Ausbilders, genau wie sie aufgenommen worden war, und es klang, als würde es aus einem Soundkabine kommen! Wir haben festgestellt, dass wir die Stimme als ?Erz?hler“ anstelle des ?Ausbilders“ bezeichneten. Irgendwie brach dieser makellose Klang die Illusion des Spiels. Es schien nicht richtig zu sein, dass ein so perfektes Audio über die lauten Ger?usche des Cockpits kam. In diesem Fall haben wir Web -Audio verwendet, um einige einfache Verzerrungen auf den Sprachanweis anzuwenden und den Realismus des Fliegens zu verbessern!

Es gibt eine Stichprobe des Audio -Ausbilders am Ende des Artikels. In den folgenden Abschnitten geben wir Ihnen eine ziemlich detaillierte Ansicht darüber, wie wir die Web -Audio -API verwendet haben, um diese Sounds zu erstellen.

Verwenden der API: Audiocontext und Audioquellen

Der erste Schritt in jedem Web -Audio -Projekt besteht darin, ein Audiocontext -Objekt zu erstellen. Einige Browser (einschlie?lich Chrome) erfordern noch, dass diese API vorangestellt wird, sodass der Code so aussieht:

Dann brauchst du einen Ton. Mit der Web -Audio -API k?nnen Sie tats?chlich Sounds von Grund auf neu erstellen, aber für unsere Zwecke wollten wir eine aufgezeichnete Audioquelle laden. Wenn Sie bereits ein HTML -Audioelement hatten, k?nnten Sie das verwenden, aber oft nicht. Wer braucht schlie?lich ein Audioelement, wenn Sie Web -Audio haben? Am h?ufigsten werden Sie das Audio einfach mit einer HTTP -Anforderung direkt in einen Puffer herunterladen:

Jetzt haben wir einen Audiocontext und einige Audiodaten. Der n?chste Schritt besteht darin, diese Dinge zusammenzuarbeiten. Dafür brauchen wir…

audionodes

Fast alles, was Sie mit Web -Audio machen, erfolgt über eine Art Audionode und sie werden in vielen verschiedenen Geschmacksrichtungen erh?ltlich: Einige Knoten werden als Audioquellen, einige als Audioausg?nge und einige als Audioprozessoren oder Analysatoren verwendet. Sie k?nnen sie anketten, um interessante Dinge zu tun.

Vielleicht denken Sie den Audiocontext als eine Art Tonbühne. Die verschiedenen Instrumente, Verst?rker und Sprecher, die es enth?lt, w?ren alle verschiedene Arten von Audionoden. Die Arbeit mit der Web -Audio -API ist dem Verstopfen all diese Dinge sehr ?hnlich (Instrumente in Effektepedale und Pedal in einen Verst?rker und dann in Sprecher usw.).

Nun, um mit unseren neu erfassten Audiocontext -Audioquellen etwas Interessantes zu tun, müssen wir zuerst die Audiodaten als Quell -Audionode zusammenfassen.

Wiedergabe

Das ist es. Wir haben eine Quelle. Aber bevor wir es spielen k?nnen, müssen wir es mit einem Zielknoten verbinden. Der Audiocontext enth?lt ein Standard -Zielknoten (normalerweise Ihre Kopfh?rer oder Lautsprecher). Sobald es verbunden ist, geht es nur darum, Start und Stopp anzurufen.

Es ist erw?hnenswert, dass Sie nur einmal auf jedem Quellknoten anrufen k?nnen. Das bedeutet, dass "Pause" nicht direkt unterstützt wird. Sobald eine Quelle gestoppt ist, ist sie abgelaufen. Glücklicherweise sind Quellknoten kostengünstige Objekte, die leicht erstellt werden sollen (die Audiodaten selbst, denken Sie daran, in einem separaten Puffer). Wenn Sie also einen pausierten Sound wieder aufnehmen m?chten, k?nnen Sie einfach einen neuen Quellknoten erstellen und start () mit einem Zeitstempelparameter aufrufen. Audiocontext hat eine interne Uhr, mit der Sie Zeitstempel verwalten k?nnen.

Der Motorschall

Das ist es für die Grundlagen, aber alles, was wir bisher gemacht haben (einfache Audio -Wiedergabe), h?tte mit dem alten Audioelement zu tun haben k?nnen. Für die Flughalle mussten wir etwas Dynamischeres tun. Wir wollten, dass sich die Tonh?he mit der Geschwindigkeit des Motors ?ndert.

Das ist tats?chlich ziemlich einfach mit Web -Audio (und w?re ohne es fast unm?glich gewesen)! Der Quellknoten verfügt über eine Rate -Eigenschaft, die sich auf die Wiedergabetreue auswirkt. Um das Spielfeld zu erh?hen, erh?hen wir nur die Wiedergaberate:

Der Motorger?usch muss ebenfalls schleifen. Das ist auch sehr einfach (es gibt auch eine Eigenschaft dafür):

Aber es gibt einen Haken. Viele Audioformate (insbesondere komprimierte Audio) speichern die Audiodaten in Rahmen fester Gr??en, und die Audiodaten selbst werden den letzten Frame nicht "füllen". Dies kann am Ende der Audiodatei eine winzige Lücke hinterlassen und zu Klicks oder St?rungen führen, wenn diese Audio -Dateien geschoben werden. Standard -HTML -Audioelemente bieten keine Kontrolle über diese Lücke und es kann eine gro?e Herausforderung für Webspiele sein, die auf Schleifen -Audio beruhen.

Glücklicherweise ist eine gaplose Audio -Wiedergabe mit der Web -Audio -API sehr einfach. Es geht nur darum, einen Zeitstempel für den Anfang und das Ende des Schleifenabschnitts des Audios festzulegen (beachten Sie, dass diese Werte relativ zur Audioquelle selbst und nicht zur Audiocontext -Uhr sind).

Die Stimme des Ausbilders

Bisher war alles, was wir getan haben Tonmanipulation oder Analyse. In der Flug Arcade verwendeten wir zwei Knotentypen (eine Konvolvernode und eine Waveshapernode), um die Stimme des Ausbilders so klingt, als würde er durch einen Lautsprecher kommen.

Faltung

Aus der W3C -Spezifikation:

Faltung ist ein mathematischer Prozess, der auf ein Audiosignal angewendet werden kann, um viele interessante hochwertige lineare Effekte zu erzielen. Sehr oft wird der Effekt verwendet, um einen akustischen Raum wie einen Konzertsaal, eine Kathedrale oder ein Amphitheater im Freien zu simulieren. Es kann auch für komplexe Filtereffekte verwendet werden, wie ein ged?mpfter Klang, der aus einem Schrank, einem Sound unter Wasser, dem Ger?usch durch ein Telefon oder durch einen Vintage -Lautsprecherschrank kommt. Diese Technik wird sehr h?ufig in der wichtigsten Film- und Musikproduktion verwendet und wird als ?u?erst vielseitig und von hoher Qualit?t angesehen.

Faltung kombiniert im Grunde genommen zwei Kl?nge: ein Sound, der verarbeitet wird (die Stimme des Ausbilders) und ein Sound, der als Impulsantwort bezeichnet wird. Die Impulsantwort ist in der Tat eine Tondatei, aber sie ist wirklich nur für diese Art von Faltungsprozess nützlich. Sie k?nnen es sich als Audiofilter vorstellen, der einen spezifischen Effekt erzeugt, wenn Sie mit einem anderen Klang gebrochen werden. Das Ergebnis ist in der Regel weitaus realistischer als eine einfache mathematische Manipulation des Audios.

Um es zu verwenden, erstellen wir einen Konvolverknoten, laden das Audio, das die Impulsantwort enth?lt, und verbinden dann die Knoten.

Wellenformung

Um die Verzerrung zu erh?hen, haben wir auch einen Waveshaper -Knoten verwendet. Mit dieser Art von Knoten k?nnen Sie mathematische Verzerrungen auf das Audiosignal anwenden, um einige wirklich dramatische Effekte zu erzielen. Die Verzerrung ist als Kurvenfunktion definiert. Diese Funktionen k?nnen eine komplexe Mathematik erfordern. Für

Das Beispiel unten haben wir uns einen guten von unseren Freunden bei Mdn ausgeliehen.

Beachten Sie die starke Differenz zwischen der ursprünglichen Wellenform und der Wellenform mit dem darauf aufgetragenen Waveshaper.

Sie k?nnen es hier interaktiv ausprobieren.

Das obige Beispiel ist eine dramatische Darstellung, wie viel Sie mit der Web -Audio -API machen k?nnen. Wir nehmen nicht nur einige ziemlich dramatische ?nderungen am Sound direkt aus dem Browser vor, sondern analysieren auch die Wellenform und machen sie in ein Leinwandelement! Die Web -Audio -API ist unglaublich leistungsf?hig und vielseitig und ehrlich gesagt viel Spa?!

mehr praktisch mit JavaScript

Microsoft hat eine Reihe kostenloser Lernen bei vielen Open -Source -JavaScript -Themen und wir sind auf der Aufgabe, mit Microsoft Edge viel mehr zu kreieren. Hier finden Sie einige zum Auschecken:

• Microsoft Edge Web Summit 2015 (eine vollst?ndige Serie von dem, was Sie mit dem neuen Browser, neuen Webplattformfunktionen und Gastrednern aus der Community erwarten k?nnen)
Build von // Build/und Windows 10 (einschlie?lich der neuen JavaScript -Engine für Websites und Apps)
JavaScript vorantreiben, ohne das Web (Christian Heilmanns jüngster Keynote) zu brechen
gehostete Web-Apps und Webplattform-Innovationen (ein tiefes Tauchgang zu Themen wie vielf?ltig.js)
Praktische Leistungstipps, um Ihr HTML/JavaScript schneller zu gestalten (eine 7-teilige Serie vom reaktionsschnellen Design bis hin zu Casual Games bis zur Leistungsoptimierung)

Die moderne Webplattform Jumpstart (die Grundlagen von HTML, CSS und JS)

und einige kostenlose Tools zum Einstieg: Visual Studio-Code, Azure-Versuch und Cross-Browser-Test-Tools-alle für Mac, Linux oder Windows verfügbar.

Dieser Artikel ist Teil der Web Dev Tech -Serie von Microsoft. Wir freuen uns, Microsoft Edge und die neue EdgeHTML -Rendering -Engine mit Ihnen zu teilen. Holen Sie sich kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac-, iOS-, Android- oder Windows -Ger?t bei Modern.ie.

h?ufig gestellte Fragen (FAQs) zum dynamischen Sound mit der Web -Audio -API

Wie kann ich mit der Web -Audio -API für meine Webanwendungen beginnen? Dies ist der prim?re ?Container“ für Ihr Audioprojekt und wird normalerweise bei Seitenlast erstellt. Sobald Sie eine Instanz von Audiocontext haben, k?nnen Sie in diesem Zusammenhang Knoten erstellen, sie zusammenschlie?en, um ein Audio -Routing -Diagramm zu erstellen und dann die Audiodaten zu manipulieren. Denken Sie daran, nach Browserkompatibilit?t zu suchen, da nicht alle Browser die Web -Audio -API unterstützen. Arten von Audioknoten mit jeweils einem bestimmten Zweck. Einige der am h?ufigsten verwendeten Knoten umfassen: Gainnode zur Steuerung des Volumens, Oszillatornode zur Erzeugung von Klang, Biquadfilternode zur Anwendung von Audioeffekten und AudioBuffenSourcenode zum Spielen von Klangmuster. Jeder Knoten kann mit anderen Knoten verbunden werden, um ein Audio -Routing -Diagramm zu bilden.

Wie kann ich das Audiovolumen mithilfe der Web -Audio -API steuern? Dieser Knoten wird verwendet, um die Lautst?rke des Audios zu steuern. Sie k?nnen einen GainNode mit der Methode createGain () des Audiocontext erstellen. Sobald Sie erstellt haben, k?nnen Sie die Verst?rkung (Lautst?rke) anpassen, indem Sie den Wert des Verst?rkungsattributs festlegen. . Dieser Knoten erzeugt eine periodische Wellenform. Sie k?nnen einen Oszillatornode mit der Methode createSoScillator () des Audiocontext erstellen. Sobald Sie erstellt haben, k?nnen Sie den Wellenformtyp auf die Erzeugung (Sinne, Quadrat, S?gezahn oder Dreieck) und die Frequenz festlegen. Sie k?nnen Audioeffekte mithilfe der Biquadfilternode anwenden. Dieser Knoten stellt einen Filter der zweiten Ordnung dar, mit dem verschiedene Effekte wie die Tonkontrolle erzeugt werden k?nnen. Sie k?nnen eine BiquadFilternode mit der Methode createBiquadFilter () des Audiocontext erstellen. Sobald Sie erstellt haben, k?nnen Sie den Filtertyp (Tiefpass, Hochpass, Bandpass usw.) und die Frequenz, Q und Verst?rkung festlegen.

Sie k?nnen mit der AudioBuffersourcenode Sound -Samples abspielen. Dieser Knoten wird verwendet, um Audiodaten direkt von einem AudioBuffer abzuspielen. Sie k?nnen eine AudioBuffersourcenode mit der Methode createBufferSource () des Audiocontext erstellen. Nach dem Erstellen k?nnen Sie den Puffer auf die Audiodaten einstellen, die Sie abspielen m?chten, und dann die Wiedergabe mit der Start () -Methode starten.

Sie k?nnen Audioknoten mit der Methode Connect () miteinander verbinden. Diese Methode wird verwendet, um ein Audio -Routing -Diagramm zu bilden. Sie k?nnen einen Knoten an einen anderen oder einen Knoten an mehrere Knoten anschlie?en. Die Audiodaten flie?en vom Quellknoten zu den Zielknoten (en). Attribute, die von den Audioknoten bereitgestellt werden. Sie k?nnen beispielsweise die Frequenz eines Oszillatornode ?ndern, die Verst?rkung eines Gainnode einstellen oder einen Filter auf eine BiquadFilternode anwenden. Sie k?nnen auch die Analyseernode verwenden, um Echtzeitfrequenz- und Zeit-Dom?nen-Daten zu erfassen. 'Für Ihr Audioprojekt. Es wird verwendet, um die Audioknoten zu erstellen, das Audio -Routing -Diagramm zu verwalten und die Wiedergabe zu steuern. Sie k?nnen eine Instanz des Audiocontext beim Laden von Seite erstellen und dann diese Instanz verwenden, um die Audioknoten zu erstellen und zu manipulieren.

Was ist die Browserkompatibilit?t der Web -Audio -API? In allen Browsern werden jedoch nicht alle Funktionen vollst?ndig unterstützt. Es wird empfohlen, den spezifischen Feature -Support zu überprüfen, bevor Sie sie in Ihrer Webanwendung verwenden.

Das obige ist der detaillierte Inhalt vonDynamischer Sound mit der Web -Audio -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!