¿Reproduciendo audio con Javascript?

Estoy haciendo un juego con HTML5 y Javascript.

¿Cómo podría reproducir el audio del juego a través de Javascript?

Si no quieres meterte con elementos 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>

Esto utiliza la HTMLAudioElementinterfaz, que reproduce audio de la misma manera que el <audio>elemento .

Si necesita más funcionalidad, utilicé la biblioteca howler.js y la encontré simple y útil.

<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 fácil, solo obtenga su audioelemento y llame al play()método:

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

Mira este ejemplo: http://www.storiesinflight.com/html5/audio.html

Este sitio descubre algunas de las otras cosas que puedes hacer, como load(), pause()y algunas otras propiedades del audioelemento.

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

SoundManager 2 proporciona una API fácil de usar que permite reproducir el sonido en cualquier navegador moderno, incluido IE 6+. Si el navegador no admite HTML5, obtiene ayuda de flash. Si desea estrictamente HTML5 y sin flash, hay una configuración para eso,preferFlash=false

Admite audio 100% sin flash en iPad, iPhone (iOS4) y otros dispositivos + navegadores habilitados para HTML5

El uso es tan simple como:

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

Aquí hay una demostración en acción: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Esta es una pregunta bastante antigua, pero quiero agregar información útil. El iniciador del tema ha mencionado que él es "making a game". Entonces, para todos los que necesitan audio para el desarrollo del juego, hay una mejor opción que solo una <audio>etiqueta o un HTMLAudioElement. Creo que debería considerar el uso de la API de audio web :

Si bien el audio en la web ya no requiere un complemento, la etiqueta de audio presenta limitaciones significativas para implementar juegos sofisticados y aplicaciones interactivas. La API de audio web es una API JavaScript de alto nivel para procesar y sintetizar audio en aplicaciones web. El objetivo de esta API es incluir capacidades que se encuentran en los motores de audio de juegos modernos y algunas de las tareas de mezcla, procesamiento y filtrado que se encuentran en las aplicaciones modernas de producción de audio de escritorio.

Fácil con jquery

// establece etiquetas de audio sin precarga

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

// agrega jquery para cargar

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

// escribe métodos para jugar y parar

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

// decide cómo controlar el audio

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

EDITAR

Para abordar la pregunta de @ stomy, así es cómo usaría este enfoque para reproducir una lista de reproducción :

Configura tus canciones en un objeto:

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

Utilice las funciones de activación y reproducción como antes:

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

Cargue la primera canción dinámicamente:

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

Restablezca la fuente de audio a la siguiente canción en la lista de reproducción, cuando finalice la canción actual:

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

Vea aquí un ejemplo de este código en acción.

Agregue un audio oculto y reprodúzcalo.

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

Si obtiene el siguiente error:

DOMException no capturado (en promesa): play () falló porque el usuario no interactuó primero con el documento.

Eso significa que el usuario debe interactuar primero con el sitio web (como dice el mensaje de error). En este caso, debe usar clicko simplemente otro detector de eventos, para que el usuario pueda interactuar con su sitio web.

Si desea cargar automáticamente el audio y no desea que el usuario interactúe primero con el documento, puede usarlo setTimeout.

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

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

El sonido comenzará después de 0.5 segundos.

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

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

Solución bastante simple si tiene una etiqueta HTML como la siguiente:

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

Solo usa JavaScript para jugarlo, así:

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

Tuve algunos problemas relacionados con la devolución de objetos de promesa de audio y algunos problemas relacionados con la interacción del usuario con los sonidos. Terminé usando este pequeño objeto,

Recomendaría implementar los sonidos de reproducción más cercanos al evento de interacción que está utilizando el usuario.

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 implementarlo de la siguiente manera:

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

Usé este método para reproducir un sonido ...

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

si desea reproducir su audio cada vez que se abre la página, haga lo siguiente.

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

y llama a este playMusic () siempre que lo necesites en tu código de juego.

Con los requisitos de seguridad de que un usuario debe interactuar con una página web para que se permita el audio, así es como lo hago, basado en la lectura de muchos artículos, incluso en este sitio

1. Defina los archivos de audio requeridos en su html
2. Tener un botón de inicio del juego con un clic
3. Al hacer clic en el botón, reproducir y pausar TODOS los archivos de audio de la barra que desea reproducir al principio

Debido a que todos los archivos de audio se han "reproducido" en el mismo OnClick, ahora puedes reproducirlos en cualquier momento del juego sin restricciones

Tenga en cuenta que para una mejor compatibilidad no use archivos wav, MS no los admite

Use mp3 y ogg, que cubre todos los dispositivos

Ejemplo:

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

repita según sea necesario para todo el audio en el juego

Entonces:

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

repita según sea necesario, excepto que no pause el audio que desea escuchar cuando comience el juego

Puede usar la API de audio web para reproducir sonidos. Existen bastantes bibliotecas de audio como howler.js, soundjs, etc. Si no se preocupa por los navegadores antiguos, también puede consultar http://musquitojs.com/ . Proporciona una API simple para crear y reproducir sonidos.

Por ejemplo, para reproducir un sonido todo lo que tienes que hacer es.

import $buzz from 'musquito';

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

buzz.play();

La biblioteca también es compatible con Audio Sprites.

Este es un JS que se me ocurrió en un proyecto de IA para bebés con el que estoy trabajando Espero que esto pueda ayudarte.

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

Solo usa esto:

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

O, para hacerlo más simple:

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

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

</video>

Muestra:

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

¡NO TENGA IDEA si esto funciona en otros navegadores que no sean Chrome 73!

Tuve algunos problemas con la reproducción de audio, especialmente desde que Chrome ha actualizado que el usuario tiene que interactuar primero con el documento.

Sin embargo, en casi todas las soluciones que encontré es que el código JS tiene que configurar activamente los oyentes (por ejemplo, clics en los botones) para recibir eventos del usuario para reproducir el audio.

En mi caso, solo quería que mi juego jugara BGM tan pronto como el jugador interactúe con él, así que me convertí en un simple oyente que sigue comprobando si la página web está interactuando o no.

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 )

Aquí hay una solución para el año 2020 cuando vea el error:

[Error] Rechazo de promesa no manejado: NotSupportedError: la operación no es compatible. (función anónima) rechazar Promise play (función anónima) (testaudio.html: 96) despacho (jquery-3.4.1.min.js: 2: 42577)

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

No seas astuto y pienses que es una vieja escuela oclick, solo moveré eso hacia abajo en mi página jQuery o mi archivo JavaScript externo. No Tiene que ser un onclick.