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

Posted 2023-05-07

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

【英文标题】：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

【发布时间】：2021-03-04 17:27:49

【问题描述】：

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() 失败，因为用户没有先与文档交互。”

建议一些修复。

【问题讨论】：

文件准备好后你是否打电话给nextSequence()？

我只是在检查该功能是否有效。但它在控制台中显示此错误。

【参考方案1】：

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

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

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

【讨论】：

那是检查函数是否工作。 $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100); -- 这部分正在工作，但不是“audio.play()”。它在控制台中显示此错误的错误 - “未捕获（承诺中）DOMException：play() 失败，因为用户没有首先与文档交互。”