javascript - 缓冲区未在网络音频 api javascript 中加载

Question

我一直在学习(尝试:-D)Web Audio API。在下面的代码中，我想播放 songs[] 数组中的歌曲列表。
但我收到错误...请帮助。提前谢谢您。代码:-

var sources = new Array();
var actx;
var songs = ['src1.mp3'];

function start() {
  console.log("WELCOME!!");
  try{
      actx = new AudioContext();
  }catch(e){
    console.log('WebAudio api is not supported!!');

  }
  var buffer_list =getBuffers(actx,songs);
  //console.log("hello");
  //console.log(buffer_list[1]);
  for (var x = 0;x<(buffer_list.length);x++){
    var i = actx.createBufferSource();
    sources[x] = i  ;
  }
  for (var x = 0;x<(buffer_list.length);x++){
    sources[x].buffer = buffer_list[x];

  }
  for(var x = 0;x<(buffer_list.length);x++){
    sources[x].connect(actx.destination);
  }
}

function getBuffers(actx,songs){
  var buffer_list = new Array();
  for (var x = 0;x<songs.length;x++){
    console.log(songs[x]);
      var request = new XMLHttpRequest();
      request.open('GET',songs[x],true);
      request.responseType = 'arraybuffer';
      //onload function for downloading,After sending request.
      request.onload = function(){
        var audioData = request.response;
        //console.log(audioData);
        if(audioData){
          actx.decodeAudioData(audioData,function(buffer){
            //console.log(buffer);
            console.log(x);
            buffer_list[x] = buffer;
          },
          function(e){
            console.log(e.err);
          });
      }else {
        console.error("problem!!");
      }
  }
  request.send();
}
console.log(buffer_list);
return buffer_list;

}

function play() {
  start();
  sources[0].start(0);
  //sources[1].start(0);
}
function stop(){
  sources[0].stop(0);
  //sources[1].stop(0);
}

当我在Web控制台中调试时，我可以看到数组buffer_list[]的音频缓冲区位于位置1而不是0。我检查了然后的值x。它即将到来的是1而不是0。
但为什么？我已经从 0 开始 x，而不是 1？请帮忙..为了测试目的，我从 songs[]..

中的一首歌曲开始

Answer 1

您可以使用async/await和Promise来等待多个异步任务的完成

var sources = new Array();
var actx;
var songs = ["https://upload.wikimedia.org/wikipedia/commons/6/6e/Micronesia_National_Anthem.ogg"];

async function start() {
  console.log("WELCOME!!");
  try {
    actx = new AudioContext();
  } catch (e) {
    console.log('WebAudio api is not supported!!');

  }
  var buffer_list = await getBuffers(actx, songs);
  //console.log("hello");
  //console.log(buffer_list[1]);
  for (var x = 0; x < (buffer_list.length); x++) {
    var i = actx.createBufferSource();
    sources[x] = i;
  }
  for (var x = 0; x < (buffer_list.length); x++) {
    sources[x].buffer = buffer_list[x];

  }
  for (var x = 0; x < (buffer_list.length); x++) {
    sources[x].connect(actx.destination);
  }
}

async function getBuffers(actx, songs) {
  var buffer_list = new Array();
  for (var x = 0; x < songs.length; x++) {
    await new Promise(function(resolve) {
    console.log(songs[x]);
    var request = new XMLHttpRequest();
    request.open('GET', songs[x], true);
    request.responseType = 'arraybuffer';
    //onload function for downloading,After sending request.
    request.onload = function() {
      var audioData = request.response;
      //console.log(audioData);
      if (audioData) {
        actx.decodeAudioData(audioData, function(buffer) {
            //console.log(buffer);
            console.log(x);
            buffer_list[x] = buffer;
            resolve()
          },
          function(e) {
            console.log(e.err);
          });
      } else {
        console.error("problem!!");
      }
    }
    request.send();
    })
  }
  console.log(buffer_list);
  return buffer_list;

}

async function play() {
  await start();
  sources[0].start(0);
  //sources[1].start(0);
}

async function stop() {
  sources[0].stop(0);
  //sources[1].stop(0);
}

play();