1

我在下面的 XMLHttpRequest 对象的行为很奇怪，但是我不确定我是否正确使用它。首先，我需要按照此处的说明在我的 S3 服务器上允许跨域请求。

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

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

表明request.response是null。但是.. 在request.onload函数中，request.response传入的对象由该console.log语句显示为 type 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);
  }
4

2 回答 2

1

你在分配source.buffer = buffer.byteLength. 试试source.buffer = buffer。

于 2013-08-18T00:31:51.433 回答
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);
      }
    );
  }
}
于 2013-08-18T00:16:19.563 回答