{"id":19466,"date":"2022-11-06T19:42:41","date_gmt":"2022-11-06T14:12:41","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/"},"modified":"2022-11-06T19:42:41","modified_gmt":"2022-11-06T14:12:41","slug":"solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/","title":{"rendered":"[Solved] How to get each track of a playlist with the Soundcloud API?"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Soundcloud’s developer docs state that each playlist contains an array of tracks (see https:\/\/developers.soundcloud.com\/docs\/api\/reference#playlists<\/a>).<\/p>\n

You should be able to loop through the array and populate the html with the relevant values by effectively joining the code in your question together, though you will want to either use classes in the markup or generate individual IDs for each playlist (maybe something like \"playlist\"+playlist.id<\/code>).<\/p>\n

FURTHER EDIT<\/strong>: Updated to include a containing object to access methods for each track by ID reference. <\/p>\n

var track_objects = {};\n\nSC.get('\/users\/' + USER + '\/playlists', function(playlists) {\n\n  $(playlists).each(function(index, playlist) {\n\n    \/\/ Let's say you have divs with class 'playlist', adhering to the structure of the markup you imply in your question.\n    \/\/ Store reference to the current playlist\n    var $playlist = $('.playlist').eq(index);\n    \/\/ Populate with values\n    $playlist.find('h2').html(playlist.title);\n    $playlist.find('.list-of-links').append($('<li><\/li>').html('<a href=\"#\">' + playlist.title + '<\/a>'));\n    $playlist.find('.cover').append('<div><img src=\"' + playlist.artwork_url.replace('-large', '-t500x500') + '\"><\/div>');\n\n    \/\/ Maybe you would have a ul in each of your playlist divs with a class of tracks...\n    \/\/ Store reference to the track ul\n    var $tracks = $playlist.find('ul.tracks');\n\n    $(playlist.tracks).each(function(i, track) { \/\/ Use 'i' so there's no conflict with 'index' of parent loop\n\n      \/\/ Your count var is unnecessary, i is 0-indexed so just add 1 to get the track number\n      \/\/ Note use of track.id here, and different classes for start \/ stop\n      $tracks.append($('<li data-id=\"' + track.id + '\"><\/li>').html('<a href=\"#\" class=\"start\">Start<\/a> \/ <a href=\"#\" class=\"stop\">Stop<\/a>' + (i + 1) + \"https:\/\/stackoverflow.com\/\" + track.title + ' - ' + track.playback_count));\n\n    });\n\n  });\n\n});\n<\/code><\/pre>\n
EDIT:<\/strong><\/p>\n
Glad it’s working for you (I’ve been working in vanilla JS for a while so my jQuery is a little rusty…)<\/p>\n
To stream a sound, all you need to do is assign an event listener to the <a\/><\/code> element, grab the track id from the data-attribute<\/code> of the parent node, and call SC.stream<\/code> with the id variable – see example below (also see https:\/\/developers.soundcloud.com\/docs\/api\/guide#streaming<\/a>).<\/p>\n
(Note:<\/strong> changes are required to the code above – use track.id in the data-attribute as Soundcloud’s API works with the id rather than the title, and you’ll want appropriate classes for start\/stop buttons).<\/p>\n
EDITED THRICE<\/strong>: Check to see if the sound object has been stored already – if so, simply call play()<\/code> on the stored object without needing to reinstantiate the Soundcloud streaming object.<\/p>\n
\/\/ Depending on jQuery version, you may need 'live()' here\n$('a.start').on('click', function(){\n\n  var track_id = $(this).parent().attr('data-id');\n\n  if( typeof track_objects[track_id] !== 'undefined' ){\n    \/\/ We already have this one, no need to make another call to SC.stream\n    var sound = track_objects[track_id];\n    sound.play();\n  }else{\n    \/\/ First play requested - we need to load this one\n    SC.stream('\/tracks\/' + track_id, function(sound){\n      sound.play();\n      \/\/ Store sound object\n      track_objects[track_id] = sound;\n    });\n  }\n\n});\n\/\/ Depending on jQuery version, you may need 'live()' here\n$('a.stop').on('click', function(){\n\n  var track_id = $(this).parent().attr('data-id');\n\n  \/\/ In case a user clicks stop accidentally on a track that hasn't been played yet, check for undefined here too\n  if( typeof track_objects[track_id] !== 'undefined' ){\n    var sound = track_objects[track_id];\n    sound.stop();\n  }\n\n});\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            11<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How to get each track of a playlist with the Soundcloud API? <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Soundcloud’s developer docs state that each playlist contains an array of tracks (see https:\/\/developers.soundcloud.com\/docs\/api\/reference#playlists). You should be able to loop through the array and populate the html with the relevant values by effectively joining the code in your question together, though you will want to either use classes in the markup or generate individual … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1315,333,4628,4143],"class_list":["post-19466","post","type-post","status-publish","format-standard","hentry","category-solved","tag-api","tag-javascript","tag-soundcloud","tag-stream"],"yoast_head":"\n[Solved] How to get each track of a playlist with the Soundcloud API? - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to get each track of a playlist with the Soundcloud API? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Soundcloud’s developer docs state that each playlist contains an array of tracks (see https:\/\/developers.soundcloud.com\/docs\/api\/reference#playlists). You should be able to loop through the array and populate the html with the relevant values by effectively joining the code in your question together, though you will want to either use classes in the markup or generate individual ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-06T14:12:41+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to get each track of a playlist with the Soundcloud API?\",\"datePublished\":\"2022-11-06T14:12:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/\"},\"wordCount\":252,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"api\",\"javascript\",\"soundcloud\",\"stream\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/\",\"name\":\"[Solved] How to get each track of a playlist with the Soundcloud API? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-06T14:12:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to get each track of a playlist with the Soundcloud API?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to get each track of a playlist with the Soundcloud API? - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to get each track of a playlist with the Soundcloud API? - JassWeb","og_description":"[ad_1] Soundcloud’s developer docs state that each playlist contains an array of tracks (see https:\/\/developers.soundcloud.com\/docs\/api\/reference#playlists). You should be able to loop through the array and populate the html with the relevant values by effectively joining the code in your question together, though you will want to either use classes in the markup or generate individual ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/","og_site_name":"JassWeb","article_published_time":"2022-11-06T14:12:41+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to get each track of a playlist with the Soundcloud API?","datePublished":"2022-11-06T14:12:41+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/"},"wordCount":252,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["api","javascript","soundcloud","stream"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/","name":"[Solved] How to get each track of a playlist with the Soundcloud API? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-06T14:12:41+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-get-each-track-of-a-playlist-with-the-soundcloud-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to get each track of a playlist with the Soundcloud API?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=19466"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19466\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=19466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=19466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=19466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}