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>