在同一网页上使用多个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() { // 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%; } } 

        

 

 
 
wait what - notorious xx (2009)
  
 
dead wrong intro
 
juicy-r
 
it's all about the crystalizabeths
 
 
 

 

 
 
wait what - notorious xx (2009)
  
 
infinite victory
 
the curious incident of big poppa in the nighttime
 
mo stars mo problems
 
 
   

Answer 1

您只将事件附加到第一个元素。 javascript每个部分都需要使用.closest() ， $.each() .each() .index() .find()来为每个元素和audio变量过滤任务

 $(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%; } } 

        
 
 
 
 
 
Album 1
  
 
dead wrong intro 
 
juicy-r 
 
it's all about the crystalizabeths 
 
 
 
 
 
 
 
 
Album 2
  
 
infinite victory 
 
the curious incident of big poppa in the nighttime 
 
mo stars mo problems