Soundcloud HTML5 widget continuous play

Question

I'm trying to get the SoundCloud HTML5 player widget to automatically start and seek to a specific track and position but no matter what I try it doesn't work.

I'm using the API code below:

<iframe width="100%" height="450" scrolling="no" id="soundcloud-player" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3058825&amp;color=00be53&amp;auto_play=false&amp;show_artwork=true"></iframe>
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>

 <script type="text/javascript">

 (function(){
    var widgetIframe = document.getElementById('soundcloud-player'),
    widget       = SC.Widget(widgetIframe);

    widget.bind(SC.Widget.Events.READY, function() {

       widget.play();
       widget.seekTo('5000');

    });


  widget.bind(SC.Widget.Events.PLAY, function() {        

    // get information about currently playing sound
    widget.getCurrentSound(function(currentSound) {
      console.log('sound ' + currentSound.title + 'began to play');
    });
});  }());

What I'm basically trying to accomplish is have the player automatically seek to the same spot when the user switches between pages on the site. I plan on reading from a cookie, the position and track and then using the method above. Any help would be greatly appreciated!

Answer 1

The problem is most probably related to the sound not being fully loaded at the moment when you are trying to call seekTo. You can easily verify this by adding the following bit to your code:

// …
widget.bind(SC.Widget.Events.READY, function() {
  widget.play();
  // Note setTimeout here!
  // This will now work since the needed part of the sound 
  // will have loaded after the timeout
  setTimeout(function () { 
    widget.seekTo('5000'); 
  }, 1000);
});
// …

But since you don't really want to have arbitrary timeout in your code, it's a good idea to attach event handler to progress event:

widget.bind(SC.Widget.Events.LOAD_PROGRESS, function onLoadProgress (e) {
  if (e.loadedProgress && e.loadedProgress === 1) {
    widget.seekTo(15000); // seek to previous location
    widget.unbind(SC.Widget.Events.LOAD_PROGRESS);
  }
});

Here's a working version of this code http://jsbin.com/ebeboj/2/edit

Also, in case you have very long tracks, you could also retrieve duration from the sound (via getCurrentSound), check at what point in range from 0 to 1 the track has stopped playing and only wait for that value (since loadedProgress === 1 might take a while), something like:

widget.getCurrentSound(function(currentSound) {
  // currrentSound.duration is 269896 for the first track of your playlist
  relativePreviousPlay = previousPlay / currentSound.duration; // ~0.204
});

widget.bind(SC.Widget.Events.LOAD_PROGRESS, function onLoadProgress (e) {
  if (e.loadedProgress && e.loadedProgress > relativePreviousPlay) {
    widget.seekTo(previousPlay); // seek to previous location
    widget.unbind(SC.Widget.Events.LOAD_PROGRESS);
  }
});    

Check out working example for the last bit of code here http://jsbin.com/ebeboj/4/edit

Sidenote: I'd recommend using localStorage over cookies for storing previous position of playback, because cookies will travel back and forth from client to server slowing down your website, and you likely don't need the information on the sever side.