Audio ist ein wichtiger Teil eines jeden Spiels, da es einen erheblichen Einfluss auf die Gaming-Atmosphäre ausübt. Web-basiertes Audio reift schnell, aber es gibt immer noch viele Browserunterschiede, die es zu überwinden gilt. Wir müssen uns oft entscheiden, welche Audioteile für das Erlebnis unserer Spiele wichtig sind und welche Teile eher im Bereich Nice-to-Have eingeordnet werden können. In dem folgenden Artikel bieten wir Ihnen einen detaillierte Anleitung zur Implementierung von Audio für Webspiele. Zudem werden wir Ihnen aufzeigen, was derzeit auf so vielen verschiedenen Plattformen alles so möglich ist.
Einschränkungen für Mobile Audio.
Die bei weitem schwierigsten Plattformen für die Unterstützung von Web-Audio sind mobile Plattformen. Leider sind dies auch die Plattformen, die die Leute oft benutzen, um Spiele zu spielen. Es gibt ein paar Unterschiede zwischen Browser für Desktop und Mobile, die dazu geführt haben können, dass Browser-Anbieter Entscheidungen treffen, die Web-Audio für Gamedeveloper schwierig machen können.
Autoplay.
Die Richtlinie der automatischen Browser-Wiedergabe betrifft nun Browser für Desktop und Mobile gleichermaßen.
Es ist erwähnenswert, dass Autoplay mit Sound erlaubt ist, wenn:
Einige Browser ignorieren einfach alle Anfragen Ihres Spiels, automatisch Audio abzuspielen. Stattdessen muss die Wiedergabe für Audio durch ein vom Benutzer iniiertes Ereignis, wie z.B. einen Klick oder Tippen, gestartet werden. Das bedeutet, dass Sie Ihre Audiowiedergabe strukturieren müssen, um dies zu berücksichtigen. Dies wird in der Regel dadurch gemildert, dass das Audio im Voraus geladen und bei einem vom Benutzer initiierten Ereignis vorbereitet wird.
Für eine passivere Audiowiedergabe, z.B. Hintergrundmusik, die startet, sobald ein Spiel geladen wird, besteht ein Trick darin, jedes vom Benutzer initiierte Ereignis zu erkennen und die Wiedergabe zu starten. Für andere aktivere Sounds, die während des Spiels verwendet werden sollen, könnten wir überlegen, die zu aktivieren, sobald so etwas wie eine Starttaste gedrückt wird.
Um eine solche Grundversorgung zu erreichen, möchten wir einen Teil davon spielen. Aus diesem Grund ist es sinnvoll, am Ende Ihres Hörbeispiels eine Schweigeminute einzufügen. Das Springen, das Abspielen und anschließend das Anhalten dieser Stille bedeutet, dass wir nun JavaScript verwenden können, um diese Datei an beliebigen Stellen wiederzugeben.
Hinweis: Das Abspielen eines Teils Ihrer Datei bei einer Lautstärke von 0 könnte auch funktionieren, wenn Sie im Browser die Lautstärke ändern können. Beachten Sie auch, dass die Wiedergabe und sofortige Pause Ihres Audios nicht garantiert, dass ein kleines Stück Audio nicht abgespielt wird.
Hinweis: Das Hinzufügen einer Web-App zum Homescreen Ihres Mobiltelefons kann die Funktionen verändern. Im Falle der automatischen Wiedergabe unter iOS scheint dies derzeit der Fall zu sein. Wenn möglich, sollten Sie Ihren Code auf mehreren Geräten und Plattformen ausprobieren, um zu sehen, wie dieser funktioniert.
Lautstärke.
Die programmierte Lautstärkeregelung kann in mobilen Browsern deaktiviert werden. Der häufig genannte Grund ist, dass der Benutzer die Kontrolle über die Lautstärke auf Betriebssystemebene haben und diese nicht überschrieben werden sollte.
Buffering und Preloading.
Wahrscheinlich als Versuch, die Datenverwendung im Mobilfunknetz zu verringern, stellen wir auch oft fest, dass das Buffering deaktiviert ist, bevor die Wiedergabe gestartet wurde. Unter Buffering versteht man den Prozess, bei dem der Browser die Medien im Voraus herunterlädt, was wir oft tun müssen, um eine reibungslose Wiedergabe zu gewährleisten.
Die HTMLMediaElement-Oberfläche verfügt über viele Eigenschaften, um festzustellen, ob sich ein Track in einem Zustand befindet, der abspielbar ist.
Hinweis: In vielerlei Hinsicht ist das Konzept des Bufferings veraltet. Solange Byte-Bereichsanforderungen akzeptiert werden (was Standard ist), sollten wir zu einem bestimmten Punkt im Audio springen können, ohne den vorhergehenden Inhalt herunterladen zu müssen. Das Preloading ist jedoch immer noch sinnvoll – ohne es müsste immer eine gewisse Client-Server-Kommunikation erfolgen, bevor das Spiel beginnen kann.
Gleichzeitige Audiowiedergabe.
Eine Anforderung vieler Spiele ist die Notwendigkeit, mehr als ein Stück Audio gleichzeitig zu spielen. Zum Beispiel kann es sein, dass Hintergrundmusik zusammen mit Soundeffekten für verschiedene Dinge im Spiel gespielt wird. Obwohl sich die Situation mit der Einführung der Web Audio API bald verbessern wird, führt die derzeit am weitesten verbreitete Methode.
Mobile Workarounds.
Obwohl mobile Browser Probleme bereiten können, gibt es Möglichkeiten, die oben beschriebenen Probleme zu umgehen.
Audio-Sprites.
Audio-Sprites verdanken Ihre Bezeichnung CSS-Sprites, einer visuellen Technik zur Verwendung von CSS mit einer einzigen Grafikressource, um es in eine Reihe von Sprites zu zerlegen. Wir können das gleiche Prinzip auf Audio anwenden, so dass wir nicht eine Reihe von kleinen Audiodateien haben, die Zeit zum Laden und Abspielen benötigen, sondern eine größere Audiodatei mit allen kleineren Audioausschnitten, die wir benötigen. Um einen bestimmten Sound aus der Datei abzuspielen, verwenden wir einfach die bekannten Start- und Stoppzeiten für jedes Audio-Sprite.
Der Vorteil ist, dass wir ein Stück Audio grundieren können und unsere Sprites somit einsatzbereit sind. Dazu können wir einfach das größere Stück Audio abspielen und sofort anhalten. Außerdem reduzieren Sie die Anzahl der Serveranfragen und sparen Bandbreite.
Sie müssen die aktuelle Zeit gemessen haben, um zu wissen, wann Sie aufhören müssen. Wenn Sie Ihre individuellen Sounds um mindestens 500 ms voneinander trennen, dann sollte die Verwendung des timeUpdate Events (das alle 250 ms ausgelöst wird) ausreichen. Ihre Dateien können etwas länger sein, als sie unbedingt sein müssen, aber Silence komprimiert gut.
Hier ist ein Beispiel für einen Audio Sprite Player – lassen Sie uns zunächst die Benutzeroberfläche in HTML einrichten:
Jetzt haben wir Buttons mit Start- und Stoppzeiten in Sekunden. Die MP3 Datei „countdown.mp3“ besteht aus einer Zahl, die alle 2 Sekunden gesprochen wird, mit der Idee, dass wir diese Zahl wiedergeben, wenn die entsprechende Taste gedrückt wird.
Lassen Sie uns etwas JavaScript hinzufügen, damit das funktioniert.
Hintergrundmusik.
Musik in Spielen kann eine starke emotionale Wirkung haben. Sie können verschiedene Musikproben mischen und abgleichen. Zudem können Sie verschiedene Musikstücke überblenden, vorausgesetzt Sie können die Lautstärke Ihres Audioelements steuern. Mit der playbackRate() Methode können Sie sogar die Geschwindigkeit Ihrer Musik anpassen, ohne die Tonhöhe zu beeinflussen, um sie besser mit der Aktion zu synchronisieren.
Hinweis: iOS Safari unterstützt jetzt die Web Audio API, was bedeutet, dass es nun möglich ist, webbasierte Spiele mit nativem Audio für iOS zu schreiben.
Da die Web Audio API ein präzises Timing und eine präzise Steuerung der Audiowiedergabe ermöglicht, können wir damit Samples zu bestimmten Zeitpunkten abspielen, was ein entscheidender immersiver Aspekt des Gaming ist. Sie möchten, dass diese Explosionen von einem donnernden Boom begleitet werden, dem schließlich doch keins folgt.
Hintergrundmusik mit der Web Audio API.
Eine Möglichkeit, Ihren Musik-Soundtrack dynamischer zu gestalten, besteht darin, diesen in Komponentenschleifen oder Tracks aufzuteilen. Dies erfolgt häufig in der Art und Weise, wie Musik komponiert wird und die Web Audio API ist sehr gut darin, diese Teile synchron zu halten. Sobald Sie die verschiedenen Spuren haben, aus denen sich Ihr Stück zusammensetzt, können Sie die Tracks nach Bedarf ein- und ausblenden.
Sie können auch Filter oder Effekte auf Musik anwenden. Ist Ihr Charakter in einer Höhle? Erhöhen Sie das Echo. Vielleicht haben Sie Unterwasserszenen, in denen Sie einen Filter anwenden können, der den Sound dämpft.
Betrachten wir einige Web Audio API-Techniken zur dynamischen Anpassung der Musik von den Basis Tracks.
Ihre Tracks laden.
Mit der Web Audio API können Sie einzelne Tracks und Loops über XMLHttpRequest oder die Fetch API einzeln laden, d.h. Sie können sie synchron oder parallel laden. Das synchrone Laden kann bedeuten, dass Teile Ihrer Musik früher fertig sind und Sie sie abspielen können, während andere laden.
So oder so können Sie Tracks oder Loops synchronisieren. Die Web Audio API enthält den Begriff einer internen Uhr, die zu ticken beginnt, sobald Sie einen Audiokontext erstellen. Sie müssen die Zeit zwischen dem Erstellen eines Audiokontextes und dem Beginn der Wiedergabe des ersten Audio-Tracks berücksichtigen. Die Aufnahme dieses Offsets und die Abfrage der aktuellen Zeit des Audio-Tracks liefert Ihnen genügend Informationen, um einzelne Audioelemente zu synchronisieren.
Um dies in Aktion zu sehen, legen wir ein paar separate Tracks an:
Alle diese Tracks haben das gleiche Tempo und sind so konzipiert, dass sie miteinander synchronisiert werden können, also müssen wir sicherstellen, dass sie geladen und für die API verfügbar sind, bevor wir sie abspielen können. Wir können dies mit der Async/Anwalt-Funktion von JavaScript realisieren.
Sobald sie zum Abspielen verfügbar sind, müssen wir sicherstellen, dass sie an der richtigen Stelle beginnen, an der andere Tracks abspielen könnten, damit sie sich synchronisieren.
Lassen Sie uns unseren Audiokontext erstellen:
Wählen wir nun alle
Wir wollen sicherstellen, dass jede Datei geladen und in einen Puffer dekodiert wurde, bevor wir sie verwenden, also lassen Sie uns eine Asynchronisierungsfunktion erstellen, die es uns ermöglicht, Folgendes zu realisieren.
Wir können anschließend den Await-Operator beim Aufruf dieser Funktion verwenden, der sicherstellt, dass wir nach der Ausführung des Codes einen nachfolgenden Code ausführen können.
Lassen Sie uns eine weitere Asynchronisationsfunktion erstellen, um das Sample einzurichten – wir können die beiden Asynchronisationsfunktionen in einem schönen Versprechungsmuster kombinieren, um weitere Aktionen durchzuführen, wenn jede Datei geladen und gebuffert wird:
Lassen Sie uns auch eine playTrack() Funktion erstellen, die wir aufrufen können, sobald eine Datei geholt wurde. Wir benötigen hier einen Offset, also, wenn wir eine Datei gestartet haben, haben wir eine Aufzeichnung, wie weit wir gekommen sind, um eine andere Datei zu starten.
Start() nimmt zwei optionale Parameter an. Das erste ist, wann die Wiedergabe beginnen soll und das zweite ist, wo und was unser Offset ist.
Abschließend schieben wir eine Schleife über unsere
Im Kontext Ihrer Spielwelt können Sie Loops und Samples haben, die unter verschiedenen Umständen gespielt werden, uns es kann nützlich sein, sich mit anderen Tracks synchronisieren zu können, um ein nahtloses Erlebnis zu ermöglichen.
Sie werden vielleicht feststellen, dass die Einführung eines neuen Tracks natürlicher klingt, wenn er auf den Beat/Bar/Phrase oder die Einheiten trifft, in die Sie Ihre Hintergrundmusik einteilen möchten.
Um dies vor der Wiedergabe des zu synchronisierenden Tracks zu tun, sollten Sie berechnen, wie lange es bis zum Beginn des nächsten Beat/Bar etc. dauert.
Hier ist ein wenig Code, der bei vorgegebenem Tempo (die Zeit in Sekunden Ihres Beat/Bar) berechnet, wie lange Sie warten müssen, bis Sie den nächsten Part spielen – Sie speisen den resultierenden Wert der start()-Funktion mit dem ersten Parameter zu, der die absolute Zeit benötigt, wann diese Wiedergabe beginnen soll. Beachten Sie, dass der zweite Parameter (von dem aus Sie mit der Wiedergabe im neuen Track beginnen können) relativ ist:
Positional Audio.
Positional Audio kann eine wichtige Technik sein, um Audio zu einem wichtigen Bestandteil eines immersiven Spielerlebnisses zu machen. Die Web Audio API ermöglicht es uns nicht nur, eine Reihe von Audioquellen im dreidimensionalen Raum zu positionieren, sondern auch, Filter anzuwenden, die das Audio realistischer erscheinen lassen.
Der pannerNode nutzt die Positionierungsmöglichkeiten der Web Audio API, damit wir dem Spieler weitere Informationen über die Spielwelt vermitteln können.
Wir können uns gut verstehen:
Dies ist besonders nützlich in einer dreidimensionalen Umgebung, die mit WebGL gerendert wird, wo die Web Audio API es ermöglicht, Audio mit den Objekten und Standpunkten zu verknüpfen.
Vielen Dank für Ihren Besuch.