JavaScript如何在if条件语句满足时自动触发指定音频播放

• 执行时序错误：你写的if (attempt == 3)是全局代码，只会在页面刚加载时执行一次，此时attempt初始为0，这个判断永远不会命中。后续点击按钮累加的次数根本没有触发任何判断逻辑。
• 调用时机错误：你在全局直接调用playSound()，此时页面刚加载，既未达到3次的触发条件，还会被浏览器自动播放策略直接拦截——浏览器默认禁止无用户交互的音频自动播放。
• 作用域错误：playSound定义在if代码块内部，你在全局调用它时，如果之前的if判断未命中，这个函数根本不存在，会直接抛出undefined is not a function的报错。

将次数判断逻辑内置到点击事件的处理函数中，每次点击累加完成后再校验是否达到触发条件，同时提前预加载音频资源减少播放延迟，依托点击按钮的用户交互上下文触发播放，规避浏览器自动播放拦截：

// 初始化尝试次数
var attempt = 0;
// 提前预加载要播放的音效，路径替换为你自己的音频文件地址即可
var sound20 = new Audio('your-sound-file.ogg');

function testbutton() {
  // 每次点击先累加次数
  attempt++;
  document.getElementById("alarm").innerHTML = "guess" + attempt;
  // 累加完成后立即判断是否达到3次，命中则直接播放
  if (attempt === 3) {
    sound20.play();
  }
}

配套HTML代码无需调整：

<button onclick="testbutton();">Test</button>
<p id="alarm"></p>

• 后续如果需要调整触发次数，直接修改if判断中的数值即可，无需改动其他逻辑。
• 建议使用本地存放的音频文件路径，避免跨域资源加载失败导致播放失效。

内容的提问来源于stack exchange，提问作者Ulrik