JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<script src="http://connect.soundcloud.com/sdk-2.0.0.js"></script>
<a href="#">https://soundcloud.com/zhu/faded</a>
<div>https://soundcloud.com/amirtataloo/mamane-to</div>
<div>https://soundcloud.com/zhu/faded</div>

JavaScript

SC.initialize({
    client_id: "6b60222c9d1a0194e0ebeb0c2a8c7205",
});

var trackId;
$.fn.greenify = function() {
    
    var trackURL = this.text(), $this = this;
    this.empty();
    var title;
    SC.get('/resolve', { url: trackURL }, function (track) {
    	title = track.title;
        trackId = track.id;
        
        
        $this.text(title);
        
        $this.on('click tap', function () {
        //trackId = $(".DSPlayer").attr('id');
        	stream(trackId);
    	});
        
        
        
        // first do async action
    SC.stream("/tracks/" + trackId, {
        useHTML5Audio: true,
        preferFlash: false
    }, function (goz) {
        soundToPlay = goz;
        sound = soundToPlay;
        scTrack = sound;
        //updater = setInterval( updatePosition, 100);
    });
        
    });
   

};
 
//$( "a" ).greenify(); // Makes all the links green.
$( "div" ).greenify();


var is_playing = false,
    sound;

function stream(trackId) {
    scTrack = sound;
    if (sound) {
        if (is_playing) {
            sound.pause();
            is_playing = false;
            //$(".playBTN").text("Play");
        } else {
            sound.play();
            is_playing = true;
            //$(".playBTN").text("Pause");
        }
    } else {
        is_playing = true;
    }
}