问题
I am using the kolber.github.io/audiojs/demos/test6.html audio.js playlist player (example 5). That works great. However, I would like to use two instances of it on the same page.
I have tried it, and the second instance player just displays a rotating circle (instead of the arrow for play).. and if you select any song from this second group, it plays, but shows up as playing on the first player.
You can see my attempt online here: www.allanzavod.com/test-music3.htm
Can you tell me if I am missing anything? Or is it not possible to have multiple players that also have the playlist option. (I know you can have multiple players with no playlist - as shown on example 2 of 'Custom markup/css': kolber.github.io/audiojs/demos/test2.html).
Originally, I was guessing that the problem was the fact that I had two divs with id="wrapper" (from the original code examples). But I think when I changed the name of the ids, it doesn't gel with the javascript.
Any suggestions? Any help will be appreciated!
(Sorry, I tried for an hour to get a jsfiddle setup, but just couldn't get the external references to work on it. Hopefully you can see enough from the live example at: www.allanzavod.com/test-music3.htm)
Here is the code snippet:
$(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: '\266C'; 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: '\266C'; 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>回答1:
You are attaching events to only first <audio> element. Each portion of javascript requires filtering tasks for each <audio> element and audio variable using .closest(), $.each(), .each(), .index(), .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: '\266C';
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: '\266C';
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>来源：https://stackoverflow.com/questions/39283018/using-multiple-audio-js-playlist-players-on-the-same-webpage