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({...
})
}
});