CODEWITHSUNDEEP
javascriptjqueryhtmlapisoundcloud
Caspert
Caspert

Reputation: 4363

How to add a play and stop button for each track?

I make use of the Soundcloud API to load a list of tracks in my website. What I want do know is add for each track an play and stop button to control a track. When you click a new song while playing the current song, it should stop the current one and play the new one. How can I get this done. Came up with the following, but it will give me an error of: GET https://api.soundcloud.com/tracks/stream?oauth_token=1-134590-9095247-3d1021a057c78d8 404 (Not Found) stream:1 GET https://api.soundcloud.com/tracks/stream?oauth_token=1-134590-9095247-3d1021a057c78d8 404 (Not Found).

SC.get('/users/' + USER + '/tracks', function(tracks) {

            var count = 0;

            $(tracks).each(function(index, track) {
                count++;

                $('#playlist').append($('<li></li>').html('<a href="#" id="start">Start</a> <a href="#" id="stop">Stop</a>' + count + ' / ' + track.title + ' - ' + track.playback_count));
                //$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
                $("#cover").append('<div><img src="' + track.artwork_url.replace('-large', '-t500x500') + '"></div>');


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

                $('#stop').click(function(e) {
                    e.preventDefault();
                    track.stop();
                });
            });


            });

        });

Look out for some advice. Thanks in advance. Casper

Upvotes: 3

Views: 149

Answers (1)

NightOwlPrgmr
NightOwlPrgmr

Reputation: 1374

Note: I'm not sure how to fix that error as I haven't worked with that API. However, I do see one issue with your code that will cause errors once you do append the tracks into your HTML.

Advice: Use classes instead of IDs. If you are loading more than one track onto the page with the same ID you won't have desirable results when trying to interact with them via JavaScript/jQuery.

Also, move the .click methods outside of .each. No need to repeatedly create the same event listeners for every track you append. You could probably even get away with placing these methods outside of the SC.get function.

// with classes
SC.get('/users/' + USER + '/tracks', function(tracks) {

    var count = 0;

    $(tracks).each(function(index, track) {
        count++;

        $('#playlist').append($('<li></li>').html('<a href="#" class="start">Start</a> <a href="#" class="stop">Stop</a>' + count + ' / ' + track.title + ' - ' + track.playback_count));
        //$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
        $("#cover").append('<div><img src="' + track.artwork_url.replace('-large', '-t500x500') + '"></div>');
    });

    SC.stream('/tracks', function(track) {
        $('.start').click(function(e) {
            e.preventDefault();
            track.start();
        });

        $('.stop').click(function(e) {
            e.preventDefault();
            track.stop();
        });
    });
});

You can do this with IDs if you prefer, but you will have to change how you are setting the IDs to make them unique:

// with IDs
SC.get('/users/' + USER + '/tracks', function(tracks) {

    var count = 0;

    $(tracks).each(function(index, track) {
        count++;

        $('#playlist').append($('<li></li>').html('<a href="#" id="start_' + count + '">Start</a> <a href="#" id="stop_' + count + '">Stop</a>' + count + ' / ' + track.title + ' - ' + track.playback_count));
        //$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
        $("#cover").append('<div><img src="' + track.artwork_url.replace('-large', '-t500x500') + '"></div>');
    });

    SC.stream('/tracks', function(track) {
        $('[id^="start_"]').click(function(e) {
            e.preventDefault();
            track.start();
        });

        $('[id^="stop_"]').click(function(e) {
            e.preventDefault();
            track.stop();
        });
    });
});

Upvotes: 1

Related Questions