Dynamischer Sound mit der Web -Audio -API

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!