Audio mit Javascript abspielen?

690

Ich mache ein Spiel mit HTML5 und Javascript.

Wie kann ich Spiel-Audio über Javascript abspielen?

Ryan S.
quelle
9
Da es HTML5 ist, gibt es <audio>. Dieses Element hat geeignete JS-Hooks für 'Abspielen', 'Pause' usw.
Marc B
1
@Marc Könnten Sie einige Informationen darüber geben, was diese Haken sind?
Ryan S.
14
Ich wette, Sie fragen sich, wo sich die Dokumentation für alle Audiomethoden befindet
Bryan Downing

Antworten:

1327

Wenn Sie sich nicht mit HTML-Elementen anlegen möchten:

var audio = new Audio('audio_file.mp3');
audio.play();

Dies verwendet die HTMLAudioElementSchnittstelle, 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.

Uri
quelle
9
Diese Methode funktioniert zum Abspielen von MP3-Dateien, jedoch nicht für WAV-Dateien. Gibt es eine Möglichkeit, WAV-Dateien abzuspielen?
user781486
12
@ user3293156 Diese Methode unterstützt dieselben Formate wie HTML5 <audio>. Wikipedia hat eine Kompatibilitätstabelle für Audioformate . new Audio()kann WAV-Dateien in allen Browsern außer Internet Explorer abspielen.
Rory O'Kane
281
@ RoryO'Kane, damit jeder außer Microsoft das Audioformat von Microsoft abspielen kann? lol
Dave Cousineau
10
Paar Vorbehalte: (1) Firefox spielt keine MP3-Dateien ab . Sie benötigen stattdessen eine Ogg-Datei. (2) Safari / iOS wird nicht abgespielt, wenn Sie den Inhalt über https bereitstellen . Sie benötigen ein gültiges Zertifikat.
Peter
9
Beachten Sie, dass Chrome ab April 2018 keine Audiodateien wiedergibt, es sei denn, der Benutzer hat mindestens einmal auf das Dokument geklickt. Siehe hier .
Nils Lindemann
181

Es ist einfach, holen Sie sich einfach Ihr audioElement und rufen Sie die play()Methode auf:

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

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 des audioElements.

Shanabus
quelle
38

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:

<script src="soundmanager2.js"></script>
<script>
    // where to find flash SWFs, if needed...
    soundManager.url = '/path/to/swf-files/';

    soundManager.onready(function() {
        soundManager.createSound({
            id: 'mySound',
            url: '/path/to/an.mp3'
        });

        // ...and play it
        soundManager.play('mySound');
    });
</script>

Hier ist eine Demo in Aktion: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

LordZardeck
quelle
3
Wenn Sie auf dieser Website einen Link angeben, geben Sie im Allgemeinen einige Informationen über den Link in Ihrem Beitrag an. Es wird davon abgeraten, einfach einen einfachen Link zu posten und "Klick darauf" zu sagen.
Ryan S.
7
Entschuldigung, ich dachte, die Seite würde sich von selbst erklären. Ich werde es dann bearbeiten
LordZardeck
32

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 ein HTMLAudioElement. Ich denke, Sie sollten die Verwendung der Web-Audio-API in Betracht ziehen :

Während für Audio im Web kein Plugin mehr erforderlich ist, bringt das Audio-Tag erhebliche Einschränkungen für die Implementierung anspruchsvoller Spiele und interaktiver Anwendungen mit sich. Die Web-Audio-API ist eine JavaScript-API auf hoher Ebene zum Verarbeiten und Synthetisieren von Audio in Webanwendungen. Das Ziel dieser API ist es, Funktionen zu integrieren, die in modernen Game-Audio-Engines zu finden sind, sowie einige der Misch-, Verarbeitungs- und Filteraufgaben, die in modernen Desktop-Audioproduktionsanwendungen zu finden sind.

Konstantin Smolyanin
quelle
22

Einfach mit Jquery

// Audio-Tags ohne Vorladung setzen

<audio class="my_audio" controls preload="none">
    <source src="audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

