在同一网页上使用多个 audio.js 播放列表播放器？
Using multiple audio.js playlist players on the same webpage?
我正在使用 kolber.github.io/audiojs/demos/test6.html audio.js 播放列表播放器（示例 5）。效果很好。但是，我想在同一个页面上使用它的两个实例。
我试过了，第二个实例播放器只显示一个旋转的圆圈（而不是播放箭头）..如果你 select 第二组中的任何歌曲，它播放，但显示就像在第一个玩家上玩一样。
您可以在此处在线查看我的尝试：www.allanzavod.com/test-music3.htm
你能告诉我是否遗漏了什么吗？或者 不可能 有 多个玩家 同时具有 播放列表选项 。 （我知道你可以让多个播放器 没有播放列表 - 如 'Custom markup/css' 的示例 2 所示：kolber.github.io/audiojs/demos/test2.html）。
最初，我猜测问题出在我有两个 id="wrapper" 的 div（来自原始代码示例）。但我认为当我更改 ID 的名称时，它不会与 javascript 融合在一起。
有什么建议吗？任何帮助将不胜感激！
（抱歉，我尝试了一个小时来设置 jsfiddle，但就是无法让外部参考对其起作用。希望您能从现场示例中看到足够的信息：www.allanzavod.com/test-music3.htm）
这是代码片段：
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
* {padding: 0; margin: 0;}
@font-face {
font-family: 'BD Graduate';
src: url('fonts/bdgrad.eot'); /* EOT file for IE */
src: local('BD Graduate'), url('fonts/bdgrad.ttf') format('truetype');
}
HTML, BODY {
scrollbar-base-color: #90373A;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-arrow-color: #000000;
}
html {
height: 100%;
margin-bottom: 1px;
background-color: #000;
background-image: url("images/zavod_dark_back3_tile.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center top;
}
body {
margin-width: 0px;
margin-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
/* background-image: url("images/zavod_dark_back5b.jpg"); */
background-image: url("images/zavod_dark_back6b.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 30px;
font-family: Arial, Helvetica, sans-serif;
color: #B4B4B4; /* sets the default type color */
}
a {
color: #fff;
/* color: #90373A; */
text-decoration: underline;
}
a:hover {
color: #FBDDA0;
text-decoration: none;
}
a.darklink {
color: #fff;
text-decoration: underline;
}
a.darklink:hover {
color: #FBDDA0;
text-decoration: none;
}
p {
line-height: 140%;
color: #B4B4B4;
font-size: 14px;
font-weight: normal;
}
ul {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
margin-right: 10px;
}
ol {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
}
#album1wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
#album1wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
#album1wrapper h1 em { font-style: normal; color: #999; }
#album1wrapper a { color: #888; text-decoration: none; }
#album1wrapper { width: 400px; margin: 0px auto 40px auto; }
#album1wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
#album1wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
#album1wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
#album1wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
#album1wrapper li.playing a { color: #fff; }
#album1wrapper li.playing:before { content: '6C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }
@media screen and (max-device-width: 480px) {
#album1wrapper { position: relative; left: -3%; }
}
#album2wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
#album2wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
#album2wrapper h1 em { font-style: normal; color: #999; }
#album2wrapper a { color: #888; text-decoration: none; }
#album2wrapper { width: 400px; margin: 0px auto 40px auto; }
#album2wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
#album2wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
#album2wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
#album2wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
#album2wrapper li.playing a { color: #fff; }
#album2wrapper li.playing:before { content: '6C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }
@media screen and (max-device-width: 480px) {
#album2wrapper { position: relative; left: -3%; }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://www.allanzavod.com/audiojs/audio.js"></script>
</head>
<body OnLoad="window.focus();">
<br clear="all" /><br />
<br clear="all" /><br />
<div id="album1wrapper">
<h1>wait what - notorious xx <em>(2009)</em></h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
</ol>
</div>
<br clear="all" /><br />
<br clear="all" /><br />
<div id="album2wrapper">
<h1>wait what - notorious xx <em>(2009)</em></h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
</ol>
</div>
</body>
</html>
您仅将事件附加到第一个 <audio> 元素。 javascript 的每个部分都需要使用 .closest()、$.each()、.each()、.index() 对每个 <audio> 元素和 audio 变量进行过滤任务, .find()
$(function() {
var a = audiojs.createAll({
trackEnded: function() {
var el = $(this.element);
var next = el.closest(".audiojs").next('ol').find("li.playing").next();
if (!next.length) next = el.closest(".audiojs").next("ol").find("li").first();
next.parent().find(".playing").removeClass("playing");
next.addClass('playing');
el.attr("src", $('> a', next).attr('data-src'));
el.on("canplay", function() {
this.play()
})
}
});
// Load in the first track
var audio = a;
$.each(audio, function(index, el) {
var first = $(el.wrapper).next("ol").find("li:first")
.addClass("playing").find("a").attr("data-src");
el.load(first);
});
// Load in a track on click
$('ol li').click(function(e) {
var index = $(this).closest("ol").index("ol");
e.preventDefault();
$(this).addClass('playing').siblings()
.removeClass('playing');
var el = $('> a', this);
el.attr("src", el.attr('data-src'));
el.on("canplay", function() {
this.play()
})
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
var elems = $('li.playing');
elems.each(function(i, el) {
var curr = $(el);
// right arrow
if (unicode == 39) {
var next = curr.next();
if (!next.length) {
next = curr.closest("ol").find("li").first();
next.click();
}
// back arrow
} else if (unicode == 37) {
var prev = curr.prev();
if (!prev.length) {
prev = curr.closest("ol").find("li").last();
prev.click();
}
// spacebar
} else if (unicode == 32) {
$.each(audio, function(i, media) {
media.playPause();
})
}
})
})
});
* {
padding: 0;
margin: 0;
}
@font-face {
font-family: 'BD Graduate';
src: url('fonts/bdgrad.eot');
/* EOT file for IE */
src: local('BD Graduate'), url('fonts/bdgrad.ttf') format('truetype');
}
HTML,
BODY {
scrollbar-base-color: #90373A;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-arrow-color: #000000;
}
html {
height: 100%;
margin-bottom: 1px;
background-color: #000;
background-image: url("images/zavod_dark_back3_tile.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center top;
}
body {
margin-width: 0px;
margin-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
/* background-image: url("images/zavod_dark_back5b.jpg"); */
background-image: url("images/zavod_dark_back6b.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 30px;
font-family: Arial, Helvetica, sans-serif;
color: #B4B4B4;
/* sets the default type color */
}
a {
color: #fff;
/* color: #90373A; */
text-decoration: underline;
}
a:hover {
color: #FBDDA0;
text-decoration: none;
}
a.darklink {
color: #fff;
text-decoration: underline;
}
a.darklink:hover {
color: #FBDDA0;
text-decoration: none;
}
p {
line-height: 140%;
color: #B4B4B4;
font-size: 14px;
font-weight: normal;
}
ul {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
margin-right: 10px;
}
ol {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
}
#album1wrapper {
color: #666;
font-family: sans-serif;
line-height: 1.4;
}
#album1wrapper h1 {
color: #444;
font-size: 1.2em;
padding: 0px 2px 12px;
margin: 0px;
}
#album1wrapper h1 em {
font-style: normal;
color: #999;
}
#album1wrapper a {
color: #888;
text-decoration: none;
}
#album1wrapper {
width: 400px;
margin: 0px auto 40px auto;
}
#album1wrapper ol {
padding: 0px;
margin: 0px;
list-style: decimal-leading-zero inside;
color: #ccc;
width: 460px;
border-top: 1px solid #ccc;
font-size: 0.9em;
}
#album1wrapper ol li {
position: relative;
margin: 0px;
padding: 9px 2px 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
#album1wrapper ol li a {
display: inline-block;
text-indent: -3.3ex;
padding: 0px 0px 0px 20px;
}
#album1wrapper li.playing {
color: #aaa;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
#album1wrapper li.playing a {
color: #fff;
}
#album1wrapper li.playing:before {
content: '6C';
width: 14px;
height: 14px;
padding: 3px;
line-height: 14px;
margin: 0px;
position: absolute;
left: -24px;
top: 9px;
color: #fff;
font-size: 13px;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}
@media screen and (max-device-width: 480px) {
#album1wrapper {
position: relative;
left: -3%;
}
}
#album2wrapper {
color: #666;
font-family: sans-serif;
line-height: 1.4;
}
#album2wrapper h1 {
color: #444;
font-size: 1.2em;
padding: 0px 2px 12px;
margin: 0px;
}
#album2wrapper h1 em {
font-style: normal;
color: #999;
}
#album2wrapper a {
color: #888;
text-decoration: none;
}
#album2wrapper {
width: 400px;
margin: 0px auto 40px auto;
}
#album2wrapper ol {
padding: 0px;
margin: 0px;
list-style: decimal-leading-zero inside;
color: #ccc;
width: 460px;
border-top: 1px solid #ccc;
font-size: 0.9em;
}
#album2wrapper ol li {
position: relative;
margin: 0px;
padding: 9px 2px 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
#album2wrapper ol li a {
display: inline-block;
text-indent: -3.3ex;
padding: 0px 0px 0px 20px;
}
#album2wrapper li.playing {
color: #aaa;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
#album2wrapper li.playing a {
color: #fff;
}
#album2wrapper li.playing:before {
content: '6C';
width: 14px;
height: 14px;
padding: 3px;
line-height: 14px;
margin: 0px;
position: absolute;
left: -24px;
top: 9px;
color: #fff;
font-size: 13px;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}
@media screen and (max-device-width: 480px) {
#album2wrapper {
position: relative;
left: -3%;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.allanzavod.com/audiojs/audio.js"></script>
</head>
<body onload="window.focus();">
<br clear="all" />
<br />
<br clear="all" />
<br />
<div id="album1wrapper">
<h1>Album 1</h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a>
</li>
</ol>
</div>
<br clear="all" />
<br />
<br clear="all" />
<br />
<div id="album2wrapper">
<h1>Album 2</h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a>
</li>
</ol>
</div>
</body>
</html>
我正在使用 kolber.github.io/audiojs/demos/test6.html audio.js 播放列表播放器（示例 5）。效果很好。但是，我想在同一个页面上使用它的两个实例。
我试过了，第二个实例播放器只显示一个旋转的圆圈（而不是播放箭头）..如果你 select 第二组中的任何歌曲，它播放，但显示就像在第一个玩家上玩一样。
您可以在此处在线查看我的尝试：www.allanzavod.com/test-music3.htm
你能告诉我是否遗漏了什么吗？或者 不可能 有 多个玩家 同时具有 播放列表选项 。 （我知道你可以让多个播放器 没有播放列表 - 如 'Custom markup/css' 的示例 2 所示：kolber.github.io/audiojs/demos/test2.html）。
最初，我猜测问题出在我有两个 id="wrapper" 的 div（来自原始代码示例）。但我认为当我更改 ID 的名称时，它不会与 javascript 融合在一起。
有什么建议吗？任何帮助将不胜感激！
（抱歉，我尝试了一个小时来设置 jsfiddle，但就是无法让外部参考对其起作用。希望您能从现场示例中看到足够的信息：www.allanzavod.com/test-music3.htm）
这是代码片段：
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
* {padding: 0; margin: 0;}
@font-face {
font-family: 'BD Graduate';
src: url('fonts/bdgrad.eot'); /* EOT file for IE */
src: local('BD Graduate'), url('fonts/bdgrad.ttf') format('truetype');
}
HTML, BODY {
scrollbar-base-color: #90373A;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-arrow-color: #000000;
}
html {
height: 100%;
margin-bottom: 1px;
background-color: #000;
background-image: url("images/zavod_dark_back3_tile.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center top;
}
body {
margin-width: 0px;
margin-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
/* background-image: url("images/zavod_dark_back5b.jpg"); */
background-image: url("images/zavod_dark_back6b.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 30px;
font-family: Arial, Helvetica, sans-serif;
color: #B4B4B4; /* sets the default type color */
}
a {
color: #fff;
/* color: #90373A; */
text-decoration: underline;
}
a:hover {
color: #FBDDA0;
text-decoration: none;
}
a.darklink {
color: #fff;
text-decoration: underline;
}
a.darklink:hover {
color: #FBDDA0;
text-decoration: none;
}
p {
line-height: 140%;
color: #B4B4B4;
font-size: 14px;
font-weight: normal;
}
ul {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
margin-right: 10px;
}
ol {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
}
#album1wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
#album1wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
#album1wrapper h1 em { font-style: normal; color: #999; }
#album1wrapper a { color: #888; text-decoration: none; }
#album1wrapper { width: 400px; margin: 0px auto 40px auto; }
#album1wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
#album1wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
#album1wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
#album1wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
#album1wrapper li.playing a { color: #fff; }
#album1wrapper li.playing:before { content: '6C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }
@media screen and (max-device-width: 480px) {
#album1wrapper { position: relative; left: -3%; }
}
#album2wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
#album2wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
#album2wrapper h1 em { font-style: normal; color: #999; }
#album2wrapper a { color: #888; text-decoration: none; }
#album2wrapper { width: 400px; margin: 0px auto 40px auto; }
#album2wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
#album2wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
#album2wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
#album2wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
#album2wrapper li.playing a { color: #fff; }
#album2wrapper li.playing:before { content: '6C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }
@media screen and (max-device-width: 480px) {
#album2wrapper { position: relative; left: -3%; }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://www.allanzavod.com/audiojs/audio.js"></script>
</head>
<body OnLoad="window.focus();">
<br clear="all" /><br />
<br clear="all" /><br />
<div id="album1wrapper">
<h1>wait what - notorious xx <em>(2009)</em></h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
</ol>
</div>
<br clear="all" /><br />
<br clear="all" /><br />
<div id="album2wrapper">
<h1>wait what - notorious xx <em>(2009)</em></h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
</ol>
</div>
</body>
</html>
您仅将事件附加到第一个 <audio> 元素。 javascript 的每个部分都需要使用 .closest()、$.each()、.each()、.index() 对每个 <audio> 元素和 audio 变量进行过滤任务, .find()
$(function() {
var a = audiojs.createAll({
trackEnded: function() {
var el = $(this.element);
var next = el.closest(".audiojs").next('ol').find("li.playing").next();
if (!next.length) next = el.closest(".audiojs").next("ol").find("li").first();
next.parent().find(".playing").removeClass("playing");
next.addClass('playing');
el.attr("src", $('> a', next).attr('data-src'));
el.on("canplay", function() {
this.play()
})
}
});
// Load in the first track
var audio = a;
$.each(audio, function(index, el) {
var first = $(el.wrapper).next("ol").find("li:first")
.addClass("playing").find("a").attr("data-src");
el.load(first);
});
// Load in a track on click
$('ol li').click(function(e) {
var index = $(this).closest("ol").index("ol");
e.preventDefault();
$(this).addClass('playing').siblings()
.removeClass('playing');
var el = $('> a', this);
el.attr("src", el.attr('data-src'));
el.on("canplay", function() {
this.play()
})
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
var elems = $('li.playing');
elems.each(function(i, el) {
var curr = $(el);
// right arrow
if (unicode == 39) {
var next = curr.next();
if (!next.length) {
next = curr.closest("ol").find("li").first();
next.click();
}
// back arrow
} else if (unicode == 37) {
var prev = curr.prev();
if (!prev.length) {
prev = curr.closest("ol").find("li").last();
prev.click();
}
// spacebar
} else if (unicode == 32) {
$.each(audio, function(i, media) {
media.playPause();
})
}
})
})
});
* {
padding: 0;
margin: 0;
}
@font-face {
font-family: 'BD Graduate';
src: url('fonts/bdgrad.eot');
/* EOT file for IE */
src: local('BD Graduate'), url('fonts/bdgrad.ttf') format('truetype');
}
HTML,
BODY {
scrollbar-base-color: #90373A;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-arrow-color: #000000;
}
html {
height: 100%;
margin-bottom: 1px;
background-color: #000;
background-image: url("images/zavod_dark_back3_tile.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center top;
}
body {
margin-width: 0px;
margin-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
/* background-image: url("images/zavod_dark_back5b.jpg"); */
background-image: url("images/zavod_dark_back6b.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 30px;
font-family: Arial, Helvetica, sans-serif;
color: #B4B4B4;
/* sets the default type color */
}
a {
color: #fff;
/* color: #90373A; */
text-decoration: underline;
}
a:hover {
color: #FBDDA0;
text-decoration: none;
}
a.darklink {
color: #fff;
text-decoration: underline;
}
a.darklink:hover {
color: #FBDDA0;
text-decoration: none;
}
p {
line-height: 140%;
color: #B4B4B4;
font-size: 14px;
font-weight: normal;
}
ul {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
margin-right: 10px;
}
ol {
font-size: 14px;
line-height: 140%;
font-weight: normal;
list-style-type: disc;
display: block;
float: left;
text-align: left;
padding-left: 15px;
margin-left: 15px;
}
#album1wrapper {
color: #666;
font-family: sans-serif;
line-height: 1.4;
}
#album1wrapper h1 {
color: #444;
font-size: 1.2em;
padding: 0px 2px 12px;
margin: 0px;
}
#album1wrapper h1 em {
font-style: normal;
color: #999;
}
#album1wrapper a {
color: #888;
text-decoration: none;
}
#album1wrapper {
width: 400px;
margin: 0px auto 40px auto;
}
#album1wrapper ol {
padding: 0px;
margin: 0px;
list-style: decimal-leading-zero inside;
color: #ccc;
width: 460px;
border-top: 1px solid #ccc;
font-size: 0.9em;
}
#album1wrapper ol li {
position: relative;
margin: 0px;
padding: 9px 2px 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
#album1wrapper ol li a {
display: inline-block;
text-indent: -3.3ex;
padding: 0px 0px 0px 20px;
}
#album1wrapper li.playing {
color: #aaa;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
#album1wrapper li.playing a {
color: #fff;
}
#album1wrapper li.playing:before {
content: '6C';
width: 14px;
height: 14px;
padding: 3px;
line-height: 14px;
margin: 0px;
position: absolute;
left: -24px;
top: 9px;
color: #fff;
font-size: 13px;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}
@media screen and (max-device-width: 480px) {
#album1wrapper {
position: relative;
left: -3%;
}
}
#album2wrapper {
color: #666;
font-family: sans-serif;
line-height: 1.4;
}
#album2wrapper h1 {
color: #444;
font-size: 1.2em;
padding: 0px 2px 12px;
margin: 0px;
}
#album2wrapper h1 em {
font-style: normal;
color: #999;
}
#album2wrapper a {
color: #888;
text-decoration: none;
}
#album2wrapper {
width: 400px;
margin: 0px auto 40px auto;
}
#album2wrapper ol {
padding: 0px;
margin: 0px;
list-style: decimal-leading-zero inside;
color: #ccc;
width: 460px;
border-top: 1px solid #ccc;
font-size: 0.9em;
}
#album2wrapper ol li {
position: relative;
margin: 0px;
padding: 9px 2px 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
#album2wrapper ol li a {
display: inline-block;
text-indent: -3.3ex;
padding: 0px 0px 0px 20px;
}
#album2wrapper li.playing {
color: #aaa;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
#album2wrapper li.playing a {
color: #fff;
}
#album2wrapper li.playing:before {
content: '6C';
width: 14px;
height: 14px;
padding: 3px;
line-height: 14px;
margin: 0px;
position: absolute;
left: -24px;
top: 9px;
color: #fff;
font-size: 13px;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}
@media screen and (max-device-width: 480px) {
#album2wrapper {
position: relative;
left: -3%;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.allanzavod.com/audiojs/audio.js"></script>
</head>
<body onload="window.focus();">
<br clear="all" />
<br />
<br clear="all" />
<br />
<div id="album1wrapper">
<h1>Album 1</h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a>
</li>
</ol>
</div>
<br clear="all" />
<br />
<br clear="all" />
<br />
<div id="album2wrapper">
<h1>Album 2</h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a>
</li>
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a>
</li>
</ol>
</div>
</body>
</html>