JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://connect.soundcloud.com/sdk-2.0.0.js"></script>
<div class="scrubberBase">
<div class="scrubberPlaying"></div>
</div>
CSS
.scrubberBase{
position:absolute;
width:300px;
height:40px;
background:#000;
}
.scrubberPlaying{
position:absolute;
width:0;
height:40px;
background: red;
z-index:1;
}
JavaScript
SC.initialize({
client_id: "6b60222c9d1a0194e0ebeb0c2a8c7205",
});
var updater, scTrack;
function updatePosition(){
var currentPosition = scTrack.getCurrentPosition();
var duration = scTrack.getDuration();
$(".scrubberPlaying").css('width', ((currentPosition / duration) * 100) + '%');
$(".scrubberBase").on("click tap", function (e) {
x = e.pageX - $(this).offset().left;
width = $(this).width();
scTrack.seek(0);
//var MyNum = (162 / 300) * 247245;//
var MyNum = (x / width) * duration;
scTrack.seek(MyNum);
//console.log((162 / 300) * 247245);
});
}
function seeker(num){
scTrack.seek(num);
}
SC.stream("/tracks/164710622", function(sound){
scTrack = sound;
scTrack.play();
//scTrack.seek(145874.55);
//scTrack.setVolume(0.01);
updater = setInterval( updatePosition, 100);
});