Pause Web Audio API sound playback

Question

How can i create a pause function for my audio? I already have a play function in my script below.

http://pastebin.com/uRUQsgbh

function loadSound(url) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    // When loaded decode the data
    request.onload = function() {

        // decode the data
        context.decodeAudioData(request.response, function(buffer) {
            // when the audio is decoded play the sound
            playSound(buffer);
        }, onError);
    }
    request.send();
}

function playSound(buffer) {
    sourceNode.buffer = buffer;
    sourceNode.noteOn(0);
}

But how can i pause or stop it?

Answer 1

The short answer is "you can't pause it - you can stop it, as idbehold says, by calling sourceNode.noteOff(0);".

You can't pause it for the same reason there isn't a "pause" button on an audio cable - because data keeps running through it. You could implement a recorder node that can pause, but at some point it's going to be buffering up a huge amount of data if you don't unpause it.

The usual way to implement this scenario is to keep track of where you are in the playback (e.g. by remembering when you started), and then when you want to pause you remember that offset, call noteOff(0), then when you want to re-start the playback create a new node pointing to the same buffer and call noteOnGrain with the offset.

Answer 2

The problem with noteOff(0) is that it will destroy the AudioNode, so you won't be able to use to pause the audio. Instead, you can simply disconnect sourceNode, which will effectively pause the audio. To resume playback, simply reconnect it. Since your code connects sourceNode to analyser:

function pause() {
    sourceNode.disconnect();
}

function resume() {
    sourceNode.connect(analyser);
}

Hope that helps!

Answer 3

before assigning the buffer, you have create a bufferSource can use the context. The method to create bufferSource is "createBufferSource" => context.createBufferSource. After create bufferSource you have create a conexion using "context.destination" => source.connect(context.destination);. Is all, now to play, use a start(0) to modern browsers, to older browsers is noteOn(0)

function loadSound() {
   xhr = new XMLHttpRequest();
   xhr.open('GET', url, true);
   xhr.responseType = 'arraybuffer';
   xhr.onload = function () {
       /* Processing response data - xhr.response */
       /* Decoding audio data. */
       var context = new webkitAudioContext();
       context.decodeAudioData(xhr.response, function onSuccess (buffer) {
           if (! buffer) {
               alert('Error decoding file data.');
               return;
           }
           var source = context.createBufferSource(); /* Create SourceNode. */
           source.buffer = buffer; /* buffer variable is data of AudioBuffer type from the decodeAudioData() function. */
           source.connect(context.destination); /* Connect SourceNode to DestinationNode. */
           source.start(0); /* Play sound. */
       }, function onError (error) {
           alert('Error decoding file data.');
       });

   };
    xhr.onerror = function () {
        /* Handling errors */
        console.log('error');
    };
    xhr.send();
}