Javascript: Soundmanager2 and Soundcloud event callback

Question

I'm trying to build my own soundcloud media player, using the options provided by both SoundManager2 and Soundcloud.

Here is my current code:

SC.stream('/tracks/' + this.media.mediaId, function(audio){
            audio.load({
                onload : function(){
                    var duration = this.duration;

                },
                onfinish : function(){
                    self.updatePlayButton();
                    console.log('Finished');
                },
                onresume : function(){
                    self.updatePlayButton();
                    console.log("resumed");
                },
                onstop : function(){
                    self.updatePlayButton();
                    console.log("Stopped");
                },
                onpause : function() {
                    self.updatePlayButton();
                    console.log('Paused');
                },
                whileplaying : function()
                {
                    console.log(this.position);
                    self.updateScrubber(this.position / (this.duration / 100));
                    self.$timeLeft.text(self.formatTime(this.position / 1000));
                    console.log(totalPercent,'My position');
                }

            });
            self.audio = audio.sID;
            self.registerEvents();
        });

I play the audio using:

soundManager.getSoundById(self.audio).togglePause();

The audio play's, and all the callbacks are fired accordingly. But after the "onfinish" callback, when I hit play again it will replay the audio, but it wont fire any of the events.

What did I do wrong?

Answer 1

According to the documentation for SC.stream() the "options" object can be passed in as the second argument:

SC.stream(trackPath, [options], [callback])

The options will be associated with the soundObject itself, so you won't need to declare them again when calling individual methods such as .load() and .play()

Try making the call like this:

var myOptions = {
  onload : function() {
    var duration = this.duration;
  },
  onfinish : function(){
    self.updatePlayButton();
    console.log('Finished');
  },
  onresume : function(){
    self.updatePlayButton();
    console.log("resumed");
  },
  onstop : function(){
    self.updatePlayButton();
    console.log("Stopped");
  },
  onpause : function() {
    self.updatePlayButton();
    console.log('Paused');
  },
  whileplaying : function() {
    console.log(this.position);
    self.updateScrubber(this.position / (this.duration / 100));
    self.$timeLeft.text(self.formatTime(this.position / 1000));
    console.log(totalPercent,'My position');
  }
}

SC.stream('/tracks/' + this.media.mediaId, myOptions, function(audio){
  audio.load();
  self.audio = audio.sID;
  self.registerEvents();
});

There are some other strange-looking things about your code, such as not doing anything with the variable duration inside the onload function. Also, using a variable self while also using this ends up looking like you're not sure if you're writing Python or JavaScript, but maybe it makes sense to you.

Hopefully attaching the options to the soundObject this way will solve your immediate problem anyhow. Good luck!