XMLHttpRequest'response'参数为null

Question

我下面的XMLHttpRequest对象表现得很奇怪，但我不确定我是否正确使用它。首先，我需要根据说明located here.

在我的S3服务器上允许跨域请求

接下来，我将.open方法编码为我的Amazon S3服务器，并在名为“超人”的mp3上执行GET。这似乎没有错误发生，但是console.log几行

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

表明request.response为null。但是..在request.onload函数中，传入的request.response对象由此console.log语句显示为AudioBuffer类型。

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

以下是这两个语句的控制台输出的屏幕截图。

然而..当我尝试在.onload方法中播放mp3时，下面屏幕截图中的第205行会抛出突出显示的错误。

我的问题是，我使用XMLHttpRequest对象并且它的功能是否正常，如果是这样，为什么我会收到此错误？我需要在request.response方法之前或之后对.onload进行某种转换吗？

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

Answer 1

onload适用于window和Image个对象。也许你的代码应该更像：

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

Answer 2

您正在分配source.buffer = buffer.byteLength。试试source.buffer = buffer。