JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://connect.soundcloud.com/sdk.js"></script>
<button onClick="playIt()">Play</button>

<div class="seekBase">
    <div class="secPlayed"></div>
    <div class="seekLoad"></div>
</div>


<ul class="list">
    <li id="147310720">Song 1</li>
    <li id="155552335">Song 2</li>
    <li id="98597608">Song 3</li>
</ul>

CSS

li {
    height: 100px;
    background:grey;
    color:white;
    margin-top:10px;
}
.seekBase {
    width:300px;
    height:20px;
    background:black;
}
.seekLoad {
    width:0;
    height:20px;
    background:grey;
    z-index:1;
}
.secPlayed {
    float:left;
    font-size:22px;
    line-height:22px;
    color:white;
    z-index:100;
}

JavaScript

SC.initialize({
    client_id: 'b8f06bbb8e4e9e201f9e6e46001c3acb'
});
var id;

$(".list li").click(function () {
    id = $(this).attr("id");
    playIt(id);
});
function playIt(id) {
    if(typeof(soundManager) !== 'undefined'){
        soundManager.stopAll();
    }
    
    SC.stream("/tracks/" + id, function (sound) {
        sound.play({
            whileplaying: function () {
                $(".seekLoad").css('width', ((sound.position / sound.duration) * 100) + '%');
                $(".secPlayed").text(converter(sound.position));
            },
        });
    });
}




//Convert milliseconds
function converter(duration) {
    var milliseconds = parseInt((duration % 1000) / 100),
        seconds = parseInt((duration / 1000) % 60),
        minutes = parseInt((duration / (1000 * 60)) % 60),
        hours = parseInt((duration / (1000 * 60 * 60)) % 24);

    hours = (hours < 10) ? "0" + hours : hours;
    minutes = (minutes < 10) ? " " + minutes : minutes;
    seconds = (seconds < 10) ? "0" + seconds : seconds;

    return minutes + "." + seconds;
}