Wie kann man Audio abspielen?

Question

Ich mache ein Spiel mit HTML5 und JavaScript.

Wie kann ich den Ton eines Spiels über JavaScript abspielen?

Answer 1

Hinzufügen eines versteckten <audio> Element und spielen es wie gezeigt ab.

function playSound(url) {
  var ourAudio = document.createElement('audio'); // Create a audio element using the DOM
  ourAudio.style.display = "none"; // Hide the audio element
  ourAudio.src = url; // Set resource to our URL
  ourAudio.autoplay = true; // Automatically play sound
  ourAudio.onended = function() {
    this.remove(); // Remove when played.
  };
  document.body.appendChild(ourAudio);
}

Answer 2

Wenn Sie den folgenden Fehler erhalten:

Ungefangene (in promise) DOMException: play() ist fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument interagiert hat.

Das bedeutet, dass der Benutzer zuerst mit der Website interagieren muss (wie in der Fehlermeldung angegeben). In diesem Fall müssen Sie click oder einfach einen anderen Ereignislistener, damit der Benutzer mit Ihrer Website interagieren kann.

Wenn Sie das Audio automatisch laden wollen und nicht wollen, dass der Benutzer zuerst mit dem Dokument interagiert, können Sie setTimeout .

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)

<audio id="mySound" src="sound.mp3"></audio>

Der Ton beginnt nach 0,5 Sekunden.

Answer 3

new Audio('./file.mp3').play()

Answer 4

Mit den Sicherheitsanforderungen, dass ein Benutzer mit einer Webseite interagieren muss, um Audio zuzulassen, mache ich es so, nachdem ich viele Artikel gelesen habe, auch auf dieser Website

1. Definieren Sie die erforderlichen Audiodateien in Ihrem html
2. Eine Schaltfläche zum Starten des Spiels mit einem Mausklick
3. Wenn die Schaltfläche angeklickt wird, werden ALLE Audiodateien außer derjenigen, die Sie am Anfang abspielen möchten, abgespielt und angehalten.

Da alle Audiodateien mit demselben OnClick "abgespielt" wurden, können Sie sie nun jederzeit im Spiel ohne Einschränkungen abspielen

Beachten Sie, dass Sie für eine optimale Kompatibilität keine wav-Dateien verwenden sollten, da MS diese nicht unterstützt.

Verwenden Sie mp3 und ogg, das deckt alle Geräte ab

Beispiel:

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

bei Bedarf für alle Audios im Spiel wiederholen

Dann:

document.getElementById("welcome").play();
document.getElementById("welcome").pause();

Wiederholen Sie den Vorgang nach Bedarf, aber halten Sie nicht den Ton an, den Sie beim Start des Spiels hören wollen.

Answer 5

Die Lösung ist recht einfach, wenn Sie ein HTML-Tag wie das folgende verwenden:

<audio id="myAudio" src="some_audio.mp3"></audio>

Verwenden Sie einfach JavaScript, um es abzuspielen, etwa so:

document.getElementById('myAudio').play();