如何通過單個異步調用將多個音頻文件加載到 web 音頻 API 上下文中？

Question

我想通過一次調用將多個 mp3/ogg 文件從服務器加載到 Web-audio-api 中。 我知道下面的 for / loop 不起作用，我該怎么做呢？

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

謝謝和歡呼，羅伯

Answer 1

最好的解決方案是您只詢問服務器一次。 但是，如果您堅持撥打多個 Api 電話，則可以全部使用 Promise。

請注意，這不是一個工作示例，只是一個想法，您可以如何使用 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*)
      });
  });
}