在同一网页上使用多个audio.js播放列表播放器？ [英] Using multiple audio.js playlist players on the same webpage?
本文介绍了在同一网页上使用多个audio.js播放列表播放器？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 kolber.github.io/audiojs/demos/test6.html audio.js播放列表播放器（例5）。这很好用。但是，我想在同一页面上使用它的两个实例。
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.
您可以看到我的尝试在线： www.allanzavod.com/test-music3.htm
You can see my attempt online here: www.allanzavod.com/test-music3.htm
你能告诉我我是否遗失了什么？或不 多个播放器也可以播放列表选项。 （我知道你可以有多个播放器没有播放列表 - 如'自定义标记/ css'的示例2所示： kolber.github.io/audiojs/demos/test2.html 。
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).
原来，我在猜测问题是我有两个id =wrapper的div（来自原始代码示例）。但我想当我更改了ID的名称时，它不会与javascript凝聚。
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!
（对不起，我试了一个小时来获得一个jsfiddle设置，但是无法获得外部引用来处理它。希望你能看到足够的现场示例： www.allanzavod.com/test-music3.htm ）
(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)
以下是代码段：
$(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>
推荐答案
您只将事件附加到第一个< audio> 元素。 javascript 的每个部分都需要为每个< audio> 元素和音频变量使用 .closest（）， $。each（）， .each（）， .index（）， .find（）
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>
这篇关于在同一网页上使用多个audio.js播放列表播放器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
