How to add play pause button to Soundcloud API?

Question

I am currently working with the Soundcloud app, but I am now stuck. I am using the HTTP API not the Widget one. I import a list of tracks of each album on my site, with a play/pause button. What I want is that each play/pause button per track can be controlled.

Now on Codeacademy they will use:

SC.stream('/tracks/108816655', function(sound) {
            $('#start').click(function(e) {
                e.preventDefault();
                sound.start();
            });
            $('#stop').click(function(e) {
                e.preventDefault();
                sound.stop();
            });
        });

This is working fine, but it doesn't fit my wishes. Because how can I achieve the current trackID to play that specific song?

I came up like this. It will fit almost my wishes. It plays that specific song now and it will playing that song when you play another one. Only what I am missing is the possibility that I can pause that song of that specific track. All of this I want to do with one button and toggle that class. But I doesn't know if this is the correct way of how to achieve this.

$('.play').click(function(event) {
                event.preventDefault();

                var trackID = $(this).closest('li').attr('data-id'); // Even kijken hoe je de li kunt krijgen omdat je nested nested hebt omdat ik nu gebruik maak van td dus de parent is geen li maar td
                console.log(trackID);

                $('#playlist li').removeClass('active');
                $(this).parent().addClass('active'); 
                $(this).toggleClass('play pause');

                if (nowPlaying) {
                    nowPlaying.stop();
                }

                SC.stream('/tracks/' + trackID, function(sound) {
                    sound.play();
                    nowPlaying = sound;
                });

            });

I tried to make a JSFiddle, but I can't get the link to Soundcloud API done. Sorry for this. Here is the jsfiddle.

Before my code I use the soundcloud SC.initialize function, where I define the client_id and redirect_uri.

hwsw hwsw · Accepted Answer · 2015-06-28T09:46:46

Please take a deeper look on the SoundManager2 methods. http://www.schillmania.com/projects/soundmanager2/

Here i have a working example which demonstrates stop/start/pause:

Track = function (trackId){

    var currentTrack = "";

   SC.initialize({

        client_id: "17a992358db64d99e492326797fff3e8"
    });

    SC.stream("http://api.soundcloud.com/tracks/" + trackId, function(sound){
        currentTrack = sound;
    });

    this.play = function() {
        currentTrack.play();
    };

    this.pause = function() {
        currentTrack.pause();
    };

    this.stop = function() {
        currentTrack.stop();
    };
};

Rotation = function(tracks) {
    var currentTrack = tracks[0];

    this.currentTrack = function () {
        return currentTrack;
    };
};

$(document).ready (function(){
    var songs = [{"soundcloud_id":"108816655"},{"soundcloud_id":"79408289"}]
    var rotation = new Rotation(songs);
    var currentTrack = rotation.currentTrack();
    var currentPlayingTrack = new Track(currentTrack.soundcloud_id);

    $('#play').on('click', function(event){
        currentPlayingTrack.play();
        $('#pause').show();
        $('#play').hide();
    });

    $('#pause').on('click', function(event){
        currentPlayingTrack.pause();
        $('#pause').hide();
        $('#play').show();
    });

    $('#stop').on('click', function(event){
        currentPlayingTrack.stop();
        $('#pause').hide();
        $('#play').show();
    });        
});

http://codepen.io/bnz/pen/Qbadwg

How to add play pause button to Soundcloud API?

1 Answers