HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=HandheldFriendly content=True><meta name=MobileOptimized content=320>
<meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald:600" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Plyr Streaming Audio</title>
</head>
<body>
<div class="audio-box">
<audio src="https://archive.org/download/78_positively-absolutely-does-she-love-me-positivamente-absolutamente_jan-gar_gbia0016443a/Positively%20-%20Absolutely%20%28Do%20-%20Jan%20Garber%20and%20His%20Orchestra.mp3" id="audio" controls></audio>
<ul id="playlist">
<li class="active list-group-item">
<span audioLink="https://archive.org/download/78_positively-absolutely-does-she-love-me-positivamente-absolutamente_jan-gar_gbia0016443a/Positively%20-%20Absolutely%20%28Do%20-%20Jan%20Garber%20and%20His%20Orchestra.mp3">Sample 1</span>
</li>
<li class="list-group-item">
<span audioLink="https://archive.org/download/IntegraleDjangoReinhardtVol3/2-10%20Believe%20it%2C%20beloved.mp3">Sample 2</span>
</li>
<li class="list-group-item">
<span audioLink="https://archive.org/download/IntegraleDjangoReinhardtVol3/2-16%20I%27ve%20had%20my%20moments.mp3">Sample 3</span>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
<!-- Plyr core script -->
<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>
<script>
const player = new Plyr('#audio', {
/* options */
});
</script>
</body>
CSS
body{
display: table;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
background-color:#333;
width: 100%;
height: 100vh;
text-align: center;
font-family: 'Montserrat', sans-serif;
background-image: url(https://images.unsplash.com/photo-1539438323682-6a240bba6512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.copy{
margin-bottom:40px;
color:#fff;
}
.copy a{
color: #fff;
text-decoration:underline;
}
.audio-box{
display: table-cell;
vertical-align: middle;
position: relative;
width: calc(100% - 80px);
max-width: 600px;
padding: 40px 0 40px 0;
background-color: rgba(0, 0, 0, 0.8);
}
.plyr{
display: block;
position: relative;
margin: 0 auto;
max-width: 600px !important;
width: calc(100% - 80px);
background-color: rgba(0, 0, 0, 0.49);
}
.plyr--audio .plyr__controls{
background-color: transparent !important;
border-width: 1px;
border-style: solid;
border-color: #8e8e8e;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
}
.plyr__time{
color: #fff !important;
font-family: 'Oswald', sans-serif;
}
.plyr--full-ui input[type=range], .plyr--audio .plyr__progress__buffer{
color: #ff0000;
}
.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true]{
background-color: #ff0000;
}
.plyr__menu{
display: none !important;
}
.plyr__tooltip{
font-family: 'Oswald', sans-serif;
}
#playlist{
max-width: 600px !important;
width: calc(100% - 80px);
padding: 0;
margin: 20px auto 0 auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #8e8e8e;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
}
.active span{color:#fff; text-decoration:none; background-color: rgba(77, 0, 0, 1)}
li{margin:0px; padding:0px; text-align: left; cursor: pointer; border-style: solid; border-width: 0 0 1px 0; border-color: #999; text-transform: uppercase;}
li, span{transition:all 0.5s;}
.list-group-item.active span{ text-decoration:none; color:#fff;}
li span{display:block; position:relative; width:calc(100% - 20px); padding:10px;}
li span{display:block; text-decoration:none; color: #fff;}
li span:hover{text-decoration:none;}
a{color:#000; text-decoration:none;}
#playlist li:last-child, #playlist li:nth-last-child(2){ /*border:none;*/ }
#playlist li:last-child{
border:none;
/*display: none;*/
}
JAVASCRIPT
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('#audio');
playlist = $('#playlist');
tracks = playlist.find('li span');
len = tracks.length - 1;
audio[0].volume = 0.5;
audio[0].play();
playlist.find('span').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('span')[0];
}else{
link = playlist.find('span')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('audioLink');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
