javascriptsoundjs

Add pause function to soundjs


I have tried using:

  1. createjs.Sound.pause;

  2. mySound.stop();

Nothing works. Right now it have a stop button but if the stop button is pressed then the sound would not be played again.

This is the soundjs that im using. soundjs

My code is exactly the same with the source code of it. Thanks for any help!

I end up doing it like this Based on Stephen Lightcap answer:

Javascript inside the head tag:

    function load() {
        // Update the UI
        document.getElementById("display").innerText = ".";


        // Load the sound
        createjs.Sound.alternateExtensions = ["mp3"];
        createjs.Sound.addEventListener("fileload", handleFileLoad);
        createjs.Sound.registerSound({id:"mySound", src:"../../test.mp3"});
    }

    function handleFileLoad(event) {
        // Update the UI
        document.getElementById("display").innerHTML = ".";
        document.getElementById("stopBtn").disabled = "";

        // Play the loaded sound
        createjs.Sound.play(event.src,{loop:2});

    }
    var instance = createjs.Sound.play(event.src);
</script>

Button inside the body tag:

<input id="pausBtn" type="button" value="Pause" onclick="pause()"/>

Javascript for the button onclick. Placed below the button. :

<script>
function pause(){
instance.pause();
}
</script>

But I got an error saying :

Uncaught TypeError: Cannot read property 'pause' of undefined at pause (phkk.html:560) at HTMLInputElement.onclick (phkk.html:177)


Solution

  • You can store it in an var and then use the function pause()

    var instance = createjs.Sound.play(event.src);
    

    Have button that calls a method that will store the pause

    <input id="pausBtn" type="button" value="Pause" onclick="pause()"/>
    

    The JS function:

    function pause(){
        instance.pause();
    }
    

    EDIT

    I went over the docs and it appears it doesn't function like that any more, so you're going to have to use the paused property

    Here's a rough outline on how it works for me:

    <script>
    
        var instance; 
    
        function load() {
            // Update the UI
            document.getElementById("display").innerText = ".";
    
    
            // Load the sound
            createjs.Sound.alternateExtensions = ["mp3"];
            createjs.Sound.addEventListener("fileload", handleFileLoad);
            createjs.Sound.registerSound({id:"mySound", src:"../../test.mp3"});
        }
    
       function handleFileLoad(event) {
           // Update the UI
           document.getElementById("display").innerHTML = ".";
           document.getElementById("stopBtn").disabled = "";
    
           // Play the loaded sound
           instance = createjs.Sound.play(event.src,{loop:2});
    
       }
    
       function pause(){
           instance.paused ? instance.paused = false : instance.paused = true;
       }
    
    
    
    </script>
    

    The HTML buttons:

    <body>
    <input id="loadBtn" type="button" value="Begin Loading" onclick="load()"/>
    <input id="stopBtn" type="button" value="Stop Playing" onclick="createjs.Sound.stop();" disabled="disabled" />
        <input id="pauseBtn" type="button" value="Pause" onclick="pause()"/>
    <label id="display">Waiting for User Input. Click "Begin Loading".</label>