在同一个网页上使用多个 audio.js 播放列表播放器? - IT屋-程序员软件开发技术分享社区
首页 前端开发 在同一个网页上使用多个 audio.js 播放列表播放器?
在同一个网页上使用多个 audio.js 播放列表播放器?
[英] Using multiple audio.js playlist players on the same webpage?
本文介绍了在同一个网页上使用多个 audio.js 播放列表播放器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 kolber.github.io/audiojs/demos/test6.html audio.js 播放列表播放器(示例 5).这很好用.但是，我想在同一页面上使用它的两个实例.
我试过了，第二个实例播放器只显示一个旋转的圆圈(而不是播放箭头).如果您从第二组中选择任何歌曲，它会播放，但显示为在第一组播放播放器.
您可以在此处在线查看我的尝试:www.allanzavod.com/test-music3.htm
你能告诉我我是否遗漏了什么吗?或者不可能 让多个玩家 同时拥有播放列表选项 .(我知道您可以拥有多个没有播放列表 的播放器 - 如自定义标记/css"的示例 2 所示:kolber.github.io/audiojs/demos/test2.html ).
最初，我猜测问题在于我有两个 id="wrapper" 的 div(来自原始代码示例).但是我认为当我更改 id 的名称时，它不会与 javascript 结合.
有什么建议吗?任何帮助将不胜感激！
(抱歉，我尝试了一个小时来获得 jsfiddle 设置，但无法获得外部引用来处理它.希望您能从以下现场示例中看到足够的信息:www.allanzavod.com/test-music3.htm )
这是代码片段:
$(function() {//设置播放器自动播放下一首曲目var a = audiojs.createAll({跟踪结束:函数(){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'));音频播放()；}});//加载第一个轨道var 音频 = a[0];first = $('ol a').attr('data-src');$('ol li').first().addClass('playing');音频加载(第一)；//点击加载轨道$('ol li').click(function(e) {e.preventDefault();$(this).addClass('playing').siblings().removeClass('playing');audio.load($('a', this).attr('data-src'));音频播放()；});//键盘快捷键$(document).keydown(function(e) {var unicode = e.charCode ?e.charCode : e.keyCode;//右箭头如果(Unicode == 39){var next = $('li.playing').next();if (!next.length) next = $('ol li').first();next.click();//后退箭头} else if (unicode == 37) {var prev = $('li.playing').prev();if (!prev.length) prev = $('ol li').last();上一个点击()；//空格键} else if (unicode == 32) {音频播放暂停()；}})});
* {padding: 0;边距:0;}@字体脸{font-family: 'BD 毕业生';src: url('fonts/bdgrad.eot');/* IE 的 EOT 文件 */src: local('BD 毕业生'), url('fonts/bdgrad.ttf') 格式('truetype');}HTML，正文{滚动条基色:#90373A；滚动条阴影颜色:#000000；滚动条高亮颜色:#000000；滚动条箭头颜色:#000000；}html {高度:100%；底边距:1px；背景色:#000；背景图片:网址(图片/zavod_dark_back3_tile.jpg")；背景附件:固定；背景重复:重复-x；背景位置:居中顶部；}身体 {边距宽度:0px；边距高度:0px；边距顶部:0px；边距右:0px；底边距:0px；左边距:0px；/* 背景图片: url("images/zavod_dark_back5b.jpg");*/背景图片:网址(图片/zavod_dark_back6b.jpg")；背景附件:固定；背景重复:不重复；背景位置:中心 30px；字体系列:Arial、Helvetica、sans-serif；颜色:#B4B4B4；/* 设置默认类型颜色 */}一种 {颜色:#fff;/* 颜色:#90373A；*/文字装饰:下划线；}一个:悬停{颜色:#FBDDA0；文字装饰:无；}a.darklink {颜色:#fff;文字装饰:下划线；}a.darklink:悬停{颜色:#FBDDA0；文字装饰:无；}p{行高:140%；颜色:#B4B4B4；字体大小:14px；字体粗细:正常；}ul{字体大小:14px；行高:140%；字体粗细:正常；列表样式类型:光盘；显示:块；向左飘浮;文本对齐:左；左边距:15px；左边距:15px；右边距:10px；}奥尔{字体大小:14px；行高:140%；字体粗细:正常；列表样式类型:光盘；显示:块；向左飘浮;文本对齐:左；左边距:15px；左边距:15px；}#album1wrapper { 颜色:#666;字体系列:无衬线；行高:1.4；}#album1wrapper h1 { 颜色:#444；字体大小:1.2em；填充:0px 2px 12px；边距:0px；}#album1wrapper h1 em { 字体样式:正常；颜色:#999；}#album1wrapper a { 颜色:#888;文字装饰:无；}#album1wrapper { 宽度:400px;边距:0px 自动 40px 自动；}#album1wrapper ol { 填充:0px；边距:0px；列表样式:内部十进制前导零；颜色:#ccc;宽度:460px；边框顶部:1px 实心 #ccc；字体大小:0.9em；}#album1wrapper ol li { 位置:相对；边距:0px；填充:9px 2px 10px；边框底部:1px 实心 #ccc；光标:指针；}#album1wrapper ol li a { display: inline-block;文本缩进:-3.3ex；填充:0px 0px 0px 20px；}#album1wrapper li.playing { 颜色:#aaa;文本阴影:1px 1px 0px rgba(255, 255, 255, 0.3);}#album1wrapper li.playing a { color: #fff;}#album1wrapper li.playing:before { content: '266C';宽度:14px；高度:14px；填充:3px；行高:14px；边距:0px；位置:绝对；左:-24px；顶部:9px；颜色:#fff;字体大小:13px；文本阴影:1px 1px 0px rgba(255, 255, 255, 0.4);}@media 屏幕和(最大设备宽度:480 像素){#album1wrapper { 位置:相对；左:-3%；}}#album2wrapper { 颜色:#666;字体系列:无衬线；行高:1.4；}#album2wrapper h1 { 颜色:#444；字体大小:1.2em；填充:0px 2px 12px；边距:0px；}#album2wrapper h1 em { 字体样式:正常；颜色:#999；}#album2wrapper a { 颜色:#888;文字装饰:无；}#album2wrapper { 宽度:400px;边距:0px 自动 40px 自动；}#album2wrapper ol { 填充:0px；边距:0px；列表样式:内部十进制前导零；颜色:#ccc;宽度:460px；边框顶部:1px 实心 #ccc；字体大小:0.9em；}#album2wrapper ol li { 位置:相对；边距:0px；填充:9px 2px 10px；边框底部:1px 实心 #ccc；光标:指针；}#album2wrapper ol li a { display: inline-block;文本缩进:-3.3ex；填充:0px 0px 0px 20px；}#album2wrapper li.playing { 颜色:#aaa;文本阴影:1px 1px 0px rgba(255, 255, 255, 0.3);}#album2wrapper li.playing a { color: #fff;}#album2wrapper li.playing:before { content: '266C';宽度:14px；高度:14px；填充:3px；行高:14px；边距:0px；位置:绝对；左:-24px；顶部:9px；颜色:#fff;字体大小:13px；文本阴影:1px 1px 0px rgba(255, 255, 255, 0.4);}@media 屏幕和(最大设备宽度:480 像素){#album2wrapper { 位置:相对；左:-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"><头><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><body OnLoad="window.focus();"><br clear="all"/><br/><br clear="all"/><br/><div id="album1wrapper"><h1>等等——臭名昭著的xx<em>(2009)</em></h1><音频预加载></audio><ol><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">死错简介</></li><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">它是所有关于结晶</a></li></ol><br clear="all"/><br/><br clear="all"/><br/><div id="album2wrapper"><h1>等等——臭名昭著的xx<em>(2009)</em></h1><音频预加载></audio><ol><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">无限胜利</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">大poppa在夜间发生的奇怪事件</a></li><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo问题</a></li></ol>
</html>
解决方案
您仅将事件附加到第一个 javascript 的每个部分都需要使用 .closest() 对每个 audio 变量进行过滤任务, $.each(), .each(), .index(), .find()
$(function() {var a = audiojs.createAll({跟踪结束:函数(){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('播放');el.attr("src", $('> a', next).attr('data-src'));el.on(可以播放"，函数(){this.play()})}});//加载第一个轨道var 音频 = 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);});//点击加载轨道$('ol li').click(function(e) {var index = $(this).closest("ol").index("ol");e.preventDefault();$(this).addClass('playing').siblings().removeClass('播放');var el = $('> a', this);el.attr("src", el.attr('data-src'));el.on(可以播放"，函数(){this.play()})});//键盘快捷键$(document).keydown(function(e) {var unicode = e.charCode ?e.charCode : e.keyCode;var elems = $('li.playing');elems.each(function(i, el) {var curr = $(el);//右箭头如果(Unicode == 39){var next = curr.next();如果(！下一个长度){next = curr.closest("ol").find("li").first();next.click();}//后退箭头} else if (unicode == 37) {var prev = curr.prev();如果(！prev.length){prev = curr.closest("ol").find("li").last();上一个点击()；}//空格键} else if (unicode == 32) {$.each(audio, function(i, media) {媒体播放暂停()；})}})})});
* {填充:0；边距:0；}@字体脸{font-family: 'BD 毕业生';src: url('fonts/bdgrad.eot');/* IE 的 EOT 文件 */src: local('BD 毕业生'), url('fonts/bdgrad.ttf') 格式('truetype');}HTML,身体 {滚动条基色:#90373A；滚动条阴影颜色:#000000；滚动条高亮颜色:#000000；滚动条箭头颜色:#000000；}html {高度:100%；底边距:1px；背景色:#000；背景图片:网址(图片/zavod_dark_back3_tile.jpg")；背景附件:固定；背景重复:重复-x；背景位置:居中顶部；}身体 {边距宽度:0px；边距高度:0px；边距顶部:0px；边距右:0px；底边距:0px；左边距:0px；/* 背景图片: url("images/zavod_dark_back5b.jpg");*/背景图片:网址(图片/zavod_dark_back6b.jpg")；背景附件:固定；背景重复:不重复；背景位置:中心 30px；字体系列:Arial、Helvetica、sans-serif；颜色:#B4B4B4；/* 设置默认类型颜色 */}一种 {颜色:#fff;/* 颜色:#90373A；*/文字装饰:下划线；}一个:悬停{颜色:#FBDDA0；文字装饰:无；}a.darklink {颜色:#fff;文字装饰:下划线；}a.darklink:悬停{颜色:#FBDDA0；文字装饰:无；}p{行高:140%；颜色:#B4B4B4；字体大小:14px；字体粗细:正常；}ul{字体大小:14px；行高:140%；字体粗细:正常；列表样式类型:光盘；显示:块；向左飘浮;文本对齐:左；左边距:15px；左边距:15px；右边距:10px；}奥尔{字体大小:14px；行高:140%；字体粗细:正常；列表样式类型:光盘；显示:块；向左飘浮;文本对齐:左；左边距:15px；左边距:15px；}#album1wrapper {颜色:#666；字体系列:无衬线；行高:1.4；}#album1wrapper h1 {颜色:#444；字体大小:1.2em；填充:0px 2px 12px；边距:0px；}#album1wrapper h1 em {字体样式:正常；颜色:#999；}#album1wrapper a {颜色:#888；文字装饰:无；}#album1wrapper {宽度:400px；边距:0px 自动 40px 自动；}#album1wrapper ol {填充:0px；边距:0px；列表样式:内部十进制前导零；颜色:#ccc;宽度:460px；边框顶部:1px 实心 #ccc；字体大小:0.9em；}#album1wrapper ol li {位置:相对；边距:0px；填充:9px 2px 10px；边框底部:1px 实心 #ccc；光标:指针；}#album1wrapper ol li a {显示:内联块；文本缩进:-3.3ex；填充:0px 0px 0px 20px；}#album1wrapper li.playing {颜色:#aaa;文本阴影:1px 1px 0px rgba(255, 255, 255, 0.3);}#album1wrapper li.playing a {颜色:#fff;}#album1wrapper li.playing:before {内容:'266C';宽度:14px；高度:14px；填充:3px；行高:14px；边距:0px；位置:绝对；左:-24px；顶部:9px；颜色:#fff;字体大小:13px；文本阴影:1px 1px 0px rgba(255, 255, 255, 0.4);}@media 屏幕和(最大设备宽度:480 像素){#album1wrapper {位置:相对；左:-3%；}}#album2wrapper {颜色:#666；字体系列:无衬线；行高:1.4；}#album2wrapper h1 {颜色:#444；字体大小:1.2em；填充:0px 2px 12px；边距:0px；}#album2wrapper h1 em {字体样式:正常；颜色:#999；}#album2wrapper a {颜色:#888；文字装饰:无；}#album2wrapper {宽度:400px；边距:0px 自动 40px 自动；}#album2wrapper ol {填充:0px；边距:0px；列表样式:内部十进制前导零；颜色:#ccc;宽度:460px；边框顶部:1px 实心 #ccc；字体大小:0.9em；}#album2wrapper ol li {位置:相对；边距:0px；填充:9px 2px 10px；边框底部:1px 实心 #ccc；光标:指针；}#album2wrapper ol li a {显示:内联块；文本缩进:-3.3ex；填充:0px 0px 0px 20px；}#album2wrapper li.playing {颜色:#aaa;文本阴影:1px 1px 0px rgba(255, 255, 255, 0.3);}#album2wrapper li.playing {颜色:#fff;}#album2wrapper li.playing:before {内容:'266C';宽度:14px；高度:14px；填充:3px；行高:14px；边距:0px；位置:绝对；左:-24px；顶部:9px；颜色:#fff;字体大小:13px；文本阴影:1px 1px 0px rgba(255, 255, 255, 0.4);}@media 屏幕和(最大设备宽度:480 像素){#album2wrapper {位置:相对；左:-3%；}}
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><头><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><body onload="window.focus();"><br clear="all"/><br/><br clear="all"/><br/><div id="album1wrapper"><h1>专辑1</h1><音频预加载></audio><ol><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">死错简介</＞<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">它是关于结晶的所有内容</ol><br clear="all"/><br/><br clear="all"/><br/><div id="album2wrapper"><h1>专辑2</h1><音频预加载></audio><ol><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">无限胜利</a><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">大poppa在夜间发生的奇怪事件</a><li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo问题</ol>
</html>
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>
解决方案
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屋！
查看全文
