我根据此处的指南使用jquery构建了一个自定义HTML5音频播放器：http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/
我的脚本如下：
jQuery(document).ready(function() {
audio = jQuery('div#artificial-brothers audio').get(0);
loadingIndicator = jQuery('div#artificial-brothers #loading');
positionIndicator = jQuery('div#artificial-brothers #handle');
timeleft = jQuery('div#artificial-brothers #timeleft');
if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
jQuery(audio).bind('progress', function() {
var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
loadingIndicator.css({width: loaded + '%'});
});
} else {
loadingIndicator.remove();
}
jQuery(audio).bind('timeupdate', function() {
var rem = parseInt(audio.duration - audio.currentTime, 10),
pos = (audio.currentTime / audio.duration) * 100,
mins = Math.floor(rem/60,10),
secs = rem - mins*60;
timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs));
//if (!manualSeek) {
positionIndicator.css({width: pos + '%'});
// }
//if (!loaded) {
// loaded = true;
jQuery('div#artificial-brothers #gutter').slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: audio.duration,
animate: true,
slide: function() {
manualSeek = true;
},
stop:function(e,ui) {
manualSeek = false;
audio.currentTime = ui.value;
}
});
}).bind('play',function(){
jQuery('div#artificial-brothers #playtoggle').addClass('playing');
}).bind('pause ended', function() {
jQuery('div#artificial-brothers #playtoggle').removeClass('playing');
});
jQuery('div#artificial-brothers #playtoggle').click(function() {
if (audio.paused) { audio.play(); }
else { audio.pause(); }
});
jQuery('div#artificial-brothers #stoptoggle').click(function() {
if (audio.play) { audio.pause(); }
audio.currentTime = 0;
});
});
我的问题是我需要在同一页面上运行所述播放器的多个实例，而我似乎无法实现这一点。我已经尝试复制/粘贴脚本并更改id（人工兄弟），但只有最后编写的脚本才会真正起作用。关于如何在页面上多次调用播放器的任何想法都会很棒！
//卡斯帕
编辑：根据@charlieftl提供的信息，我的代码现在看起来像这样：
jQuery(document).ready(function() {
jQuery('.player').each(function(){
var container = jQuery(this);
var audio = container.find('audio').get(0);
var loadingIndicator = container.find('.loading');
var positionIndicator = container.find('.handle');
var slider = container.find('.gutter');
var timeleft = container.find('.timeleft');
if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
jQuery(audio).bind('progress', function() {
var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
loadingIndicator.css({width: loaded + '%'});
});
} else {
loadingIndicator.remove();
}
jQuery(audio).bind('timeupdate', function() {
var rem = parseInt(audio.duration - audio.currentTime, 10),
pos = (audio.currentTime / audio.duration) * 100,
mins = Math.floor(rem/60,10),
secs = rem - mins*60;
timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs));
//if (!manualSeek) {
positionIndicator.css({width: pos + '%'});
// }
//if (!loaded) {
// loaded = true;
slider.slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: audio.duration,
animate: true,
slide: function() {
manualSeek = true;
},
stop:function(e,ui) {
manualSeek = false;
audio.currentTime = ui.value;
}
});
});
container.find('.playtoggle').click(function() {
if (audio.paused) { audio.play(); }
else { audio.pause(); }
});
container.find('.stoptoggle').click(function() {
if (audio.play) { audio.pause(); }
audio.currentTime = 0;
});
jQuery(audio).bind('play',function(){
container.find('.playtoggle').addClass('playing');
});
jQuery(audio).bind('pause ended', function() {
container.find('.playtoggle').removeClass('playing');
});
});
});
答案 0 :(得分：0)
根据您对jQuery选择器的使用判断，我怀疑您在页面中重复了元素ID。 ID必须是唯一的，因此大多数选择器应该只反映元素的实际ID。当元素具有ID时，从来没有任何理由在更高级别启动选择器...... ID本身是最有效的选择器
您的代码中的Exmple：
jQuery('div#artificial-brothers #loading');
应该是：
jQuery('#loading');
要解决您的问题，您需要将重复ID更改为类。将音频的每个html实例包含在具有公共类
的容器中 <div class="audio_wrap">
<!--All html associated with a single audio-->
</div>
现在，您可以使用$.each遍历所有这些实例。在循环中，您始终只搜索该实例中的元素。
以下不是对所有代码的完全重写，但足以设置一个允许您保持实例彼此隔离的模式的示例
$('.audio_wrap').each(function(){
/* cache the container instance in a variable*/
var $container=$(this);
/* searching within the container instance for each
component insulates multiple instances on page*/
var $audio= $container.find('audio');
var $slider=$container.find('.sliderClass');
/*now events will only be bound to this instance*/
$audio.bind('play',function(){
/* within event callbacks keep searches within the main container element*/
$container.find('.playtoggleClass').addClass('playing');
});
});