javascriptaudiohtml5-audioaudiocontextwebkitaudiocontext

AudioContext does not have a pause property?

I have used javascript Audio() before, but now I need to add some reverb effect in the audio and I am using reverb.js which uses the AudioContext api. I have the start property available, but no pause property? How do I pause or stop the audio??

Here is my code:

<script src="http://reverbjs.org/reverb.js"></script>
<script>
// 1) Setup your audio context (once) and extend with Reverb.js.
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
reverbjs.extend(audioContext);

// 2) Load the impulse response; upon load, connect it to the audio output.
var reverbUrl = "http://reverbjs.org/Library/SaintLawrenceChurchMolenbeekWersbeekBelgium.m4a";
var reverbNode = audioContext.createReverbFromUrl(reverbUrl, function() {
  reverbNode.connect(audioContext.destination);
});

// 3) Load a test sound; upon load, connect it to the reverb node.
var sourceUrl = "./sample.mp3";
var sourceNode = audioContext.createSourceFromUrl(sourceUrl, function() {
  sourceNode.connect(reverbNode);
});
</script>
<a href="javascript:sourceNode.start()">Play</a>
<a href="javascript:sourceNode.stop()">Stop</a>

Also, I tried using stop(), and it works, but when I fire start() after clicking on stop, the start() doesn't work. Can you you help me out with a solution??

Solution

  • You can use the suspend() and resume() methods of AudioContext to pause and resume your audio: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/suspend

    One way to implement this with a single button for play/pause/resume, would be to add a function that controls the player state. For example:

    let started = false;
function pauseOrResume() {
    if (!started) {
        sourceNode.start();
        started = true;
        document.getElementById("pauseButton").innerHTML = 'Pause';
    } else if (audioContext.state === 'running') {
        audioContext.suspend().then(function () {
            document.getElementById("pauseButton").innerHTML = 'Resume';
        });
    } else if (audioContext.state === 'suspended') {
        audioContext.resume().then(function () {
            document.getElementById("pauseButton").innerHTML = 'Pause';
        });
    }
}

    And replace your existing "Play" button with:

    <a id="pauseButton" href="javascript:pauseOrResume()">Play</a>

    This does the following: