CODEWITHSUNDEEP
javascriptaudioxmlhttprequest
random
random

Reputation: 125

XMLHttpRequest 'response' parameter null

The XMLHttpRequest object I have below is behaving oddly, however I am not sure if I am using it properly. To start with I needed to allow cross-domain requests on my S3 server per the instructions located here.

Next, I coded the .open method to go to my Amazon S3 server and perform a GET on the mp3 named "Superman." This seems to occur without error, however this console.log a couple lines down

console.log("Current 'request.response' value");  
console.log(request.response);

shows that the request.response is null. However.. in the request.onload function, the request.response object that gets passed in is shown by this console.log statement to be of type AudioBuffer. 

    console.log("Inside 'request.onload' function");
    console.log(buffer);

Here is a screen shot of the console output from these two statements.

enter image description here

However.. when I attempt to play the mp3 in the .onload method, line 205 in the screen shot below throws the highlighted error.

enter image description here

My question is, am I using the XMLHttpRequest object and it's functions properly and if so, why am I getting this error? Do I need to run some sort of conversion on the request.response before or after the .onload method?

var request = new XMLHttpRequest();
request.open('GET', 'http://s3.amazonaws.com/tracks/Superman.mp3', true);    
request.responseType = 'arraybuffer'; 

console.log("Current 'request.response' value");  
console.log(request.response);

request.onload = function() {
  context.decodeAudioData(request.response, function(buffer){

    console.log("Inside 'request.onload' function");
    console.log(buffer);

    var source = context.createBufferSource();
    source.buffer = buffer.byteLength;
    source.connect(context.destination);
    source.start(0);
  }

Upvotes: 1

Views: 995

Answers (2)

StackSlave
StackSlave

Reputation: 10627

onload is for window and Image Objects. Maybe your code should look more like:

var request = new XMLHttpRequest;
request.open('GET', 'http://s3.amazonaws.com/tracks/Superman.mp3');    
request.responseType = 'arraybuffer'; 
console.log("Current 'request.response' value");  
console.log(request.response);
request.onreadystatechange = function(){
  if(request.readyState === 4 && request.status === 200){
    context.decodeAudioData(request.response,
      function(buffer){
        console.log("Inside 'request.onload' function");
        console.log(buffer);
        var source = context.createBufferSource();
        source.buffer = buffer;
        source.connect(context.destination);
        source.start(0);
      }
    );
  }
}

Upvotes: 1

sshaw
sshaw

Reputation: 1014

You're assigning source.buffer = buffer.byteLength. Try source.buffer = buffer.

Upvotes: 1

Related Questions