基本Web Audio API无法播放声音

时间:2013-06-26 02:02:52

标签: javascript html web-audio

我试图通过拼凑示例来在线学习教程。我觉得这应该是播放mp3文件。我正在使用Chrome浏览器,它是最新的。我在控制台上没有任何错误。我不确定我需要更改或添加以使其工作。

   <html>

<head>
<script type="text/javascript">
var context;

var sound1Buffer = null;
var url  = 'https://dl.dropboxusercontent.com/u/1957768/SrtV2.mp3';


function init(){
    try {
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        context = new AudioContext();
    }

    catch(e) {
        alert("web Audio api is not supported!");
    }
}

window.addEventListener('load', init, false);

function loadDogSound(url){

    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = 'arrayBuffer';

    //decode asynchronously
    request.onload = function(){
        context.decodeAudioData(request.response, function(buffer){
            sound1Buffer = buffer;

        }, onError);
    }
    request.send();
}


function playSound(sound1Buffer){
     var source = context.createBufferSource();
     source.sound1Buffer = sound1Buffer;

     source.connect(context.destination);     
     source.start(0);
}

</script>
</head>
 <body>
</body>
</html>

1 个答案:

答案 0 :(得分:5)

您永远不会致电loadDogSound。如果你打电话,你会发现你确实收到了错误:

Uncaught ReferenceError: onError is not defined 

此外,您永远不会致电playSound

这是一个有效的例子:

<html>
<head>
<script type="text/javascript">
  //That one url you wanted.
  var url  = 'https://dl.dropboxusercontent.com/u/1957768/SrtV2.mp3';

  /* --- set up web audio --- */
  //create the context
  var context = new webkitAudioContext();
  //...and the source
  var source = context.createBufferSource();
  //connect it to the destination so you can hear it.
  source.connect(context.destination);

  /* --- load up that buffer ---  */
  //Basic start to ajax! (I say basic, yet i don't know it well.)
  var request = new XMLHttpRequest();
  //open the request...?
  request.open('GET', url, true); 
  //I don't even know.
  request.responseType = 'arraybuffer';
  //Once the request has completed... do this
  request.onload = function() {
    context.decodeAudioData(request.response, function(response) {
      /* --- play the sound AFTER we've gotten the buffer loaded --- */
      //set the buffer to the response we just received.
      source.buffer = response;
      //And off we go! .start(0) should play asap.
      source.start(0);
    }, function () { console.error('The request failed.'); } );
  }
  //Now that the request has been defined, actually make the request. (send it)
  request.send();
</script>
</head>
 <body>
</body>
</html>