缓冲未在网络音频API JavaScript中加载

Question

I've been learning (trying to :-D) Web Audio API.Here in the follwing code i want to play a list of songs in array.
But i'm getting errors...Please help.Thank you in advance. Code:-

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

When im debugging in web Console, i can see that the array have the audio buffer in position 1 not in 0. I cheked then the value of . Its coming 1 not 0 .
But why? i've started from 0 not 1 ?Please help.. And for testing purpose i've started with a single song in ..

Answer 1

You can use async/await an Promise to await the completion of multiple asynchronous tasks

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