// füge jquery zum Laden hinzu

$(".my_audio").trigger('load');

// Schreibmethoden zum Spielen und Stoppen

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

// Entscheide, wie Audio gesteuert werden soll

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

BEARBEITEN

Um die Frage von @ stomy zu beantworten, gehen Sie wie folgt vor, um eine Wiedergabeliste abzuspielen :

Setze deine Songs in ein Objekt:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

Verwenden Sie die Trigger- und Wiedergabefunktionen wie zuvor:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

Laden Sie das erste Lied dynamisch:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

Setzen Sie die Audioquelle auf das nächste Lied in der Wiedergabeliste zurück, wenn das aktuelle Lied endet:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

Sehen Sie hier für ein Beispiel dieses Codes in Aktion.

Kybernetisch
quelle
Dies spielt alle Audio-Tags mit class = "my_audio" gleichzeitig ab. Wie spielst du nacheinander (in einer Wiedergabeliste)?
Stomy
@stomy hast du das als eigene Frage auf StackOverflow gepostet? Wenn Sie es wissen lassen. Ich könnte dir dabei helfen. Andernfalls biete ich Folgendes an: Sie können (nachdem Sie mit dem Abspielen eines Songs begonnen haben) auf das endedzu 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/ended
Sgnl
@stomy Bitte überprüfen Sie die EDIT in meiner Antwort, um eine Wiedergabeliste zu erstellen, die Songs nacheinander abspielt.
Kybernetik
15

Fügen Sie ein verstecktes Audio hinzu und spielen Sie es ab.

function playSound(url){
  var audio = document.createElement('audio');
  audio.style.display = "none";
  audio.src = url;
  audio.autoplay = true;
  audio.onended = function(){
    audio.remove() //Remove when played.
  };
  document.body.appendChild(audio);
}
Rey
quelle
14

Wenn Sie den folgenden Fehler erhalten:

Nicht erfasst (im Versprechen) 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 einen clickoder 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.

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>

Der Ton startet nach 0,5 Sekunden.

Reza Saadati
quelle
Es funktioniert nicht. Nicht in Chrome. Nicht länger.
Arfeo
11
new Audio('./file.mp3').play()
Maxmaxmaximus
quelle
5
var song = new Audio();
song.src = 'file.mp3';
song.play();
mamadaliev
quelle
einfacher und funktionierender Code.
Arsh Khan
5

Ziemlich einfache Lösung, wenn Sie ein HTML-Tag wie das folgende haben:

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

Verwenden Sie einfach JavaScript, um es abzuspielen:

document.getElementById('myAudio').play();
Ben Stafford
quelle
Wollten Sie </a> oder </ audio> verwenden? Nur neugierig.
Cooper
Ich habe das <audio> -Tag verwendet.
Ben Stafford
1
Ben, dein Beispiel hatte ein falsches schließendes Tag, deshalb hatte @Cooper diese Frage gestellt. Ich habe die Antwort mit dem richtigen schließenden Tag bearbeitet.
Sgnl
4

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.

var soundPlayer = {
  audio: null,
  muted: false,
  playing: false,
  _ppromis: null,
  puse: function () {
      this.audio.pause();
  },
  play: function (file) {
      if (this.muted) {
          return false;
      }
      if (!this.audio && this.playing === false) {
          this.audio = new Audio(file);
          this._ppromis = this.audio.play();
          this.playing = true;

          if (this._ppromis !== undefined) {
              this._ppromis.then(function () {
                  soundPlayer.playing = false;
              });
          }

      } else if (!this.playing) {

          this.playing = true;
          this.audio.src = file;
          this._ppromis = soundPlayer.audio.play();
          this._ppromis.then(function () {
              soundPlayer.playing = false;
          });
      }
  }
};

Und implementieren Sie es wie folgt:

