Share
In diesem Lernprogramm werden die grundlegenden Elemente von Web-Audio, die zum Erstellen von 3D-Klanglandschaften für interaktive interaktive Anwendungen einschließlich 3D-Spielen verwendet werden, näher beleuchtet.
Die Web-Audio-API und die verwendete Terminologie können manchmal verwirrend sein. In diesem Lernprogramm wird jedoch die Komplexität aufgehoben und eine einfachere Erklärung der Web-Audio-Elemente und ihrer Zusammenhänge zur Bildung einer 3D-Klanglandschaft bereitgestellt.
Diese Demonstration enthält drei Sounds, die sich um a drehen Hörer, Die Richtung des Hörers wird durch den Pfeil angezeigt. Wenn Sie sich vorstellen, auf eine Spielfigur (den Zuhörer) zu blicken, könnten die sich drehenden Töne leicht Freunde oder Feinde darstellen, die die Figur umkreisen.
Der Demo-Quellcode und die Ressourcen sind diesem Tutorial beigefügt.
Das AudioContext Das Interface ist das Herz und die Seele von Web Audio. Es bietet die Funktionen, die zum Erstellen verschiedener Web Audio-Elemente erforderlich sind, und bietet die Möglichkeit, das gesamte Audio an Hardware und weiter zu den Lautsprechern oder Kopfhörern einer anderen Person zu senden.
var audioContext = null if (window.AudioContext! == undefined) audioContext = new AudioContext ()
Es ist wichtig sicherzustellen, dass die AudioContext Die Benutzeroberfläche ist verfügbar, da Web Audio noch relativ neu ist und in einigen Webbrowsern möglicherweise nicht verfügbar ist.
Neben der Bereitstellung der Funktionen, die zum Erstellen verschiedener Web-Audio-Elemente erforderlich sind, können Sie die AudioContext Schnittstelle hat zwei wichtige Eigenschaften; Ziel und Hörer die beide schreibgeschützt sind. Das Ziel Diese Eigenschaft kann als Verbindung zur Audiohardware betrachtet werden. Dort wird schließlich das generierte Audio enden. Das Hörer Eigenschaft (wir werden sehen, wie dies später genauer beschrieben wird) Ding das heißt, das gesamte Audio zu hören, z. eine Figur oder genauer eine Kamera in einem Spiel.
Das AudioBuffer und AudioBufferSourceNode Schnittstellen ermöglichen uns die Wiedergabe von Audio. AudioBuffer Objekte enthalten das rohe Audio (Klangbeispiele), das auf dem Weg durch Web-Audio vor dem Erreichen von Lautsprechern oder Kopfhörern eines Benutzers verändert, gestaucht und zerquetscht wird. AudioBufferSourceNode Objekte werden zum Starten und Stoppen des darin enthaltenen Audios verwendet AudioBuffer Objekte.
Die Standardmethode zum Laden von Audio in eine AudioBuffer Objekt ist die Verwendung eines XMLHttpRequest Objekt mit seiner responseType einstellen Arraypuffer. Wenn die Audiodatei geladen wurde, wird der Array-Puffer an den gesendet AudioContext Objekt für die Dekodierung und falls die Dekodierung erfolgreich ist, erhalten Sie ein AudioBuffer Objekt.
Accentsconagua
var loader = new XMLHttpRequest () loader.open ("GET", "massive-explosion.ogg") loader.responseType = "arraybuffer" loader.onload = whenLoaded loader.send () - Funktion whenLoaded (event) var data = loader .response if (data === null) // Beim Laden der Datei ist ein Problem aufgetreten. return // Dekodiere die Daten. audioContext.decodeAudioData (data, whenDecoded) Funktion, wennDecoded (audioBuffer) // "audioBuffer" ein AudioBuffer-Objekt ist. Das decodeAudioData () Funktion hat auch einen dritten Parameter, der einen zweiten Rückruf akzeptiert. Dieser Rückruf wird aufgerufen, wenn die geladene Audiodatei nicht dekodiert werden kann.
decodeAudioData (Daten, wennDecodiert, wennFailed)
Nicht alle Webbrowser unterstützen dieselben Audioformate. Eine gute Tabelle der unterstützten Formate finden Sie hier. Daher möchten Sie möglicherweise den zweiten Rückruf verwenden, um bei Bedarf auf ein alternatives Audioformat zurückzugreifen. Beispielsweise unterstützt der Internet Explorer OGG Vorbis nicht, aber MP3. Das einzige wirkliche Problem bei MP3 ist, dass es nicht wie bei OGG Vorbis nahtlos geschlungenes Audio erlaubt.
Wenn du einen hast AudioBuffer Objekt verfügbar Sie können es mit einem spielen AudioBufferSourceNode Objekt.
var source = audioContext.createBufferSource () // Hängt ein AudioBuffer-Objekt an. source.buffer = audioBuffer // Verbinden Sie das "source" -Objekt mit dem "destination" -Objekt. source.connect (audioContext.destination) // Optional können Sie "source" anweisen, das Audio kontinuierlich zu wiederholen. source.loop = false // Startet das Audio. source.start ()
Es ist wichtig sich daran zu erinnern AudioBufferSourceNode Objekte sind Single - Shot - Audioplayer, dh Sie können nur den Start() einmal funktionieren. Sie müssen ein erstellen AudioBufferSourceNode Objekt und verbinden es (direkt oder indirekt) mit dem Ziel Objekt ausgesetzt durch AudioContext Objekt, wann immer Sie Audio von einem abspielen möchten AudioBuffer Objekt.
Sie können das Leben ein wenig einfacher machen, indem Sie eine kleine Dienstprogrammfunktion erstellen, die eine erstellt, verbindet und startet AudioBufferSourceNode Objekt für Sie.
Funktion play (audioBuffer, audioContext) var source = audioContext.createSourceBuffer () source.buffer = audioBuffer source.connect (audioContext.destination) source.start () play (audioBuffer01, audioContext) wiedergeben (audioBuffer02, audioContext) play (audioBuffer03) , audioContext)
Wenn ein AudioBufferSourceCode Objekt wird abgespielt, und wenn Sie nirgendwo Referenzen auf das Objekt haben (z. B. wenn Sie sie nicht in einem Array gespeichert haben), trennt Web Audio das Objekt automatisch für Sie. Dies ist äußerst praktisch, wenn Sie nur kurze Soundeffekte usw. Abfeuern müssen.
Wenn Sie sich entscheiden, das Audio zu wiederholen, verwenden Sie die AudioBufferSourceNode Schleife Eigenschaft, müssen Sie einen Verweis auf die AudioBufferSourceNode Objekt irgendwo, so dass Sie können halt() die Audiowiedergabe.
source.stop ()
Zu diesem Zeitpunkt verwenden wir Puffer zum Abspielen von Audiodaten, aber das Audiosignal wird direkt abgespielt, ohne dass es zu einem Verschieben oder einer räumlichen Anordnung kommt. Das ist wo PannerNode Gegenstände kommen ins Spiel.
PannerNode Mit Objekten können wir Audio im 3D-Raum innerhalb eines kartesischen Koordinatensystems positionieren. Hier passiert die meiste 3D-Magie.
EIN PannerNode object verfügt über eine Reihe von Eigenschaften, die es uns ermöglichen, das Verhalten des Audiomaterials genau abzustimmen, aber für dieses Tutorial interessieren wir uns nur für zwei von ihnen. maximale Entfernung und panningModel. Das maximale Entfernung Eigenschaft ist die Entfernung vom Hörer An diesem Punkt ist die Lautstärke gleich Null. Dies ist ein beliebiger Wert und hat nur Bedeutung in Ihrer Anwendung, der Standardwert ist jedoch 10000. Der panningModel Weist Web Audio an, wie das Audiosignal verarbeitet werden soll PannerNode Objekt. Für 3D-Soundscapes möchten Sie wahrscheinlich den Wert auf einstellen HRTF (kopfbezogene Übertragungsfunktion).
Position eines festlegen AudioBufferSourceNode wir nehmen das Position setzen() Funktion von a ausgesetzt PannerNode Objekt.
var panner = audioContext.createPanner () panner.panningModel = "HRTF" // Legt die 3D-Position (x, y, z) fest. panner.setPosition (1, 2, 3) // Verbinden Sie das "source" -Objekt mit dem "panner" -Objekt. source.connect (panner) // Verbinden Sie das Objekt "Panner" mit dem Objekt "Ziel". panner.connect (audioContext.destination) // Starten Sie das Audio. source.start ()
Um die Dinge ein wenig klarer zu machen, aktualisieren wir die zuvor erstellte Utility-Funktion.
Funktion play (audioBuffer, x, y, z, audioContext) var source = audioContext.createSourceBuffer () source.buffer = audioBuffer var panner = audioContext.createPanner () panner.panningModel = "HRTF" panner.setPosition (x, y, z) source.connect (panner) panner.connect (audioContext.destination) source.start () abspielen (audioBuffer01, 1, 2, 3, audioContext) abspielen (audioBuffer02, 4, 5, 6, audioContext) abspielen (audioBuffer03, 7, 8, 9, audioContext)
An diesem Punkt spielen wir Audio und positionieren es im 3D-Raum, aber es gibt noch ein wichtigeres Element, das wir betrachten müssen. der Audio-Listener.
Jeden AudioContext Objekt macht ein Hörer Objekt, das die Position und Ausrichtung des Objekts darstellt Ding Das ist das Hören von Audio. Normalerweise die Ding wäre eine virtuelle Kamera, die am Kopf eines Spielcharakters befestigt ist, an der Stoßstange eines Autos, am Heck eines Flugzeugs oder an etwas, das aus seiner Perspektive für den Betrachter sinnvoll ist.
Das Hörer Objekt hat eine Position setzen() Funktion und a setOrientation () Funktion. Das Position setzen() Funktion platziert den Listener irgendwo im 3D-Raum und die setOrientation () dreht den Hörer (stellen Sie sich eine Kamera zum Schwenken und Neigen vor).
Das Position setzen() Funktion funktioniert genauso wie die PannerNode Position setzen() Funktion und akzeptiert drei Koordinaten.
audioContext.listener.setPosition (x, y, z)
Das setOrientation () Die Funktion ist etwas komplexer und akzeptiert zwei Einheitsvektoren. Der erste Vektor steht für die Drehung des Hörers (die Richtung, in die die Kamera zeigt) und der zweite Vektor für den Hörer oben Richtung (zeigt von der Oberseite der Kamera).
audioContext.listener.setOrientation (x1, y1, z1, x2, y2, z2)
Wenn Sie den Listener nur um eine Achse drehen müssen, sind die Vektorberechnungen relativ einfach. Wenn Sie beispielsweise dasselbe Koordinatensystem verwenden, das WebGL verwendet, wird dies positiv x zeigt rechts vom Bildschirm, positiv y zeigt zum oberen Rand des Bildschirms und positiv z zeigt aus dem Bildschirm heraus, dann können Sie den Listener um den Bildschirm herum drehen y Achse (Kamera schwenken) mit einer cos () Funktionsaufruf und eine Sünde() Funktionsaufruf.
// Die Position des Hörers (kann alles sein). var x = 50 var y = 100 var z = 0 audioContext.listener.setPosition (x, y, z) // Berechnet den Rotationsvektor. // rad = Drehung, im Bogenmaß var rad = 0,10 var v1 = Math.cos (rad) // x var v2 = 0 // y var v3 = Math.sin (rad) // z // Der Vektor "up" var v4 = 0 // x var v5 = 1 // y var v6 = 0 // z audioContext.listener.setOrientation (v1, v2, v3, v4, v5, v6)
Die Demonstration für dieses Tutorial (Quellcode ist beigefügt) führt eine ähnliche Aktion aus und dreht die PannerNode Objekte um eine einzelne Achse.
In diesem Tutorial haben wir uns mit den grundlegenden Elementen von Web Audio beschäftigt, die zum Erstellen von 3D-Klanglandschaften für interaktive interaktive Anwendungen einschließlich 3D-Spielen verwendet werden. Wir hoffen, dass dieses Tutorial für Sie von Nutzen war und genug Informationen für Sie bereitstellt, um zu verstehen, wie Audiopuffer, Panner und Hörer zusammenarbeiten, um 3D-Klanglandschaften zu erzeugen.
Wenn Sie Feedback oder Fragen haben, können Sie untenstehend einen Kommentar posten.
Im nächsten Tutorial, Web Audio und 3D-Soundscapes: Implementation, werden wir alles (und mehr) in eine vereinfachte API packen. Der Schwerpunkt des nächsten Tutorials liegt auf 3D-Spielen, aber die API ist generisch genug für verschiedene interaktive interaktive Anwendungen.
