Soundmanager2 mp3 player button preload next sound

Question

I use Soundmanager2's mp3 player button to play mp3s links on my website. I used the following modifcation in-order to preload the next mp3 during playing the current mp3.

play: function() {
sm.load('basicMP3Sound'+(1*this._data.oLink.title)+1);
      //mycode end
      pl.removeClass(this._data.oLink,this._data.className);
      this._data.className = pl.css.sPlaying;
      pl.addClass(this._data.oLink,this._data.className);

},

In the above example you may notce that the title tag in this._data.oLink.title which I added it to the mp3 link to handle files order in simple way, for example:

<a href="/quran/assets/audio/Menshawi_16kbps/002001.mp3" class="sm2_button" title="0">/002001.mp3</a>

However, I noticed that the next mp3 link does not preloaded during playing the current mp3. This is because the next mp3 does not being played contiousely or start played after finish playing its previous mp3. In other word, it takes some time or delay to be downloaded.

Is there something wrong in my code? or what are your suggestions?

Notice a life demo of this mp3 layer is found in this link

Answer 1

Edit: Approach to work with the SoundManager inline button player

In your setup params in mp3-player-button.js under config, where playNext : true|false is found (line 39), update it to look like this:

...
this.config = {
    // configuration options
    playNext: true, // stop after one sound, or play through list until end
    autoPlay: false,  // start playing the first sound right away
    preloadNext :  true // preload next sound when previous sound starts to play
};
...

Then, further down under the this.events object (line 96), modify the play function to preload the next sound:

...
this.events = {

// handlers for sound events as they're started/stopped/played

play: function() {
  pl.removeClass(this._data.oLink,this._data.className);
  this._data.className = pl.css.sPlaying;
  pl.addClass(this._data.oLink,this._data.className);

  if (pl.config.preloadNext) {
    var nextLink = (pl.indexByURL[this._data.oLink.id]+1);
    if (nextLink<pl.links.length) {
     sm.load(nextLink)
    }
  }
 },
...

In summary, when a song starts, we check to see if there's a next song; if there is, we pull its id from the array of sounds that was created when we instantiated SoundManager. In this case, SoundManager is sm, so we simply pass the id of our next song to the sm.load() function.

Here is a live demo: http://plnkr.co/edit/mpBkfDIrLNduMAWJjRfN.

---

Try this approach:

Using the onplay and onfinish events of the createSound method, you can chain a series files which delegate each other.

Explicitly telling firstSound: "when you start to play, preload the next sound, and when you finish playing, play that next sound"

JavaScript

var firstSound = soundManager.createSound({
    id: 'firstSound',
    url: 'path/to/your/firstSound.mp3'
});
var secondSound = soundManager.createSound({
    id: 'secondSound',
    url: 'path/to/your/secondSound.mp3'
});
// Kickoff first sound
firstSound.load();
// Define the chain of events
firstSound.play({
    onplay: function () {
        // When `firstSound` starts, preload `secondSound`
        secondSound.load();
    },
    onfinish: function () {
        // Repeat, with next sound
        secondSound.play({...
        })
    }
});