Creé un juego usando html, css y javascript. En mi código hay un problema al reproducir el audio, no puedo reproducir el audio. Cada vez que muestra una advertencia/error "script.js:7 Uncaught (en promesa) DOMException: play() falló porque el usuario no interactuó primero con el documento" en la consola:
score = 0; cross = true; audio = new Audio('music.mp3'); audiogo = new Audio('gameover.mp3'); setTimeout(() => { audio.play() }, 1000); document.onkeydown = function (e) { console.log("Key code is: ", e.keyCode) if (e.keyCode == 38) { dino = document.querySelector('.dino'); dino.classList.add('animateDino'); setTimeout(() => { dino.classList.remove('animateDino') }, 700); } if (e.keyCode == 39) { dino = document.querySelector('.dino'); dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left')); dino.style.left = dinoX + 112 + "px"; } if (e.keyCode == 37) { dino = document.querySelector('.dino'); dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left')); dino.style.left = (dinoX - 112) + "px"; } } setInterval(() => { dino = document.querySelector('.dino'); gameOver = document.querySelector('.gameOver'); obstacle = document.querySelector('.obstacle'); dx = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left')); dy = parseInt(window.getComputedStyle(dino, null).getPropertyValue('top')); ox = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('left')); oy = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('top')); offsetX = Math.abs(dx - ox); offsetY = Math.abs(dy - oy); // console.log(offsetX, offsetY) if (offsetX < 73 && offsetY < 52) { gameOver.innerHTML = "Game Over - Reload to Play Again" obstacle.classList.remove('obstacleAni') audiogo.play(); setTimeout(() => { audiogo.pause(); audio.pause(); }, 1000); } else if (offsetX < 145 && cross) { score += 1; updateScore(score); cross = false; setTimeout(() => { cross = true; }, 1000); setTimeout(() => { aniDur = parseFloat(window.getComputedStyle(obstacle, null).getPropertyValue('animation-duration')); newDur = aniDur - 0.1; obstacle.style.animationDuration = newDur + 's'; console.log('New animation duration: ', newDur) }, 500); } }, 10); function updateScore(score) { scoreCont.innerHTML = "Your Score: " + score }Los audios y los videos no se pueden reproducir automáticamente en los navegadores (los modernos) por razones de privacidad. Para que jueguen, primero el usuario debe hacer algo. Pulsando una tecla, o haciendo clic con el ratón, por ejemplo.