CODEWITHSUNDEEP
javascript
Prachi Rahangdale
Prachi Rahangdale

Reputation: 27

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

var buttonColours = ["red", "blue", "green", "yellow"];

var gamePattern = [];

function nextSequence() {

  var randomNumber = Math.floor(Math.random() * 4);
  var randomChosenColour = buttonColours[randomNumber];
  gamePattern.push(randomChosenColour);

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

  var audio = new Audio("sounds/" + randomChosenColour + ".mp3");
  audio.play();
}

nextSequence();

The play() function is not working and it is giving the error "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."

Suggest some fix.

Upvotes: 0

Views: 3325

Answers (1)

Ahmed Hammad
Ahmed Hammad

Reputation: 3085

This a feature in most of modern browsers to prevent malicious/spam actions by website developers. So basically the web pages will not be able to auto-play videos/audios except when the user interacts with the website first (clicks, hovers, points, etc.).

So in your case, nextSequence() should be called when the user clicks on something for example.

document.getElementById("playbutton").addEventListener("click", nextSequence);

Upvotes: 2

Related Questions