Audio Playlist

HTML
<html> <head> <meta name="description" content="CDN Bootstrap"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" > <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="copy">Audio playlist that can play audio on a loop. You can select the next track and it will resume from there. Hide the content and it makes a nice player for background audio. This runs fine on save but the link open the mp3 if you click Run at the bottom and then select a track. The default volume level can be set in the JS. Bootstrap is not a necessity</div> <div class="panel panel-default audio-panel"> <audio id="audio" autoplay preload="auto" tabindex="0" controls> <source src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sample1.mp3"> </audio> </div> <ul id="playlist"> <li class="active list-group-item"> <a href="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sample1.mp3"> Sample 1 </a> </li> <li class="list-group-item"> <a href="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sample2.mp3"> Sample 2 </a> </li> <li class="list-group-item"> <a href="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sample3.mp3"> Sample 3 </a> </li> <li class="last"> <a href=""> Sample 3 </a> </li> </ul> </body> </html>
CSS
.copy{ margin:20px; padding:20px; border-style:solid; border-width:1px; border-color: #ddd; -webkit-border-radius:3px; border-radius:3px; font-size:18px; } .panel{ margin: 20px; padding:0px; height:34px;} .audio-panel{border:none !important;} #playlist,audio{width:100%;} .active a{color:#fff;text-decoration:none;} ul{list-style:none; margin:0px; padding:20px;} li{margin:0px; padding:0px;} li, a{transition:all 0.5s;} .list-group-item.active a{ text-decoration:none; color:#fff;} a{display:block; position:relative; width:100%;} li a{display:block; text-decoration:none;} li:hover{background-color:#333;} li a:hover{text-decoration:none; color: #fff;} a{color:#fff; text-decoration:none;} .last{display:none;}
JAVASCRIPT
var audio; var playlist; var tracks; var current; init(); function init(){ current = 0; audio = $('#audio'); playlist = $('#playlist'); tracks = playlist.find('li a'); len = tracks.length - 1; audio[0].volume = 0.5; audio[0].play(); playlist.find('a').click(function(e){ e.preventDefault(); link = $(this); current = link.parent().index(); run(link, audio[0]); }); audio[0].addEventListener('ended',function(e){ current++; if(current == len){ current = 0; link = playlist.find('a')[0]; }else{ link = playlist.find('a')[current]; } run($(link),audio[0]); }); } function run(link, player){ player.src = link.attr('href'); par = link.parent(); par.addClass('active').siblings().removeClass('active'); audio[0].load(); audio[0].play(); }
Expand for more options Login