0

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

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
Geeky Person
  • 19
  • 5

1 Answers1

1

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?

yellow cyber
  • 99
  • 3