Play pause sound in web audio API
How do I pause my audio? I already have a play function in the script below.
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?
source to share
The short answer is "you can't pause it, you can stop it like idbehold says by calling sourceNode.noteOff (0);".
You cannot pause it for the same reason that the audio cable does not have a pause button - because the data continues to run. You can implement a node recorder that can pause, but it will buffer a huge amount of data at some point if you don't stop it.
The usual way to implement this scenario is to keep track of where you are in the playback process (for example, by remembering at startup) and then when you want to pause, you remember that offset, call noteOff (0), then when you want to restart playback , create a new node pointing to the same buffer and call noteOnGrain with an offset.
source to share
The problem with noteOff(0)
is that it will destroy AudioNode
, so you can't use to pause the sound. Instead, you can simply mute sourceNode
, which will effectively pause the sound. To resume playback, simply plug it back in. Since your code connects sourceNode
to analyser
:
function pause() {
sourceNode.disconnect();
}
function resume() {
sourceNode.connect(analyser);
}
Hope it helps!
source to share
before assigning the buffer, you created a bufferSource that can use the context. The bufferSource creation method is "createBufferSource" => context.createBufferSource. After creating the bufferSource, you created a conflict using "context.destination" => source.connect (context.destination) ;. Now all to play, use start (0) for modern browsers, for older browsers 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();
}
source to share