如何通过一个异步调用将多个音频文件加载到web音频API上下文中？

Question

我想加载多个mp3/ogg文件从服务器到Web-audio-api与一个单一的调用。我知道下面的for /循环不起作用，我该怎么做呢？

    var AudioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var AudioBufferArr = [];
    
    for (let fileNumber = 1; fileNumber <= 4; fileNumber++) fetch_audiodata_from_server(fileNumber);
        
    function fetch_audiodata_from_server(fileNumber) {
        fetch("inc/postrequest.php",{
            method: 'POST',
            body: 'fileNumber=' + encodeURIComponent(fileNumber),
            headers: {'Content-type': 'application/x-www-form-urlencoded'}
        })
        .then(response => response.arrayBuffer())
        .then(buffer => {
            AudioCtx.decodeAudioData(buffer, function(decodedData) {
                AudioBufferArr[fileNumber] = decodedData;
            })
        });
    }

谢谢和干杯，Rob

Answer 1

最好的解决方案是，如果您只向服务器请求一次。但是如果你坚持要做几个Api调用，你可以使用Promise all。

请注意，这不是一个工作示例，而只是一个如何使用Promise All的想法

let promiseList = [];
for (let fileNumber = 1; fileNumber <= 4; fileNumber++) {
  promiseList.push(fetchDataFromServer(fileNumber));
}

Promise.all(promiseList).then((values) => {
  //   *magic to the returned values*
});

function fetchDataFromServer(fileNr) {
  return new Promise((resolve, reject) => {
    fetch( ...insert code here...)
      .then((response) => response.arrayBuffer())
      .then((buffer) => {
           *more code with the buffer*
           resolve(*the data you want to return*)
      });
  });
}