JavaScript：如何为音频附加alert及实现第二个alert触发指定音频播放

嘿，别担心，我一步步给你讲清楚，你直接照着复制粘贴到对应位置就行，完全不用懂复杂的JS逻辑～

需求1：如何在JavaScript中为音频附加Alert？ #

这里分两种常见场景，你可以根据艺术作业的需求选：

场景A：播放音频前先弹出Alert #

比如用户点击播放按钮时，先弹出提示框，确认后再播放音频：

// 创建音频实例，替换成你的音频文件路径
const audio = new Audio('你的音频文件.wav');

// 假设页面上有个id叫"playAudioBtn"的按钮，点击它触发
document.getElementById('playAudioBtn').addEventListener('click', () => {
  alert('马上播放音频哦！'); // 弹出提示
  audio.play(); // 播放音频
});

场景B：音频播放完毕后弹出Alert #

音频播完自动弹出提示，适合需要引导用户后续操作的场景：

const audio = new Audio('你的音频文件.wav');

// 监听音频播放结束的事件
audio.addEventListener('ended', () => {
  alert('音频播放完成啦！');
});

// 触发播放（比如页面加载后自动播，或者绑定到按钮点击）
audio.play();

需求2：第二个Alert弹出时播放sorry.wav #

我先假设你现有实现视频3秒后弹Alert的代码大概是这样的（如果你的代码略有不同，核心逻辑完全通用）：

第一步：先看你的现有代码（示例） #

// 获取页面上的视频元素，替换成你视频的id
const video = document.getElementById('yourVideo');

// 视频开始播放后，3秒弹出第一个Alert
video.addEventListener('play', () => {
  setTimeout(() => {
    alert('你的第一个Alert内容'); // 你已经写好的第一个提示
    // --- 重点！下面就是要插入代码的位置 ---
  }, 3000); // 原有的3秒延迟
});

第二步：插入新增代码 #

你只需要把下面这段代码，直接粘贴到第一个Alert代码的后面就行：

// 这里的1000是第一个Alert消失后，过1秒弹出第二个，你可以改数字调整间隔（1000=1秒）
setTimeout(() => {
  // 1. 先创建音频实例并播放
  const sorryAudio = new Audio('sorry.wav');
  sorryAudio.play();
  // 2. 弹出第二个Alert
  alert('Is something here with me?');
}, 1000);

最终完整代码示例 #

const video = document.getElementById('yourVideo');
video.addEventListener('play', () => {
  setTimeout(() => {
    alert('你的第一个Alert内容'); // 你原有的第一个提示
    // ↓↓↓ 粘贴的新增代码开始 ↓↓↓
    setTimeout(() => {
      const sorryAudio = new Audio('sorry.wav');
      sorryAudio.play();
      alert('Is something here with me?');
    }, 1000);
    // ↑↑↑ 粘贴的新增代码结束 ↑↑↑
  }, 3000);
});

关键注意点 #

• 确保sorry.wav文件和你的HTML文件在同一个文件夹里，如果放在子文件夹（比如叫audio），路径要改成'audio/sorry.wav'
• 浏览器会阻止无交互的自动音频播放，而你的触发逻辑是用户播放视频后执行，刚好符合浏览器的要求，不用担心播放失败～

内容的提问来源于stack exchange，提问作者B.Ashcroft