如何使用JavaScript按顺序播放二维音频数组？

要实现先播放完第一个子数组的所有音频，再依次播放后续子数组的功能，核心是利用Promise处理音频播放的异步逻辑，确保顺序执行。以下是具体实现：

核心思路 #

1. 将单个音频的播放封装为Promise，通过监听ended事件确认播放完成
2. 子数组内的音频依次播放：使用async/await循环逐个执行音频播放Promise
3. 子数组之间顺序执行：同样用async/await循环依次处理每个子数组

代码实现 #

1. 单个音频播放函数 #

封装播放逻辑，返回Promise，播放完成或出错时触发状态变更：

function playAudio(audioUrl) {
  return new Promise((resolve, reject) => {
    const audio = new Audio(audioUrl);
    
    // 播放完成时resolve
    audio.addEventListener('ended', resolve);
    // 播放出错时reject
    audio.addEventListener('error', reject);
    
    // 触发播放，处理浏览器自动播放限制的错误
    audio.play().catch(reject);
  });
}

2. 播放单个子数组（内部音频依次播放） #

遍历子数组，逐个播放音频，前一个播放完成后再执行下一个：

async function playAudioGroup(audioGroup) {
  for (const url of audioGroup) {
    await playAudio(url);
  }
}

3. 播放所有子数组（子数组间顺序执行） #

依次处理每个子数组，完成一个子数组的播放后再开始下一个：

async function playAllAudioGroups(audioGroups) {
  for (const group of audioGroups) {
    await playAudioGroup(group);
  }
}

使用示例 #

// 你的二维音频数组
const audioArray = [
  ['Audio1.mp3', 'Audio2.mp3'],
  ['Audio3.mp3', 'Audio4.mp3'],
  ['Audio5.mp3']
];

// 绑定到用户交互事件（比如按钮点击），规避浏览器自动播放限制
document.querySelector('#playBtn').addEventListener('click', () => {
  playAllAudioGroups(audioArray)
    .then(() => console.log('所有音频播放完毕'))
    .catch(err => console.error('播放出错:', err));
});

补充说明 #

• 浏览器自动播放限制：现代浏览器要求必须有用户交互（如点击、触摸）才能播放音频，因此需将播放触发逻辑绑定到用户事件中
• 错误处理：如果希望某个音频播放失败时不终止后续播放，可以在循环中添加try/catch：

async function playAudioGroup(audioGroup) {
  for (const url of audioGroup) {
    try {
      await playAudio(url);
    } catch (err) {
      console.error(`播放${url}失败:`, err);
    }
  }
}

内容的提问来源于stack exchange，提问作者Rifqi Moeslim Muchsaeni