JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div id="sc"></div>

JavaScript

$.get('https://api.soundcloud.com/tracks/?client_id=91bd52531c9b150e11efac29abdb79eb&format=json', { q: 'dubstep', duration: { from: 1800000 }, downloadable: 'true' }, function(tracks) {
                console.log(tracks);

        output = '';    

        for (var i = 0; i < tracks.length; i++) {
            output += '<div class=track><a href='+tracks[i].permalink_url+' alt="Permalink to '+tracks[i].title+'"><img class=artwork src='+tracks[i].artwork_url+' alt='+tracks[i].title+' /></a><div class="clearfix meta"><h1>'+tracks[i].title+'</h1><p class="metadata"><span class="ss-icon">Time</span> {$timing} | <span class="ss-icon">play</span> '+tracks[i].playback_count+' | <span class="ss-icon">download</span> '+tracks[i].download_count+'</p><audio controls="controls" preload="none"><source src='+tracks[i].stream_url+'?client_id=91bd52531c9b150e11efac29abdb79eb type="audio/mpeg">Your browser does not support the audio element.</audio><!-- download button --><a href='+tracks[i].download_url+'?client_id=91bd52531c9b150e11efac29abdb79eb class="ss-icon btn">download</a></div></div>'
        }

        $('#sc').html(output);
    });