如何在JavaScript中调用含alert的函数前优先播放音频？

核心问题是alert这类同步阻塞代码会卡住浏览器事件循环，导致音频播放请求被延迟到弹窗关闭后才处理。要实现音频先播放再执行原函数，无需逐个修改数千个按钮的onclick代码，推荐用全局事件拦截+音频预加载的方案：

步骤1：修改按钮生成逻辑（仅需改一次生成代码） #

把音频链接存入按钮的data属性，替代原onclick里的playSystemSound(link)调用：

// 原生成代码
// s = '<input type="button" onclick="playSystemSound(link); somefunction()"...';

// 修改后：把音频链接放到data-sound属性，保留原onclick的业务函数
s = '<input type="button" data-sound="' + link + '" onclick="somefunction()"...';
$('btnX').innerHTML = s;

步骤2：全局拦截按钮点击事件 #

通过事件委托监听所有按钮的点击，先确保音频启动播放，再执行原业务函数：

// 预加载常用音频（可选，提升播放速度）
const audioCache = new Map();

document.addEventListener('click', async (e) => {
  const btn = e.target;
  // 只处理目标是按钮且带有音频链接的元素
  if (btn.tagName !== 'INPUT' || btn.type !== 'button' || !btn.dataset.sound) return;

  // 阻止原onclick立即执行
  e.preventDefault();
  const soundLink = btn.dataset.sound;

  try {
    // 从缓存取音频，没有则创建
    let audio = audioCache.get(soundLink);
    if (!audio) {
      audio = new Audio(soundLink);
      audioCache.set(soundLink, audio);
    }
    // 等待音频开始播放（不是等待播放结束）
    await audio.play();
    // 执行原按钮的onclick逻辑，保持this指向按钮
    if (btn.onclick) btn.onclick.call(btn, e);
  } catch (err) {
    // 处理音频播放失败（如浏览器自动拦截），仍执行业务逻辑
    console.error('音频播放失败:', err);
    if (btn.onclick) btn.onclick.call(btn, e);
  }
}, true); // 捕获阶段监听，确保先于按钮自身的onclick执行

为什么之前的方案无效？ #

1. async/await方案：你写的playSystemSound是异步函数，但onclick里直接用playSystemSound(link); somefunction()不会阻塞后续代码，somefunction会立刻执行，alert直接卡住浏览器，音频还没来得及启动。
2. setTimeout方案：setTimeout的回调属于宏任务，会被同步的alert阻塞，必须等弹窗关闭后才会执行，所以音频还是延后播放。

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