JavaScript随机生成颜色自动播放对应音频遇用户交互权限错误求助

错误原因 #

这个报错是现代浏览器自动播放政策导致的：为避免扰民，浏览器要求音频/视频的播放必须由用户主动交互（点击、触摸等）触发，禁止页面加载完成后自动执行播放操作。你的代码在页面加载时直接尝试播放音频，此时用户还未和页面产生任何交互，因此被浏览器拦截。

具体修复步骤 #

1. 调整逻辑，将音频播放触发时机绑定到用户交互 #

把生成随机颜色、播放音频的逻辑放到用户交互事件中（比如页面点击、按钮点击），确保第一次播放由用户主动触发。

2. 修正代码错误 #

• 原HTML中存在拼写错误：lass="row" 要改为 class="row"，否则布局会失效。
• 原JS中选择器有多余空格：$(" . " + randomChosenColour) 要改为 $("." + randomChosenColour)，否则无法正确选中元素。

修改后的完整代码 #

HTML代码 #

<h1>点击页面任意位置开始游戏</h1>
<div class="container">
    <div class="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>

JavaScript代码 #

var gamePattern = [];
var buttonColours = ["red", "blue", "green", "yellow"];
var gameStarted = false; // 标记游戏是否已启动

function nextSequence() {
  return Math.floor(Math.random() * 4);
}

// 监听用户第一次点击，启动游戏
$(document).on("click", function() {
  if (!gameStarted) {
    gameStarted = true;
    generateNextStep();
  }
});

function generateNextStep() {
  var randomChosenColour = buttonColours[nextSequence()];
  gamePattern.push(randomChosenColour);
  
  // 执行按钮闪烁动画
  $("." + randomChosenColour).fadeOut(100).fadeIn(100);
  
  // 播放对应颜色的音频
  var audio = new Audio("sounds/" + randomChosenColour + ".mp3");
  audio.play().catch(err => console.log("音频播放失败:", err));
}

额外说明 #

• 一旦用户完成第一次交互（比如点击页面），浏览器会记录这个交互状态，后续如果需要自动生成序列并播放音频（比如Simon游戏的连续提示），通常不会再被拦截。
• 给audio.play()添加catch处理，可以捕获可能的播放错误，避免控制台出现未处理的Promise异常。

内容的提问来源于stack exchange，提问作者Teja Sruthi Varanasi