1

¡Buenas tardes!, me encuentro desarrollando un juego en JavaScript, de hecho mas bien creando mi propia versión de uno muy clásico que ya existe, y para que el juego fuera un poco mas dinámico y divertido quise agregarle Audio, sin embargo me doy cuenta que al probar a darle play al audio, ¡No funciona!, como nota importante uno de esos audios esta en el html, el resto estará en javascript:

Código html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script type = "module" src="scripts/script.js"></script>
    <title>Tetris</title>
</head>
<body>

    <div id="points" class="points">0</div>
    <canvas id="canvas" width = "390" height="720"></canvas>
    <audio src="sounds/tetris_song.mp3" type="audio/mpeg" preload = "auto" autoplay loop></audio>

</body>
</html>

Ese es el único audio que quiero que se repita y que se escuche apenas se cargue la pagina, el resto de audios, mi intención era cargarlos en Javascript, de hecho ni siquiera me quería funcionar el audio del html, sin embargo, cuando comente absolutamente todo el código en javascript para "Intentar reproducir un audio de los que no quiero que se repitan" y recargue el servidor local, me di cuenta de que ¡funciona el audio correctamente en html!

Sin embargo y por supuesto, para poder saber que pasa y eso y mirar a ver como se puede solucionar he aquí el código que intente usar en javascript para cargar y reproducir un solo audio (Solo mostrare el código del audio), (mi intención era tener varios encapsulados):

window.onload = ()=>{

const songs = {

    //Aquí tendre varios audios, sin embargo para experimentar de momento solo tengo este:
    rotation_moving: new Audio("sounds/rotation and moving.wav")

}

const promesa = new Promise((resolve,reject)=>{

    songs.rotation_moving.onload = ()=>{

        resolve();

    }

});

promesa.then(()=>{

    console.log(songs.rotation_moving);
    songs.rotation_moving.play();//NO SUENA

}).catch(()=>{

    console.log("Ha habido un error!");/*No  muestra que allá habido un error, 
por lo cual probablemente llego al then, sin embargo, aun así, no suena...*/

});

}

Cabe destacar que no estoy usando el localhost de xampp, si no que estoy usando el servidor http-server de nodejs.

Lo otro es que cuando creo audios en javascript, automáticamente deja de funcionar el audio que funcionaba de forma correcta en HTML y no suena ni nada, por supuesto tampoco suenan los audios en javascript.

5
  • puede ser los espacios en el nombre1
    – Bryro
    el 28 feb. 2019 a las 20:11
  • Me acabo de dar cuenta de dos cosas, numero 1: Los espacios no tienen nada que ver ya que probe a intentar reproducir el audio pero esta vez con una función y fuera del then con el nombre tal cual así estaba y funciono .-., lo que no me explico es porque al momento de cargar el audio, y llamar a la función play() en el then, no se escucha el audio!, pero usandolo en otra función si...
    – Layer
    el 28 feb. 2019 a las 20:33
  • pero esto viene a partid de un click o un evento por parte del usuario es que si el usuario no hace ningun tipo de evento el navegador por defecto bloquea toda ejecucion de autoplay por parte de javascript!
    – Bryro
    el 28 feb. 2019 a las 21:23
  • Era atravez del then de la promise cuando el audio se cargase. Sin embargo agregue play(), a otra función de tipo keydown y funciona perfectamente.
    – Layer
    el 28 feb. 2019 a las 21:29
  • 1
    es que por defecto la opcion auto play para javascript no se ejecuta al menos que exista un evento proveniente del usuario asi hagas promesas el auto play viene desabilitado. por eso te funciona con key down pero no con window.onload
    – Bryro
    el 28 feb. 2019 a las 21:34

1 respuesta 1

0

El problema es que tu promesa no se está resolviendo, por lo que no llega al then. Dentro de la promesa solo se está definiendo un callback, pero este no se ejecuta.

Otra cosa importante es que cuando construyes el objeto Audio el atributo preload viene por defecto en auto, por lo que se comienza a descargar el archivo de audio antes de que definas la respuesta el evento load.

A continuación, te dejo un ejemplo sencillo de como reproducir un audio.

const song = new Audio("https://raw.githubusercontent.com/mdn/webaudio-examples/master/audio-basics/outfoxing.mp3");
song.play();

Esta es una modificación a tu código para se ejecute correctamente.

const songs = {
  rotation_moving: new Audio(),
}

songs.rotation_moving.preload = "none";
songs.rotation_moving.src = "https://raw.githubusercontent.com/mdn/webaudio-examples/master/audio-basics/outfoxing.mp3";

const promesa = new Promise((resolve, reject) => {
  songs.rotation_moving.onloadeddata = () => {
    resolve();
  };
  songs.rotation_moving.load();
});

promesa.then(() => {
  songs.rotation_moving.play();
})
.catch(() => {
  console.log("Ha habido un error!");
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.