Question

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

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();
}

我发现了问题。但是我不知道为什么。问题是，在对数组的元素进行解码之后，将删除其中的元素。我的意思是，当我解码allAudio [1]时，allAudio [1]为空。所以我无法为这些音轨创建循环。

我该怎么办？

Answer 1

为什么不一开始就解码所有音频文件，然后遍历它们？像这样：

calc

几件事：

您不需要每次都创建AudioContext。
AudioBufferSourceNode.loop默认为假。您可以跳过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();
每个新变量都应以source.loop = false;，const或let开头。您缺少var。顺便说一句，如今最好使用source和const，而不是let。我将在下一个“现代”示例中展示它。
我不知道为什么要从索引1开始迭代var。数组中的第一个索引是0。

如果您不关心IE等旧版浏览器，则可以使用Promises和allAudio使代码更简洁：

async/await

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

1 个答案: