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>