I would like to allow a sound file to play and pause. The documentation shows how to play a streaming file:

    $("#stream").live("click", function(){      
          SC.stream("/tracks/{'track-id'}", function(sound){
             sound.play();
          };

It uses Sound Manager to stream and uses some of it's objects and methods... like .pause()!

So here's the code i think should work:

    var is_playing="false";

    $("#stream").live("click", function(){

        SC.stream("/tracks/{'track-id'}", function(sound){
            if (is_playing==="true")
                {
                    sound.pause();
                    is_playing = "false";
                    console.log(is_playing);
                }
            else if (is_playing === "false")
                {
                    sound.play();
                    is_playing = "true";
                    console.log(is_playing);
                }

            });

However, it continues to play the track without pausing. Any ideas? Thanks.

I would like to allow a sound file to play and pause. The documentation shows how to play a streaming file:

    $("#stream").live("click", function(){      
          SC.stream("/tracks/{'track-id'}", function(sound){
             sound.play();
          };

It uses Sound Manager to stream and uses some of it's objects and methods... like .pause()!

So here's the code i think should work:

    var is_playing="false";

    $("#stream").live("click", function(){

        SC.stream("/tracks/{'track-id'}", function(sound){
            if (is_playing==="true")
                {
                    sound.pause();
                    is_playing = "false";
                    console.log(is_playing);
                }
            else if (is_playing === "false")
                {
                    sound.play();
                    is_playing = "true";
                    console.log(is_playing);
                }

            });

However, it continues to play the track without pausing. Any ideas? Thanks.

• javascript
• jquery
• soundcloud
• soundmanager2

• var is_playing="false".. You should use booleans. – dfsq Commented Feb 28, 2013 at 17:52
• 1 True. However, this has not solved the issue. – bkbarton Commented Feb 28, 2013 at 17:55

5 Answers 5

var is_playing = false;
soundManager.setup({
    url: '/swf/soundmanager2.swf',
    preferFlash: false,
    onready: function() {
        var mySound = soundManager.createSound({
            id: 'aSound',
            url: 'sonidos/sonido1.mp3' ,
            autoplay: false
        });

        $("#stream").live("click", function(){    
            if (is_playing==false){
                    mySound.play();
                    is_playing = true;
                }else if (is_playing== true) {
                    mySound.stop();
                    is_playing = false;
             }
        });
    },
    /*    ontimeout: function() {
    // Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
    }*/
});
</script>

You have to use sound.stop(); There is also a built in function to toggle play/pause of a sound. Use sound.togglePause(); to do that.

SC.stream("/tracks/13680213", function(sound) {
    SC.sound = sound;
});

This means you aren't writing event listeners inside your SC.stream constructor then you can access the following (and more) at will:

SC.sound.play(); SC.sound.pause(); SC.sound.stop(); SC.sound.pause(); SC.sound.playState;

Since there are very few answers on this subject, I thought I would answer my own question.

I went ahead and downloaded Sound Manager 2 and placed the necessary files where they needed to be (you can find this in the basic tutorials section of the sound manager2 page.)

http://www.schillmania./projects/soundmanager2/demo/template/

The trick wass to locate the SoundCloud mp3 associated with the user I wanted to embed. To do this, I had to use a RESTClient and enter the appropriate api url. It looks like this.

http://api.soundcloud./tracks/12758186.json?client_id={MyClient_ID_number}

The http://api.soundcloud./tracks/ is a general pointer to the track id="12758186". This is followed by the JSONP inclusion of my personal client_id to validate my request to the soundcloud server.

Once I had this url, I tried it in my browser and it redirected me to ** another url ** with an HTML5 mp3 player, which automatically played the song.

I got the idea to do this from this soundcloud doc: http://developers.soundcloud./docs#playing

I then copied this url and mashed the code from my original question to the basic tutorial mentioned above (http://www.schillmania./projects/soundmanager2/demo/template/).

Final Code:

            var is_playing = false;

            $("#stream").live("click", function(){
                soundManager.setup({
                  url: './swf/soundmanager2.swf',
                  onready: function() {
                    var mySound = soundManager.createSound({
                      id: 'aSound',
                      url: {**another url**},
                      autoplay: false
                    });
                    if (is_playing===false)
                        {
                            mySound.play();
                            is_playing = true;
                        }
                    else if (is_playing=== true)    
                        {
                            mySound.stop();
                            is_playing = false;
                        }

                  },
                  ontimeout: function() {
                    // Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
                  }
                });
            });

Simply link the event which you would like to trigger the pause function to the "sound" object which is passed into SC.stream()'s callback function.

The form in the following code accepts a sound cloud link such as this one: https://soundcloud./djalmix-1/living-in-stereo-dj-almix (so paste that in to the form once the app is live and click load). Also you must provide your own client_id that soundcloud gives you when you register your app, this takes only a minute or so.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script src="http://connect.soundcloud./sdk.js"></script>
        <script>
            function load_sound() {             
                var track_url = document.getElementById("sc_url").value;
                    SC.initialize({
                        client_id: 'client_id'
                            });
                            SC.get('/resolve', {url: track_url}, function(track) {
                                console.log("the track id is: " + track.id);
                                SC.stream("/tracks/" + track.id, function(sound) {
                                    var is_playing = true;
                                    sound.play();
                                    document.getElementById("stream").onclick = function(){  
                                        if(is_playing === false){
                                            sound.resume();
                                            is_playing = true;
                                        } else if(is_playing === true){
                                            sound.pause();
                                            is_playing = false;
                                        }   
                                    };                                  
                                });
                            });
                        }              
        </script>
        <form>
            <input id="sc_url" type="url">
            <input type="button" onclick="load_sound();" value="load">
        </form>
        <button id="stream">pause/resume</button>
    </body>
</html>