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

Question

我一直在学习（尝试:-D）以下代码中的网络音频 API.Here 我想播放 songs[] 中的歌曲列表数组。
但是我遇到了错误...请提前 help.Thank 你。代码：-

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

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

Buffer not loading in web-audio api javascript

javascript

web-audio-api