自动播放下一个类实例
我正在使用UbaPlayer，它是一个带有Flash后备的jQuery HTML5音频播放器。 目前，只有在提示的特定歌曲完成后它才会停止播放。
我希望它自动播放按时间顺序排列的下一个“audiobutton”课程。
@Winner_joiner已设法线编辑190移动到下一首歌曲<ul>但的最后一首歌后<ul>结束，它进入的第一个实例<ul class=controls> ，我想为而它继续到下一个<ul>时间顺序实例。
我有一些歌曲之间的内容，所以我必须打破<ul>并开始另一首歌曲。
这是我的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>
音频播放器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);
它似乎是lib中的一个错误（或者没有记录的特性）。
它的工作原理只有在audiobuttons是直接的兄弟姐妹（证明在jquery.ubaplayer.js线190）
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
换句话说，如果你的HTML看起来像这样（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>
它工作（与铬25 +）
我希望这有帮助。
更新1：
如果您想使用HTML，则必须将文件jquery.ubaplayer.js中的第190行更新为
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
此代码获取a-Tag = li-Tag的父级，检查它是否具有兄弟，如果是，则获取正确的音频href。
警告我只是检查代码是否运行，对于您的问题，我不知道是否会在其他使用场景中导致问题。 （顺便说一下，我只是改变HTML并离开LIB AS-IS，以便如果更新来临或没有中断更改）
更新2：
通过自动播放功能调用Ubaplayer的代码
jQuery("#ubaPlayer").ubaPlayer({
codecs: [{name:"MP3", codec: 'audio/mpeg;'}],
autoPlay:$(".audioButton").eq(0)
});