How do I add a play and stop button for each track?
I am using the Soundcloud API to load a list of tracks on my website. What I want to know is add a play and stop button for each track to control the track. When you press a new song while the current song is playing, it should stop the current song and play the new one. How can i do this. Call the next, but it will give me an error: 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();
});
});
});
});
Follow the tips. Thank you in advance. Casper
source to share
Note. I'm not sure how to fix this error as I didn't work with this API. However, I see one problem with your code that will throw errors after adding tracks to your HTML.
Tip: Use classes instead of identifiers. If you upload more than one track per page with the same id, you won't have the desired results when trying to interact with them via JavaScript / jQuery.
Also move the methods .click
out .each
. You don't have to re-create the same event listeners for every track you add. You might even be able to move these methods outside of the function SC.get
.
// 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 want, but you have to change the way you set 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();
});
});
});
source to share