JavaScript实现两个动态数组的定时音频依次播放问题求助

数据老陈

2026-8-20

解决数组音频按顺序配对播放的问题

问题描述

有两个长度相等的数组A和B，数组长度最大为6，需按以下流程循环播放对应音频：

播放数组A的第n个音频
等待1秒
播放数组B的第n个音频
等待2秒
重复上述步骤直到遍历完所有数组元素。

原尝试的两种方案均未达到预期，第二种方案中所有A数组音频同时播放，之后所有B数组音频再同时播放。

问题根源

原方案里所有定时器的延迟时间都是固定值（1000ms和2000ms），循环执行时所有setTimeout几乎同时触发，没有为每个元素的播放周期设置递增的延迟偏移。每个完整播放周期（A→等1秒→B→等2秒）总时长为3秒，必须为第i个元素的播放设置基于i的延迟偏移才能错开顺序。

解决方案

方案1：计算递增延迟实现顺序播放

const cycleTotal = 3000; // 单个元素的完整播放周期时长（1+2秒）
const playADelay = 0;    // A在周期内的播放延迟
const playBDelay = 1000; // B在周期内的播放延迟（A播放后等待1秒）

for (let i = 0; i < numberOfValues; i++) {
  // 第i个A音频的触发时间：i个完整周期时长 + 周期内A的延迟
  setTimeout(() => playSoundArray1[i], i * cycleTotal + playADelay);
  // 第i个B音频的触发时间：i个完整周期时长 + 周期内B的延迟
  setTimeout(() => playSoundArray2[i], i * cycleTotal + playBDelay);
}

方案2：用async/await实现直观流程

若环境支持ES6+，用异步函数配合延迟封装，逻辑更贴近需求描述，可读性更强：

// 封装延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 顺序播放主函数
async function playInOrder() {
  for (let i = 0; i < numberOfValues; i++) {
    playSoundArray1[i];
    await delay(1000);
    playSoundArray2[i];
    await delay(2000);
  }
}

// 启动播放
playInOrder();