Soundcloud Widget API - Manual Time playback
Messing with Soundcloud widget api. https://developers.soundcloud.com/docs/api/html5-widget#methods
by trkli
HTML
<script src="https://w.soundcloud.com/player/api.js"></script>
<iframe id="track" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/249593158&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<section>
<ul>
<li><a class="track-link" href="">0:00</a> - Intro</li>
<li><a class="track-link" href="">0:10</a> - Topic 1</li>
<li><a class="track-link" href="">1:03</a> - Topic 2</li>
<li><a class="track-link" href="">5:23</a> - Topic 3</li>
<li><a class="track-link" href="">30:47</a> - Topic 2</li>
</ul>
</section>
JavaScript
var widget = SC.Widget(document.getElementById('track'));
var trackLinks = document.querySelectorAll('.track-link');
for (var i=0; i<trackLinks.length; i++) {
trackLinks[i].addEventListener('click', function(e) {
e.preventDefault();
// Note: there seems to be a weird unexpected behavior in that
// the first click doesn't actually seek if the widget isn't
// playing. I confirmed this in Soundcloud's API playground
// so if we detect we are paused, we want to trigger a play first
// before we seekTo otherwise it doesn't work at all
widget.isPaused(function(e) {
if (e) {
widget.play();
}
});
widget.seekTo(convertTimeToMs(this.innerHTML));
});
}
function convertTimeToMs(time) {
var timeSplit = time.split(':');
var hours = 0;
var minutes = 0;
var seconds = 0;
var ms = 0;
if (timeSplit.length > 2) {
hours = parseInt(timeSplit[0]);
minutes = parseInt(timeSplit[1]);
seconds = parseInt(timeSplit[2]);
} else {
minutes = parseInt(timeSplit[0]);
seconds = parseInt(timeSplit[1]);
}
ms = hours*(3600000) + minutes*(60000) + seconds*(1000);
return ms;
}