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="list-group-item" style="display:none;">
<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();
}
1 Response