¿Reproduciendo audio con Javascript?


691

Estoy haciendo un juego con HTML5 y Javascript.

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


99
Como es html5, hay <audio>. Ese elemento tendrá ganchos JS apropiados para 'reproducir', 'pausar', etc ...
Marc B

1
@Marc Bueno, ¿podrías proporcionar información sobre cuáles son esos ganchos?
Ryan S.

14
Apuesto a que te estás preguntando dónde está la documentación para todos los métodos de audio: stackoverflow.com/questions/4589451/…
Bryan Downing

Respuestas:


1330

Si no quieres meterte con elementos HTML:

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

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.


99
Este método funciona para reproducir mp3 pero no para archivos wav. ¿Hay alguna forma de reproducir archivos wav?
user781486

12
@ user3293156 Este método admite los mismos formatos que HTML5 <audio>. Wikipedia tiene una tabla de compatibilidad de formatos de audio . new Audio()puede reproducir archivos WAV en todos los navegadores, excepto Internet Explorer.
Rory O'Kane

283
@ RoryO'Kane para que todos puedan reproducir el formato de audio de Microsoft, excepto Microsoft. lol
Dave Cousineau

10
Advertencias de pareja: (1) Firefox no reproducirá mp3 . Necesitarás un archivo ogg en su lugar. (2) Safari / iOS no se reproducirá si está sirviendo el contenido a través de https . Deberá tener un certificado válido.
Peter

99
Tenga en cuenta que a partir de abril de 2018, Chrome no reproducirá archivos de audio a menos que el usuario haya hecho clic al menos una vez en el documento. Ver aquí .
Nils Lindemann


38

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/


3
En general, cuando proporciona un enlace en este sitio web, proporciona información del enlace en su publicación. No se recomienda publicar un enlace simple y decir "haga clic en esto".
Ryan S.

77
Lo siento, pensé que el sitio se explicaría solo. Lo
editaré

32

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.


22

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.


Esto reproduce todas las etiquetas de audio con class = "my_audio" al mismo tiempo. ¿Cómo juegas uno tras otro (en una lista de reproducción)?
Stomy

@stomy ¿Publicaste esto como su propia pregunta en StackOverflow? Si me lo haces saber. Podría ayudarte con eso. de lo contrario, ofreceré esto: podría (después de comenzar a reproducir una canción) escuchar el endedevento que se emitirá e iniciar el siguiente archivo de audio en la lista (presumiblemente está realizando un seguimiento en la memoria DOM, JS, etc. ) developer.mozilla.org/en-US/docs/Web/Events/ended
Sgnl

@stomy, verifique EDITAR en mi respuesta para crear una lista de reproducción que reproduzca canciones consecutivamente.
Cibernético

15

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

14

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.


No funciona No en Chrome. Ya no.
Arfeo



5

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

¿Querías usar </a> o </audio>? Sólo curioso.
Cooper el

Usé la etiqueta <audio>.
Ben Stafford

1
Ben, tu ejemplo tenía una etiqueta de cierre incorrecta, por eso @Cooper había hecho esa pregunta. Edité la respuesta con la etiqueta de cierre correcta.
Sgnl

4

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>

No funciona en un Safari si disparo la reproducción automática desde JS.
maki10

1
@ maki10 Hola, lo probé en Safari Desktop versión 12.0.3 (14606.4.5) y funciona aquí: jsfiddle.net/xf5zyv4q/5
talsibony

También funciona en safari mobile IOS 12
talsibony

Actualizo el enlace para mi problema jsfiddle.net/6431mfb5 . Para mí, la reproducción automática solo funciona por primera vez en safari y más reciente.
maki10

@ maki10 porque lo llama sin interacción del usuario, la reproducción automática no funcionará sin la interacción del usuario, como hacer clic, toque la última línea: soundPlayer.play (' interactive-examples.mdn.mozilla.net/media/examples/… );
talsibony

3

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

2

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.


2

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


1

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.


0

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>

0

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!


Esta es una respuesta fácil y limpia. No jquery en absoluto!
IMSMART

0

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 )

0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.