JavaScript Audio is not playing

Question

I have searched all over the Internet and I found the same things I have already done.
I think I haven't made any mistake but my audio does not work.
Except the audio, all the other things work fine.
I am using jQuery.

Here is code snippet :

var buttonColors = ['red', 'green', 'yellow', 'blue'];
var gamePattern = [];


function nextSequence() {
  var randomNumber = Math.floor(Math.random() * 4);


  var randomChosenColor = buttonColors[randomNumber];
  gamePattern.push(randomChosenColor);


  $("#" + randomChosenColor).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);


  new Audio("sounds/" + randomChosenColor + ".mp3").play();


}
nextSequence();

html:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Simon</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>

<body>
  <h1 id="level-title">Press A Key to Start</h1>
  <div class="container">
    <div lass="row">

      <div type="button" id="green" class="btn green">

      </div>

      <div type="button" id="red" class="btn red">

      </div>
    </div>

    <div class="row">

      <div type="button" id="yellow" class="btn yellow">

      </div>
      <div type="button" id="blue" class="btn blue">

      </div>

    </div>

  </div>


  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="index.js"></script>

</body>

</html>

Here are folders: files used

index.js:16 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. — Geeky Person, Jul 07 '20 at 08:02

score 1 · Answer 1 · answered Jul 07 '20 at 08:11

The audio doesn't play because the browser blocked it. It doesnt let audio to play without the user interacting with the page. This wasn't always like this, therefore you might of had found some tutorials online that say it is posible.

There is no way aroud this, but for development purposes you can enable a flag in Chrome that allows to play audio without interaction on your device, see more here: How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

JavaScript Audio is not playing

1 Answers1