CODEWITHSUNDEEP
javascripthtmlweb-audio-api
oxxi
oxxi

Reputation: 472

Basic Web Audio API not playing sound

I'm trying to follow a tutorial online by piecing together the examples. I feel like this should be playing the mp3 file. I'm using the Chrome browser and it's up to date. I don't get any errors on the console. I'm not sure what I need to change or add to make this work.

   <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>

Upvotes: 1

Views: 2172

Answers (1)

uber5001
uber5001

Reputation: 3954

You never call loadDogSound. If you call it, you'll find that you do get an error:

Uncaught ReferenceError: onError is not defined

Additionally, you never call playSound.

Here's a working example:

<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>

Upvotes: 5

Related Questions