Menu
I am using UbaPlayer, which is a jQuery HTML5 audio player with Flash fallback. Currently, it just stops after the particular song that is cued is finished.
I would like for it to autoplay the next "audiobutton" class that is chronologically listed.
@Winner_joiner has managed to edit line 190 to move to the next song in the <ul> but after the last song of that <ul> finishes, it goes to the first instance of <ul class=controls>, whereas I would like for it to continue to the NEXT chronological instance of <ul>.
I have content between some songs, so I have to break the <ul> and start another for other songs.
Here's my HTML:
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
jQuery(document).ready(function() {
jQuery.noConflict();
jQuery(function(){
jQuery("#ubaPlayer").ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}]
});
});
jQuery('a[rel=vidbox]').click(function () {
if (jQuery("#ubaPlayer").ubaPlayer("playing") === true) {
jQuery("#ubaPlayer").ubaPlayer("pause");
}
return false;
});
})
</script>
</head>
<body>
<div id="ubaPlayer"></div>
<ul class="controls">
<li><a class="audioButton" href="mp3/dontthinktwice.mp3">
Don't Think Twice (Bob Dylan)</a></li>
<li><a class="audioButton" href="mp3/livingforthecity.mp3">
Living for the City (Stevie Wonder)</a></li>
</ul>
<!-- More content and stuff here-->
<ul class="controls">
<li><a class="audioButton" href="mp3/anothersong.mp3">
Another Song</a></li>
<li><a class="audioButton" href="mp3/anothersong2.mp3">
Another Song 2</a></li>
</ul>
</body>
Audio Player JavaScript:
(function($) {
var defaults = {
audioButtonClass: "audioButton",
autoPlay: null,
codecs: [{
name: "OGG",
codec: 'audio/ogg; codecs="vorbis"'
}, {
name: "MP3",
codec: 'audio/mpeg'
}],
continuous: false,
extension: null,
flashAudioPlayerPath: "libs/swf/player.swf",
flashExtension: ".mp3",
flashObjectID: "audioPlayer",
loadingClass: "loading",
loop: false,
playerContainer: "player",
playingClass: "playing",
swfobjectPath: "libs/swfobject/swfobject.js",
volume: 1
},
currentTrack, isPlaying = false,
isFlash = false,
audio, $buttons, $tgt, $el, playTrack, resumeTrack, pauseTrack, methods = {
play: function(element) {
$tgt = element;
currentTrack = _methods.getFileNameWithoutExtension($tgt.attr("href"));
isPlaying = true;
$tgt.addClass(defaults.loadingClass);
$buttons.removeClass(defaults.playingClass);
if (isFlash) {
if (audio) {
_methods.removeListeners(window);
}
audio = document.getElementById(defaults.flashObjectID);
_methods.addListeners(window);
audio.playFlash(currentTrack + defaults.extension);
} else {
if (audio) {
audio.pause();
_methods.removeListeners(audio);
}
audio = new Audio("");
_methods.addListeners(audio);
audio.id = "audio";
audio.loop = defaults.loop ? "loop" : "";
audio.volume = defaults.volume;
audio.src = currentTrack + defaults.extension;
audio.play();
}
},
pause: function() {
if (isFlash) {
audio.pauseFlash();
} else {
audio.pause();
}
$tgt.removeClass(defaults.playingClass);
isPlaying = false;
},
resume: function() {
if (isFlash) {
audio.playFlash();
} else {
audio.play();
}
$tgt.addClass(defaults.playingClass);
isPlaying = true;
},
playing: function() {
return isPlaying;
}
},
_methods = {
init: function(options) {
var types;
//set defaults
$.extend(defaults, options);
$el = this;
//listen for clicks on the controls
$(".controls").bind("click", function(event) {
_methods.updateTrackState(event);
return false;
});
$buttons = $("." + defaults.audioButtonClass);
types = defaults.codecs;
for (var i = 0, ilen = types.length; i < ilen; i++) {
var type = types[i];
if (_methods.canPlay(type)) {
defaults.extension = [".", type.name.toLowerCase()].join("");
break;
}
}
if (!defaults.extension || isFlash) {
isFlash = true;
defaults.extension = defaults.flashExtension;
}
if (isFlash) {
$el.html("<div id='" + defaults.playerContainer + "'/>");
$.getScript(defaults.swfobjectPath, function() {
swfobject.embedSWF(defaults.flashAudioPlayerPath, defaults.playerContainer, "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, {
id: defaults.flashObjectID
}, _methods.swfLoaded);
});
} else {
if (defaults.autoPlay) {
methods.play(defaults.autoPlay);
}
}
},
updateTrackState: function(evt) {
$tgt = $(evt.target);
if (!$tgt.hasClass("audioButton")) {
return;
}
if (!audio || (audio && currentTrack !== _methods.getFileNameWithoutExtension($tgt.attr("href")))) {
methods.play($tgt);
} else if (!isPlaying) {
methods.resume();
} else {
methods.pause();
}
},
addListeners: function(elem) {
$(elem).bind({
"canplay": _methods.onLoaded,
"error": _methods.onError,
"ended": _methods.onEnded
});
},
removeListeners: function(elem) {
$(elem).unbind({
"canplay": _methods.onLoaded,
"error": _methods.onError,
"ended": _methods.onEnded
});
},
onLoaded: function() {
$buttons.removeClass(defaults.loadingClass);
$tgt.addClass(defaults.playingClass);
audio.play();
},
onError: function() {
$buttons.removeClass(defaults.loadingClass);
if (isFlash) {
_methods.removeListeners(window);
} else {
_methods.removeListeners(audio);
}
},
onEnded: function() {
isPlaying = false;
$tgt.removeClass(defaults.playingClass);
currentTrack = "";
if (isFlash) {
_methods.removeListeners(window);
} else {
_methods.removeListeners(audio);
}
if (defaults.continuous) {
var $next = $tgt.next().length ? $tgt.next() : $(defaults.audioButtonClass).eq(0);
methods.play($next);
}
},
canPlay: function(type) {
if (!document.createElement("audio").canPlayType) {
return false;
} else {
return document.createElement("audio").canPlayType(type.codec).match(/maybe|probably/i) ? true : false;
}
},
swfLoaded: function() {
if (defaults.autoPlay) {
setTimeout(function() {
methods.play(defaults.autoPlay);
}, 500);
}
},
getFileNameWithoutExtension: function(fileName) {
//this function take a full file name and returns an extensionless file name
//ex. entering foo.mp3 returns foo
//ex. entering foo returns foo (no change)
var fileNamePieces = fileName.split('.');
fileNamePieces.pop();
return fileNamePieces.join(".");
}
};
$.fn.ubaPlayer = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === "object" || !method) {
return _methods.init.apply(this, arguments);
} else {
$.error("Method " + method + " does not exist on jQuery.ubaPlayer");
}
};})(jQuery);
266
It seems to be a bug in the lib (or a not documented feature).
it works only if the audiobuttons are direct siblings (prove in line 190 in jquery.ubaplayer.js)
var $next = $tgt.next().length ? $tgt.next() : $(defaults.audioButtonClass).eq(0);
// a other unrelated bug in the same line is ... $(defaults.audioButtonClass) should be $("." + defaults.audioButtonClass) or so
with other words if your HTML looks like this( with continuous:true):
<div class="controls"> <!-- THIS IS NOW AN DIV NOT UL-->
<!-- NO LI'S since the links have to be direkt siblings-->
<a class="audioButton" href="mp3/dontthinktwice.mp3">
Don't Think Twice (Bob Dylan)</a>
<a class="audioButton" href="mp3/livingforthecity.mp3">
Living for the City (Stevie Wonder)</a>
</div>
it works(with chrome 25+)
i hope this helps.
Update 1:
if you want to use your HTML you would have to update the line 190 in the File jquery.ubaplayer.js to
var $next = $tgt.parent().next().length>0 && $tgt.parent().next().children().length>0?$tgt.parent().next().children().eq(0):$("."+defaults.audioButtonClass).eq(0);
// Code could/should be cleaned up a bit
This code gets the parent of the a-Tag = the li-Tag, checks if it has a sibling, if so gets the correct audio href.
Warning i just checked if the code runs, for your question, i donno if it causes problems in other usage scenarios. (btw. i would just change the HTML and leave the LIB AS-IS, so that if an update come or so there are no break changes)
Update 2:
Code to Call Ubaplayer with autoplay
jQuery("#ubaPlayer").ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}],
autoPlay:$(".audioButton").eq(0)
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
