i using kolber.github.io/audiojs/demos/test6.html audio.js playlist player (example 5). works great. however, use 2 instances of on same page.
i have tried it, , second instance player displays rotating circle (instead of arrow play).. , if select song second group, plays, shows playing on first player.
you can see attempt online here: www.allanzavod.com/test-music3.htm
can tell me if missing anything? or not possible have multiple players have playlist option. (i know can have multiple players no playlist - shown on example 2 of 'custom markup/css': kolber.github.io/audiojs/demos/test2.html).
originally, guessing problem fact had 2 divs id="wrapper" (from original code examples). think when changed name of ids, doesn't gel javascript.
any suggestions? appreciated!
(sorry, tried hour jsfiddle setup, couldn't external references work on it. can see enough live example at: www.allanzavod.com/test-music3.htm)
here code snippet:
$(function() { // setup player autoplay next track var = 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 first track var audio = a[0]; first = $('ol a').attr('data-src'); $('ol li').first().addclass('playing'); audio.load(first); // load in 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(); // 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 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 default type color */ } { 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 { 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 { 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 { 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 , (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 { 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 { 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 { 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 , (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 - 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 crystalizabeths</a></li> </ol> </div> <br clear="all" /><br /> <br clear="all" /><br /> <div id="album2wrapper"> <h1>wait - 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 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 attaching events first <audio> element. each portion of javascript requires filtering tasks each <audio> element , audio variable using .closest(), $.each(), .each(), .index(), .find()
$(function() { var = 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 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 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(); } // 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 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 default type color */ } { 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 { 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 { 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 { 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 , (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 { 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 { 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 { 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 , (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 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 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>
Comments
Post a Comment