Riproduzione audio con Javascript?

Sto realizzando un gioco con HTML5 e Javascript.

Come potrei riprodurre l'audio del gioco tramite Javascript?

Se non vuoi fare confusione con gli elementi HTML:

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>

Questo utilizza l' HTMLAudioElementinterfaccia, che riproduce l'audio allo stesso modo <audio>dell'elemento .

Se hai bisogno di più funzionalità, ho usato la libreria howler.js e l' ho trovata semplice e utile.

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

È facile, basta ottenere il tuo audioelemento e chiamare il play()metodo:

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

Dai un'occhiata a questo esempio: http://www.storiesinflight.com/html5/audio.html

Questo sito scopre alcune delle altre cose interessanti che si possono fare, come load(), pause()e un paio di altre proprietà del audioelemento.

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2 fornisce un'API di facile utilizzo che consente di riprodurre l'audio in qualsiasi browser moderno, incluso IE 6+. Se il browser non supporta HTML5, ottiene aiuto da Flash. Se vuoi rigorosamente HTML5 e non hai flash, c'è un'impostazione per questo,preferFlash=false

Supporta audio 100% senza Flash su iPad, iPhone (iOS4) e altri dispositivi + browser abilitati per HTML5

L'uso è semplice come:

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

Ecco una demo in azione: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Questa è una domanda piuttosto vecchia ma voglio aggiungere alcune informazioni utili. L'antipasto di argomento ha detto che lo è "making a game". Quindi, per tutti coloro che hanno bisogno di audio per lo sviluppo di giochi, c'è una scelta migliore di un semplice <audio>tag o an HTMLAudioElement. Penso che dovresti considerare l'uso dell'API Web Audio :

Sebbene l'audio sul Web non richieda più un plug-in, il tag audio presenta limiti significativi per l'implementazione di giochi sofisticati e applicazioni interattive. L'API Web Audio è un'API JavaScript di alto livello per l'elaborazione e la sintesi audio nelle applicazioni Web. L'obiettivo di questa API è includere le funzionalità presenti nei moderni motori audio di gioco e alcune delle attività di missaggio, elaborazione e filtro che si trovano nelle moderne applicazioni di produzione audio desktop.

Facile con Jquery

// imposta tag audio senza precarico

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

// aggiungi jquery da caricare

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

// scrivere metodi per giocare e fermarsi

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

// decide come controllare l'audio

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

MODIFICARE

Per rispondere alla domanda di @ stomy, ecco come utilizzare questo approccio per riprodurre una playlist :

Imposta le tue canzoni in un oggetto:

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

Usa le funzioni trigger e play come prima:

$(".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);
      }
 }

Carica la prima canzone in modo dinamico:

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

Ripristina la sorgente audio sul brano successivo nella playlist, quando termina il brano corrente:

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

Vedi qui per un esempio di questo codice in azione.

Aggiungi un audio nascosto e riproducilo.

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

Se ricevi il seguente errore:

DOMException non promossa (promessa): play () non riuscita perché l'utente non ha interagito prima con il documento.

Ciò significa che l'utente deve prima interagire con il sito Web (come dice il messaggio di errore). In questo caso è necessario utilizzare clicko solo un altro listener di eventi, in modo che l'utente possa interagire con il tuo sito Web.

Se si desidera caricare automaticamente l'audio e non si desidera che l'utente interagisca prima con il documento, è possibile utilizzare setTimeout.

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

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

Il suono inizierà dopo 0,5 secondi.

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

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

Soluzione abbastanza semplice se si dispone di un tag HTML come di seguito:

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

Usa JavaScript per giocare, in questo modo:

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

Ho avuto alcuni problemi relativi alla restituzione di oggetti audio promessi e alcuni problemi relativi all'interazione dell'utente con i suoni che finisco per usare questo piccolo oggetto,

Consiglierei di implementare i suoni di riproduzione più vicini all'evento di interazione che l'utente sta usando.

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

E implementalo come segue:

<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>

Ho usato questo metodo per riprodurre un suono ...

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

Con i requisiti di sicurezza che un utente deve interagire con una pagina Web per consentire l'audio, questo è come lo faccio, basato sulla lettura di molti articoli, anche su questo sito

1. Definisci i file audio richiesti nel tuo html
2. Avere un pulsante di avvio del gioco con un onclick
3. Quando si fa clic sul pulsante, riprodurre e mettere in pausa TUTTI i file audio nella barra che si desidera riprodurre all'inizio

Poiché tutti i file audio sono stati "riprodotti" sullo stesso OnClick, ora puoi riprodurli in qualsiasi momento del gioco senza restrizioni

Si noti che per la migliore compatibilità non utilizzare file wav, MS non li supporta

Usa mp3 e ogg, che copre tutti i dispositivi

Esempio:

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

ripetere se necessario per tutto l'audio del gioco

Poi:

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

ripetere se necessario, tranne per non mettere in pausa l'audio che si desidera ascoltare all'avvio del gioco

se vuoi riprodurre l'audio ogni volta che la pagina viene aperta, fai così.

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

e chiama playMusic () ogni volta che ti serve nel tuo codice di gioco.

È possibile utilizzare l'API Web Audio per riprodurre suoni. Ci sono alcune librerie audio là fuori come howler.js, soundjs ecc. Se non ti preoccupi dei vecchi browser, puoi anche consultare http://musquitojs.com/ . Fornisce una semplice API per creare e riprodurre suoni.

Ad esempio, per riprodurre un suono tutto ciò che devi fare è.

import $buzz from 'musquito';

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

buzz.play();

La libreria supporta anche Audio Sprites.

Questo è un po 'di JS che mi è venuta in mente in un progetto di AI per bambini con cui sto lavorando. spero che questo sia in grado di aiutarti.

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

Usa questo:

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

Oppure, per semplificare:

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

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

</video>

Campione:

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

NO IDEA se funziona su altri browser diversi da Chrome 73 !!

Ho avuto dei problemi con la riproduzione dell'audio, soprattutto da quando Chrome ha aggiornato che l'utente deve prima interagire con il documento.

Tuttavia, in quasi tutte le soluzioni che ho trovato è che il codice JS deve impostare attivamente i listener (ad es. Clic sui pulsanti) per ricevere eventi utente per riprodurre l'audio.

Nel mio caso volevo solo che il mio gioco giocasse a BGM non appena il giocatore interagisce con esso, quindi mi sono fatto un semplice ascoltatore che continua a controllare se la pagina web viene interagita o meno.

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 )

Ecco una soluzione per l'anno 2020 quando viene visualizzato l'errore:

[Errore] Rifiuto promesso non gestito: NotSupportedError: l'operazione non è supportata. (funzione anonima) rejectPromise play (funzione anonima) (testaudio.html: 96) dispatch (jquery-3.4.1.min.js: 2: 42577)

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

Non essere lucido e pensa che sia una vecchia scuola oclick, la sposterò in fondo al mio jQuery o al mio file JavaScript esterno. No. Deve essere un onclick.