Audio mit Javascript abspielen?

Ich mache ein Spiel mit HTML5 und Javascript.

Wie kann ich Spiel-Audio über Javascript abspielen?

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

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

function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
  audio.play();
}

<button onclick="play()">Play Audio</button>

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

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.

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/

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.

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.

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);
}

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.

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

var song = new Audio();
song.src = 'file.mp3';
song.play();

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();

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>

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();

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.

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

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.

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>

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

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.