如何在JavaScript中等待音频播放完毕后再执行后续操作？

你的判断没错，audio.play()是异步操作，它会立即返回而不会等待音频播放完成，所以后续的状态更新代码会直接执行。要实现“先显示播放中，等待音频结束后显示完成”的效果，可以通过以下两种方式实现：

方法一：监听ended事件 #

利用音频元素的ended事件，当音频播放完成时触发状态更新：

const audio = new Audio('{{ path }}');
const statusElement = document.getElementById("audio-status");

// 先设置播放状态
statusElement.textContent = "Playing the audio";

// 尝试播放音频，处理可能的播放失败
audio.play().catch(error => {
  statusElement.textContent = "Failed to play audio";
  console.error(error);
});

// 监听音频播放结束事件
audio.addEventListener('ended', () => {
  statusElement.textContent = "done playing the audio";
});

说明：

• 直接使用audio元素的play方法，无需额外封装函数
• 监听ended事件，确保只有音频播放完成后才更新状态
• 加上catch处理播放失败场景（比如浏览器自动阻止音频播放、文件加载失败等）

方法二：使用async/await结合Promise #

通过async/await语法让代码逻辑更线性，同时等待音频播放完成：

const audio = new Audio('{{ path }}');
const statusElement = document.getElementById("audio-status");

async function playAndWait() {
  statusElement.textContent = "Playing the audio";
  try {
    // 等待音频开始播放
    await audio.play();
    // 等待音频播放结束
    await new Promise(resolve => {
      audio.addEventListener('ended', resolve, { once: true });
    });
    // 播放完成后更新状态
    statusElement.textContent = "done playing the audio";
  } catch (error) {
    statusElement.textContent = "Failed to play audio";
    console.error(error);
  }
}

// 注意：多数浏览器要求音频播放触发自用户交互（比如点击），否则会被阻止
// 建议将playAndWait绑定到按钮点击等用户操作上
document.querySelector('#play-button')?.addEventListener('click', playAndWait);

说明：

• audio.play()返回一个Promise，会在音频开始播放时resolve
• 通过创建新的Promise监听ended事件，确保等待到播放完成
• { once: true }配置让事件只触发一次，避免内存泄漏
• 注意浏览器的自动播放策略：音频播放通常需要用户交互触发，否则会被浏览器阻止

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