Javascript 如何使用js audio api播放多个音频

我正在从服务器读取音频文件。我有一个原始音频文件的数组

const allAudio = [];

然后我按顺序播放它们

var volumeSeq=1;

    function playAudio(){
     if(volumeSeq==allAudio.length){ volumeSeq=1;}
      var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      source = audioCtx.createBufferSource();
      audioCtx.decodeAudioData(allAudio[volumeSeq], function(buffer) {
      source.buffer = buffer;
      console.log(source.buffer);
      source.connect(audioCtx.destination);
      source.loop = false;});

      source.start(0);
      source.onended = function () {
        volumeSeq++;
        playAudio();
}

我明白了这个问题。但我不知道为什么。问题是，在对数组的i.element进行解码之后，其中的元素将被删除。我的意思是当我解码allAudio[1]时，allAudio[1]是空的。 所以我不能为这些音轨创建一个循环

---

我该怎么办？

为什么不先解码所有音频文件，然后循环播放？像这样：

var allAudio = [];
var audioCtx = new AudioContext();
var volumeSeq = 0;
var decodedAudio = [];

function decodeAudio() {
    allAudio.forEach(function (file, index) {
        audioCtx.decodeAudioData(file, function(buffer) {
            decodedAudio[index] = buffer;
            if (decodedAudio.length >= allAudio.length) {
                play();
            }
        })
     })
}
function play() {
    if (volumeSeq >= allAudio.length){ volumeSeq=0;}
    var source = audioCtx.createBufferSource();
    source.buffer = decodedAudio[volumeSeq];
    source.connect(audioCtx.destination);
    source.start(0);
    source.onended = function () {
        volumeSeq++;
        play();
    }
}
decodeAudio();

还有几件事：

• 您不需要每次都创建
• 默认情况下为false。您可以跳过

  source.loop=false

• 每个新变量都应该以

  const

  、

  let

  或

  var

  开头。您在

  源代码中缺少它。顺便说一句，现在最好使用
  const
  和
  let
  ，而不是
  var
  。我将在下一个“现代”示例中展示它

• 我不知道为什么要从索引1开始迭代

  allAudio

  。数组中的第一个索引是0

如果您不关心像IE这样的旧浏览器，您可以使用和

async/await

，使代码更干净：

const audioCtx = new AudioContext();
async function start() {
   const decodedAudio = await Promise.all(allAudio.map((file) => audioCtx.decodeAudioData(file)));
   let volumeSeq = 0;
   function play() {
        if(volumeSeq >= allAudio.length) volumeSeq = 0;
        const source = audioCtx.createBufferSource();
        source.buffer = decodedAudio[volumeSeq];
        source.connect(audioCtx.destination);
        source.start(0);
        source.addEventListener('ended', () => {
           volumeSeq++;
           play();
        }, { once: true })
   }
   play();
}
start()