JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.player{
    width:200px;
    height:100px;
    border:1px solid red;
    margin:10px;
    float:left;
    overflow:hidden;
}
.playBTN{
    width:100%;
    height:50px;
    background:red;
    -webkit-box-shadow: inset 0 0 10px #000000;
    text-align:center;
    line-height: 50px;
}
.title{
    padding:10px;
    
}

JavaScript

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

for(index = 0; index < $(".player").length; index++){
    trackURL = $(".player").eq(index).text();
    alert(trackURL);
    $(".player").eq(index).empty();
	$(".player").eq(index).append("<div class='playBTN'>Play</div>");
	$(".player").eq(index).append("<div class='title'></div>");
SC.get('/resolve', { url: trackURL }, function (track) {
    var trackId = track.id;
    //var trackTitle = track.title;
    $(".title").eq(index).text(track.title);

    $(".playBTN").eq(index).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);
    });
});
}
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;
    }
}