Ich mache ein Spiel mit HTML5 und Javascript.
Wie kann ich Spiel-Audio über Javascript abspielen?
javascript
html
html5-audio
Ryan S.
quelle
quelle
<audio>
. Dieses Element hat geeignete JS-Hooks für 'Abspielen', 'Pause' usw.Antworten:
Wenn Sie sich nicht mit HTML-Elementen anlegen möchten:
Code-Snippet anzeigen
Dies verwendet die
HTMLAudioElement
Schnittstelle, die Audio auf die gleiche Weise wie das<audio>
Element wiedergibt .Wenn Sie mehr Funktionen benötigen, habe ich die Bibliothek howler.js verwendet und fand sie einfach und nützlich.
Code-Snippet anzeigen
quelle
<audio>
. Wikipedia hat eine Kompatibilitätstabelle für Audioformate .new Audio()
kann WAV-Dateien in allen Browsern außer Internet Explorer abspielen.Es ist einfach, holen Sie sich einfach Ihr
audio
Element und rufen Sie dieplay()
Methode auf:Schauen Sie sich dieses Beispiel an: http://www.storiesinflight.com/html5/audio.html
Diese Seite deckt einige der anderen kühlen Dinge , die Sie wie tun können
load()
,pause()
und einige andere Eigenschaften desaudio
Elements.quelle
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 bietet eine benutzerfreundliche API, mit der Sound in jedem modernen Browser, einschließlich IE 6+, abgespielt werden kann. Wenn der Browser HTML5 nicht unterstützt, erhält er Hilfe von Flash. Wenn Sie streng HTML5 und keinen Flash wollen, gibt es eine Einstellung dafür,
preferFlash=false
Es unterstützt 100% Flash-freies Audio auf iPad, iPhone (iOS4) und anderen HTML5-fähigen Geräten + Browsern
Die Verwendung ist so einfach wie:
Hier ist eine Demo in Aktion: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
quelle
Dies ist eine ziemlich alte Frage, aber ich möchte einige nützliche Informationen hinzufügen. Der Themenstarter hat erwähnt, dass er ist
"making a game"
. Für alle, die Audio für die Spieleentwicklung benötigen, gibt es eine bessere Wahl als nur ein<audio>
Tag oder einHTMLAudioElement
. Ich denke, Sie sollten die Verwendung der Web-Audio-API in Betracht ziehen :quelle
Einfach mit Jquery
// Audio-Tags ohne Vorladung setzen
// füge jquery zum Laden hinzu
// Schreibmethoden zum Spielen und Stoppen
// Entscheide, wie Audio gesteuert werden soll
BEARBEITEN
Um die Frage von @ stomy zu beantworten, gehen Sie wie folgt vor, um eine Wiedergabeliste abzuspielen :
Setze deine Songs in ein Objekt:
Verwenden Sie die Trigger- und Wiedergabefunktionen wie zuvor:
Laden Sie das erste Lied dynamisch:
Setzen Sie die Audioquelle auf das nächste Lied in der Wiedergabeliste zurück, wenn das aktuelle Lied endet:
Sehen Sie hier für ein Beispiel dieses Codes in Aktion.
quelle
ended
zu sendende Ereignis warten und die nächste Audiodatei in der Liste starten (vermutlich behalten Sie den Überblick entweder im DOM, im JS-Speicher usw. ). developer.mozilla.org/en-US/docs/Web/Events/endedFügen Sie ein verstecktes Audio hinzu und spielen Sie es ab.
quelle
Wenn Sie den folgenden Fehler erhalten:
Das bedeutet, dass der Benutzer zuerst mit der Website interagieren muss (wie in der Fehlermeldung angegeben). In diesem Fall müssen Sie einen
click
oder nur einen anderen Ereignis-Listener verwenden, damit der Benutzer mit Ihrer Website interagieren kann.Wenn Sie das Audio automatisch laden möchten und nicht möchten, dass der Benutzer zuerst mit dem Dokument interagiert, können Sie es verwenden
setTimeout
.Der Ton startet nach 0,5 Sekunden.
quelle
quelle
quelle
Ziemlich einfache Lösung, wenn Sie ein HTML-Tag wie das folgende haben:
Verwenden Sie einfach JavaScript, um es abzuspielen:
quelle
Ich hatte einige Probleme im Zusammenhang mit der Rückgabe von Audio-Versprechungsobjekten und einige Probleme im Zusammenhang mit der Benutzerinteraktion mit Sounds, die ich am Ende mit diesem kleinen Objekt verwende.
Ich würde empfehlen, die Wiedergabetöne so zu implementieren, dass sie dem Interaktionsereignis, das der Benutzer verwendet, am nächsten kommen.
Und implementieren Sie es wie folgt:
quelle
Ich habe diese Methode verwendet, um einen Sound abzuspielen ...
quelle
Wenn Sie Ihr Audio beim Öffnen der Seite wiedergeben möchten, gehen Sie wie folgt vor.
und rufe dieses playMusic () auf, wann immer du es in deinem Spielcode brauchst.
quelle
Mit den Sicherheitsanforderungen, dass ein Benutzer mit einer Webseite interagieren muss, damit Audio zugelassen wird, gehe ich so vor, basierend auf dem Lesen vieler Artikel, einschließlich auf dieser Website
Da alle Audiodateien mit demselben OnClick "abgespielt" wurden, können Sie sie jetzt jederzeit ohne Einschränkungen im Spiel abspielen
Beachten Sie, dass für eine optimale Kompatibilität keine WAV-Dateien verwendet werden und von MS nicht unterstützt werden
Verwenden Sie mp3 und ogg, das alle Geräte abdeckt
Beispiel:
Wiederholen Sie diesen Vorgang nach Bedarf für alle Audiodaten im Spiel
Dann:
Wiederholen Sie den Vorgang nach Bedarf, es sei denn, Sie möchten das Audio, das Sie hören möchten, nicht anhalten, wenn das Spiel beginnt
quelle
Sie können die Web-Audio-API zum Abspielen von Sounds verwenden. Es gibt einige Audiobibliotheken wie howler.js, soundjs usw. Wenn Sie sich keine Sorgen um alte Browser machen, können Sie auch auf http://musquitojs.com/ nachsehen . Es bietet eine einfache API zum Erstellen und Abspielen von Sounds.
Um beispielsweise einen Sound abzuspielen, müssen Sie nur noch etwas tun.
Die Bibliothek unterstützt auch Audio Sprites.
quelle
Dies ist ein JS, das ich mir für ein Baby-KI-Projekt ausgedacht habe, mit dem ich arbeite. Ich hoffe, das kann Ihnen helfen.
quelle
Verwenden Sie einfach dies:
Oder um es einfacher zu machen:
Stichprobe:
quelle
Ich hatte einige Probleme beim Abspielen von Audio, insbesondere seit Chrome aktualisiert hat, dass der Benutzer zuerst mit dem Dokument interagieren muss.
Bei fast allen Lösungen, die ich gefunden habe, muss der JS-Code jedoch aktiv Listener (z. B. Tastenklicks) einstellen, um Benutzerereignisse zu empfangen, um das Audio abzuspielen.
In meinem Fall wollte ich nur, dass mein Spiel Hintergrundmusik spielt, sobald der Spieler damit interagiert. Deshalb habe ich mich zu einem einfachen Hörer gemacht, der ständig überprüft, ob die Webseite interagiert oder nicht.
quelle
Hier ist eine Lösung für das Jahr 2020, wenn Sie den Fehler sehen:
Seien Sie nicht schlau und denken Sie, dass dies eine alte Schule
oclick
ist. Ich werde das einfach auf der Seite in meine jQuery oder meine externe JavaScript-Datei verschieben. Nee. Es muss ein seinonclick
.quelle