title: Uncaught (in promise) : DOMException: play() failed because the user didn't interact with the document first in console
body: <p>I had created a game using html, css and javascript. In my code there is an issue in playing the audio, I am not able to play the audio. Every time it is showing an warning/error &quot;script.js:7 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first&quot; in the console :</p>
  <pre><code>score = 0;
  cross = true;
  
  audio = new Audio('music.mp3');
  audiogo = new Audio('gameover.mp3');
  setTimeout(() =&gt; {
      audio.play()
  }, 1000);
  document.onkeydown = function (e) {
      console.log(&quot;Key code is: &quot;, e.keyCode)
      if (e.keyCode == 38) {
          dino = document.querySelector('.dino');
          dino.classList.add('animateDino');
          setTimeout(() =&gt; {
              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 + &quot;px&quot;;
      }
      if (e.keyCode == 37) {
          dino = document.querySelector('.dino');
          dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
          dino.style.left = (dinoX - 112) + &quot;px&quot;;
      }
  }
  
  setInterval(() =&gt; {
      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 &lt; 73 &amp;&amp; offsetY &lt; 52) {
          gameOver.innerHTML = &quot;Game Over - Reload to Play Again&quot;
          obstacle.classList.remove('obstacleAni')
          audiogo.play();
          setTimeout(() =&gt; {
              audiogo.pause();
              audio.pause();
          }, 1000);
      }
      else if (offsetX &lt; 145 &amp;&amp; cross) {
          score += 1;
          updateScore(score);
          cross = false;
          setTimeout(() =&gt; {
              cross = true;
          }, 1000);
          setTimeout(() =&gt; {
              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 = &quot;Your Score: &quot; + score
  }
  </code></pre>