Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互

Question

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();

play() 函数不工作，它给出了错误 “未捕获（承诺中）DOMException：play() 失败，因为用户没有先与文档交互。”

建议一些修复。

Answer 1

这是大多数现代浏览器中的一项功能，可防止网站开发人员进行恶意/垃圾邮件操作。所以基本上网页将无法自动播放视频/音频，除非用户首先与网站交互（点击、悬停、点等）。

所以在你的例子中，nextSequence() 应该在用户点击某些东西时被调用。

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