JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="http://fonts.googleapis.com/css?family=Oswald"></script>
<div class="seekBase">
    <div class="endPlayed">3:23</div>
    <div class="secPlayed">1:34</div>
    <div class="seekLoad"></div>
</div>
<button onClick="playIt()">Play</button>

CSS

.seekBase {
    width:300px;
    height:20px;
    background:black;
}
.seekLoad {
    width:0;
    height:20px;
    background:#580000;
    z-index:1;
}
.endPlayed {
    float:right;
    font-family:'Oswald', sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: white;
    z-index: 100;
    cursor: default;
    padding: 1px 4px 0 0;
}
.secPlayed {
    float: left;
    font-family:'Oswald', sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: white;
    z-index: 100;
    cursor: default;
    padding: 1px 0 0 4px;
}

JavaScript

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

function playIt() {
    SC.stream("/tracks/155552335", function (sound) {
        sound.play({
            whileplaying: function () {
                $(".seekLoad").css('width', ((sound.position / sound.duration) * 100) + '%');
                $(".secPlayed").text(converter(sound.position, "."));
                $(".endPlayed").text(converter(sound.duration, ":"));
            },
        });
        $(".seekBase").click(function (e) {
            x = e.pageX - $(this).offset().left,
            width = $(this).width(),
            duration = sound.durationEstimate;
            sound.setPosition((x / width) * duration);
        });

    });
}



function converter(duration, sign) {
    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 + sign + seconds;
}