1

Vaya por delante que soy totalmente neofito, pero ya he probado de todo sin exito y a ver si alguien me puede echar una mano (me he leido respuesta a temas similares en esta misma web pero sin exito tampoco). Estoy haciendo un juego para mi hija y quiero que suene un audio de fondo en loop (es un mp3 ubicado en la misma carpeta que el html y el js). La cuestion es que he intentado ya de todo y el maldito audio sigue sin sonar. Incluso he intentado poner un boton de start para que al interactuar con el arranque la musica, pero tampoco. El codigo en cuestion es:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rembound.com Example</title>
<script type='text/javascript' src='bubble-shooter-example.js'></script>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #000;
  }
  #viewport {
    border: 1px solid #000;
  }
  #startButton {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
  }
</style>
</head>
<body> 
<canvas id="viewport" width="628" height="628"></canvas>
<button id="startButton">Start</button>

<script>
// Crear el elemento de audio
var backgroundAudio = new Audio('take a chance 160-DEF.mp3');
backgroundAudio.loop = true;
backgroundAudio.volume = 1.0;

// Función para reproducir el audio
function playAudio() {
    backgroundAudio.play().catch((error) => {
        console.log('Autoplay no permitido, esperando interacción del usuario:', error);
    });
}

// Función para iniciar el juego y la música
function startGame() {
    // Iniciar el juego
    init();

    // Intentar reproducir el audio al hacer clic en el botón de inicio
    playAudio();

    // Si no se reproduce automáticamente, esperar a la interacción del usuario
    document.addEventListener('click', playAudio);
    document.addEventListener('touchstart', playAudio);

    // Ocultar el botón de inicio
    startButton.style.display = 'none';
}

// Obtener el botón de inicio
var startButton = document.getElementById("startButton");

// Añadir el evento de clic al botón de inicio
startButton.addEventListener('click', startGame);
</script>
</body>
</html>

A ver si alguien puede arrojar algo de luz a mi oscuridad

Parte 2:

Codigo modificado segun crespuesta de Mateo (tampoco me funciona):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rembound.com Example</title>
<script type='text/javascript' src='bubble-shooter-example.js'></script>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #000;
  }
  #viewport {
    border: 1px solid #000;
  }
  #startButton {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
  }
</style>
</head>
<body> 
<canvas id="viewport" width="628" height="628"></canvas>
<button id="startButton">Start</button>

<script>
// Crear el elemento de audio
var backgroundAudio = new Audio('https://fobdfobd.github.io/Julia-Friends/takeachance160.mp3');
backgroundAudio.loop = true;
backgroundAudio.volume = 1.0;

// Función para reproducir el audio
function playAudio() {
    backgroundAudio.play()
}
<button onClick="playAudio()">start</button>

// Función para iniciar el juego y la música
function startGame() {
    // Iniciar el juego
    init();

    // Intentar reproducir el audio al hacer clic en el botón de inicio
    playAudio();

    // Si no se reproduce automáticamente, esperar a la interacción del usuario
    document.addEventListener('click', playAudio);
    document.addEventListener('touchstart', playAudio);
<button onClick="playAudio()">start</button>

    // Ocultar el botón de inicio
    startButton.style.display = 'none';
}

// Obtener el botón de inicio
var startButton = document.getElementById("startButton");

// Añadir el evento de clic al botón de inicio
startButton.addEventListener('click', startGame);
</script>
</body>
</html>
5
  • ¿Hay algún error en la consola del navegador? No estoy seguro de si puedes usar ese nombre (con espacios) para el fichero de audio, creo que deberías usar 'take%20a%20chance%20160-DEF.mp3' Commented el 4 sept. a las 13:02
  • Muchas gracias por responder! He cambiado el nombre del archivo para eliminar los espacios per sigue sin funcionar en ninguna navegador Commented el 4 sept. a las 13:58
  • Estupendo. Ahora puedes eliminar esta respuesta para no confundir al resto.
    – Candid Moe
    Commented el 4 sept. a las 15:33
  • A menos que sea React, no se escribe HTML dentro de Javascript. El link de new Audio está bien, no sé que problema podrías tener ahora. Revisa la consola y dinos que errores obtienes.
    – Mateo
    Commented el 4 sept. a las 16:02
  • Aqui va: Warnings: Line 161: }; --- Don't make functions within a loop. Line 181: document.addEventListener('DOMContentLoaded', () => { --- Expected an identifier and instead saw ')'. :reset - destroy state and start afresh :load <url> - to inject new DOM :load <script_url> - to inject external library load also supports following shortcuts: jquery, underscore, prototype, mootools, dojo, rightjs, eg. :load jquery :clear - to clear contents of the console :about Uncaught SyntaxError: Unexpected token '<' Uncaught SyntaxError: Unexpected token '<' Commented el 4 sept. a las 16:13

1 respuesta 1

1

Como indica el error, no puedes reproducir audio sin interacción del usuario. Tienes que usar un botón o algún otro evento producido por el usuario para reproducirlo. Por ejemplo:

// Crear el elemento de audio
var backgroundAudio = new Audio('https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3');
backgroundAudio.loop = true;
backgroundAudio.volume = 1.0;

// Función para reproducir el audio
function playAudio() {
    backgroundAudio.play()
}
<button onClick="playAudio()">Iniciar</button>

O si tienes la posibilidad de ejecutar Google Chrome con diferentes parámetros, puedes desactivar la política de reproducción automática con:

chrome.exe --autoplay-policy=no-user-gesture-required

Posiblemente estés pensando, si no se puede, cómo es que YouTube puede iniciar automáticamente sus videos. La respuesta es que está en una whitelist..

Otra opción es usar un navegador que no presente este inconveniente. Internet Explorer no se actualiza hace años, así que es probable que pueda reproducir audio sin interacción.

10
  • Muchas gracias! Veo que el tuyo funciona y aun me frustra mas ya que no he conseguido lo mismo. He subido el mp3 tambien a github a ver si desde alli funcionaba mejor, y copiado tal cual tu codigo pero no funciona. Pensaba que a lo mejor podia ser del mp3 pero si pongo el enlace directo de github al mp3 funciona bien. Pongo el codigo modificado que he probado en una respuesta a mi propio mensaje Commented el 4 sept. a las 14:35
  • @Caissa acabo de revisar el repositorio. El nombre claramente está mal. El archivo no se llama take a chance 160-DEF.mp3, se llama take a chance 160- DEF.mp3 con un espacio entre el guión y DEF.
    – Mateo
    Commented el 4 sept. a las 15:07
  • Hola Mateo, antes que nada muchisimas gracias por responder. Tan solo me queda esto de la musica por resolver y me estoy volviendo loco con ello. Si, lo he corregido y he eliminado todos los espacios y tampoco. De hecho si te fijas en la ultima version del codigo que he puesto (respondiendome a mi mismo) he puesto una url de github al mp3, como habias hecho tu, y tampoco funciona. Commented el 4 sept. a las 15:10
  • Asi es como tengo el codigo ahora mismo, y nada, no hay manera- no entiendo porque: // Crear el elemento de audio var backgroundAudio = new Audio('fobdfobd.github.io/Julia- Friends/takeachance160.mp3'); backgroundAudio.loop = true; backgroundAudio.volume = 1.0; // Función para reproducir el audio function playAudio() { backgroundAudio.play() } <button onClick="playAudio()">start</button> Commented el 4 sept. a las 15:12
  • @CaissaCards te falta el https:// al inicio
    – Mateo
    Commented el 4 sept. a las 15:41

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.