HTML5 Audio with playlists
HTML
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
</audio>
<div id="playing">
</div>
CSS
#playing,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}
JavaScript
var audio;
var playlist;
var tracks;
var current;
var musicarr = ["http://www.archive.org/download/CanonInD_261/CanoninD.mp3",
"http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3",
"http://www.archive.org/download/bolero_69/Bolero.mp3",
"http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_demicheli_geminiani_pieces_allegro-in-f-major_small-version_64kb.mp3",
"http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_elysium_anonymous-elysium_the-young-false-man_small-version_live-and_restored_64kb.mp3",
"http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_ensemble-la-tempesta_porpora_iii-notturno_iii-lezione_live_small-version_64kb.mp3",
"http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_roccato_anonymous-roccato_riflessi_small-version_64kb.mp3"
];
shuffle(musicarr);
init();
function init(){
current = 0;
audio = $('audio');
audio[0].volume = .40;
len = musicarr.length;
run(musicarr[current], audio[0]);
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
}
run(musicarr[current],audio[0]);
});
}
function run(link, player){
player.src = link;
audio[0].load();
audio[0].play();
$('#playing').html("<ul><li><a>" + link+ "</a></li></ul>");
}
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex ;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
...