<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>
Talsibony
quelle
Funktioniert nicht auf einer Safari, wenn ich die automatische Wiedergabe von JS aus starte.
Maki10
1
@ Maki10 Hallo, ich habe es in Safari Desktop Version 12.0.3 (14606.4.5) getestet und es funktioniert hier: jsfiddle.net/xf5zyv4q/5
Talsibony
Funktioniert auch auf Safari Mobile IOS 12
Talsibony
Ich aktualisiere den Link für mein Problem jsfiddle.net/6431mfb5 . Für mich funktioniert Autoplay nur zum ersten Mal in Safari und neueren mehr.
Maki10
@ maki10, da Sie es ohne Benutzerinteraktion aufrufen, funktioniert die automatische Wiedergabe nicht ohne Interaktion des Benutzers wie Click-Touch. Entfernen Sie die letzte Zeile: soundPlayer.play (' interactive-examples.mdn.mozilla.net/media/examples/… );
Talsibony
3

Ich habe diese Methode verwendet, um einen Sound abzuspielen ...

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
Bilal Soomro
quelle
2

Wenn Sie Ihr Audio beim Öffnen der Seite wiedergeben möchten, gehen Sie wie folgt vor.

<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>

und rufe dieses playMusic () auf, wann immer du es in deinem Spielcode brauchst.

Suhani Mendapara
quelle
2

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

  1. Definieren Sie die erforderlichen Audiodateien in Ihrem HTML
  2. Starten Sie das Spiel mit einem Klick
  3. Wenn Sie auf die Schaltfläche klicken, spielen Sie ALLE Audiodateien ab und halten Sie sie an, außer der, die Sie zu Beginn abspielen möchten

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:

<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>

Wiederholen Sie diesen Vorgang nach Bedarf für alle Audiodaten im Spiel

Dann:

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

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

Phil Allen
quelle
1

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.

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

Die Bibliothek unterstützt auch Audio Sprites.

VJAI
quelle
0

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.

<!DOCTYPE html>
<html>
<head>
    <title>
        js prompt AI
    </title>
    <style>
        #button {
            border: 1px solid black;
            border-radius: 10px;
            font-size: 22px;
            height:65px;
            width:100px;
            text-align: center;
            line-height: 65px;
        }
    </style>
</head>
<body>

    <audio id="myAudio" src="./how_are_you.m4a"></audio>
    <p>To Interact with the AI please click the button</p>
    <div id=button>click</div>

    <script>

       var button = document.getElementById("button");
       function playBack() {
           button.addEventListener("click", function (){
            var talk = prompt("If you wish for the AI to respond type hi");
            var myAudio = document.getElementById("myAudio");

            if(talk === "hi") {
                    myAudio.play();
            }
           }) ;



       }
       playBack();
   </script>
</body>

</html>
Urihel Coleman
quelle
0

Verwenden Sie einfach dies:

<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

Oder um es einfacher zu machen:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

Stichprobe:

<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>

Habe keine Ahnung, ob dies in anderen Browsern als Chrome 73 funktioniert !!

ICH BIN SCHLAU
quelle
Dies ist eine einfache, saubere Antwort. Überhaupt keine Frage !!
IMSMART
0

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.

const stopAttempt = setInterval(() => {
    const audio = new Audio('your_audio_url_or_file_name.mp3');
    const playPromise = audio.play();
    if (playPromise) {
      playPromise.then(() => {
        clearInterval(stopAttempt)
      }).catch(e=>{
        console.log('' + e);
      })
    }
}, 100 )
Danny
quelle
0

Hier ist eine Lösung für das Jahr 2020, wenn Sie den Fehler sehen:

[Fehler] Nicht behandelte Ablehnung von Versprechungen: NotSupportedError: Der Vorgang wird nicht unterstützt. (anonyme Funktion) acceptPromise play (anonyme Funktion) (testaudio.html: 96) dispatch (jquery-3.4.1.min.js: 2: 42577)


<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>

Seien Sie nicht schlau und denken Sie, dass dies eine alte Schule oclickist. Ich werde das einfach auf der Seite in meine jQuery oder meine externe JavaScript-Datei verschieben. Nee. Es muss ein sein onclick.

William Entriken
quelle