mirror of
https://github.com/nxshock/promodj.git
synced 2024-11-27 03:01:01 +05:00
1267 lines
42 KiB
HTML
1267 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Audio player HTML5</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--base00: #282c34; /* Default Background */
|
|
--base01: #353b45; /* Lighter Background */
|
|
--base02: #3e4451; /* Selection Background */
|
|
--base03: #545862; /* Comments, Invisibles, Line Highlighting */
|
|
--base04: #565c64; /* Dark Foreground (Used for status bars) */
|
|
--base05: #abb2bf; /* Default Foreground, Caret, Delimiters, Operators */
|
|
--base06: #b6bdca; /* Light Foreground (Not often used) */
|
|
--base07: #c8ccd4; /* Light Background (Not often used) */
|
|
--base08: #e06c75; /* Red */
|
|
--base09: #d19a66; /* Orange */
|
|
--base0A: #e5c07b; /* Yellow */
|
|
--base0B: #98c379; /* Green */
|
|
--base0C: #56b6c2; /* Aqua */
|
|
--base0D: #61afef; /* Blue */
|
|
--base0E: #c678dd; /* Purple */
|
|
--base0F: #be5046; /* Dark red */
|
|
}
|
|
|
|
body {
|
|
background-color: var(--base00);
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#player {
|
|
position: relative;
|
|
max-width: 700px;
|
|
height: 500px;
|
|
border: solid 1px gray;
|
|
}
|
|
|
|
* {
|
|
color: var(--base05);
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hide {
|
|
display: none !important;
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.material-icons.md-dark {
|
|
color: var(--base05);
|
|
}
|
|
/*------------------------
|
|
Audio Player - AP
|
|
------------------------*/
|
|
/* Player and control panel */
|
|
|
|
.ap {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 50px;
|
|
margin: auto;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
color: var(--base05);
|
|
background: var(--base01);
|
|
border-top: 1px solid var(--base02);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.ap-inner {
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ap-panel {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
.ap-item {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.ap--track {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 40%;
|
|
-ms-flex: 1 40%;
|
|
flex: 1 40%;
|
|
padding: 0 20px;
|
|
}
|
|
/* Info section */
|
|
|
|
.ap-info {
|
|
width: 100%;
|
|
position: relative;
|
|
-webkit-align-self: flex-start;
|
|
-ms-flex-item-align: start;
|
|
align-self: flex-start;
|
|
padding: 5px 0 0;
|
|
}
|
|
|
|
.ap-title {
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-width: 400px;
|
|
padding-right: 80px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ap-time {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 0;
|
|
}
|
|
|
|
.ap-progress-container {
|
|
padding: 5px 0 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ap-progress {
|
|
position: relative;
|
|
height: 3px;
|
|
border-radius: 5px;
|
|
background: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.ap-preload-bar,
|
|
.ap-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
border-radius: 5px 0 0 5px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
z-index: 999;
|
|
}
|
|
|
|
.ap-bar {
|
|
background: var(--base0D);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.ap-bar:after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -5px;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: -4px;
|
|
content: '';
|
|
border-radius: 6px;
|
|
background: var(--base0D);
|
|
opacity: 0;
|
|
-webkit-transition: opacity .3s ease;
|
|
transition: opacity .3s ease;
|
|
}
|
|
|
|
.ap-progress-container:hover .ap-bar:after {
|
|
opacity: 1;
|
|
}
|
|
/* Buttons */
|
|
|
|
.ap-controls {
|
|
position: relative;
|
|
z-index: 1000;
|
|
display: block;
|
|
height: 50px;
|
|
cursor: pointer;
|
|
-webkit-transition: background .2s ease;
|
|
transition: background .2s ease;
|
|
text-align: center;
|
|
color: #fff;
|
|
border: 0;
|
|
outline: 0;
|
|
background: none;
|
|
}
|
|
|
|
.ap-controls svg {
|
|
fill: #333;
|
|
}
|
|
|
|
.ap-controls:hover svg {
|
|
fill: #222;
|
|
}
|
|
|
|
.ap-controls:active {
|
|
background: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.ap--playback>.ap-controls,
|
|
.ap--settings>.ap-controls {
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0 25%;
|
|
-ms-flex: 0 25%;
|
|
flex: 0 25%;
|
|
}
|
|
|
|
.ap--pause,
|
|
.playing>.ap--play {
|
|
display: none;
|
|
}
|
|
|
|
.playing>.ap--pause {
|
|
display: inline;
|
|
}
|
|
|
|
.ap-volume-container {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.ap-volume {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 50px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 0;
|
|
visibility: hidden;
|
|
-webkit-transition: height .2s cubic-bezier(0.17, 0.72, 0.26, 1.23);
|
|
transition: height .2s cubic-bezier(0.17, 0.72, 0.26, 1.23);
|
|
background: var(--base01);
|
|
border: 1px solid var(--base02);
|
|
border-bottom: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.ap-volume-btn {
|
|
display: block;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.ap-volume-btn>.ap--volume-off,
|
|
.muted>.ap--volume-on {
|
|
display: none;
|
|
}
|
|
|
|
.muted>.ap--volume-off {
|
|
display: inline;
|
|
}
|
|
|
|
.ap-volume-container:hover {
|
|
background: var(--base01);
|
|
}
|
|
|
|
.ap-volume-container:hover .ap-volume {
|
|
height: 120px;
|
|
visibility: visible;
|
|
}
|
|
|
|
.ap-volume-progress {
|
|
display: block;
|
|
width: 4px;
|
|
height: 100px;
|
|
margin: 10px auto;
|
|
background: rgba(0, 0, 0, .2);
|
|
position: relative;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.ap-volume-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--base0D);
|
|
height: 50%;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.ap-active {
|
|
background: rgba(0, 0, 0, .15);
|
|
opacity: 1;
|
|
}
|
|
/* @-webkit-keyframes blink {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
} */
|
|
|
|
.playing>.ap--pause {
|
|
-webkit-animation: blink 1.5s linear infinite;
|
|
animation: blink 1.5s linear infinite;
|
|
}
|
|
/* --------------------------- */
|
|
|
|
@media(max-width:880px) {
|
|
.ap-item>.ap-controls {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
@media(max-width:550px) {
|
|
.ap {
|
|
min-width: 250px;
|
|
}
|
|
.ap,
|
|
.ap-panel {
|
|
height: auto;
|
|
}
|
|
.ap-panel {
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.ap--track {
|
|
margin-bottom: 10px;
|
|
padding: 0 20px;
|
|
-webkit-box-ordinal-group: 2;
|
|
-webkit-order: 1;
|
|
-ms-flex-order: 1;
|
|
order: 1;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 1 100%;
|
|
-ms-flex: 1 1 100%;
|
|
flex: 1 1 100%;
|
|
}
|
|
.ap--playback,
|
|
.ap--settings {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 1 50%;
|
|
-ms-flex: 1 1 50%;
|
|
flex: 1 1 50%;
|
|
-webkit-box-ordinal-group: 3;
|
|
-webkit-order: 2;
|
|
-ms-flex-order: 2;
|
|
order: 2;
|
|
}
|
|
}
|
|
/*--------------------
|
|
PlayList
|
|
--------------------*/
|
|
|
|
.pl-container {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 50px;
|
|
left: 0;
|
|
margin: auto;
|
|
overflow: auto;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
background: var(--base00);
|
|
z-index: 999;
|
|
}
|
|
|
|
.pl-lead {
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.pl-list {
|
|
width: 100%;
|
|
max-width: 550px;
|
|
margin: 0 auto;
|
|
padding: 30px 10px;
|
|
}
|
|
|
|
.pl-list>li {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--base01);
|
|
}
|
|
|
|
.pl-number,
|
|
.pl-title,
|
|
.pl-remove {
|
|
margin: 0 5px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.pl-number {
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0 10%;
|
|
-ms-flex: 0 10%;
|
|
flex: 0 10%;
|
|
text-align: center;
|
|
}
|
|
|
|
.pl-playing {
|
|
display: none;
|
|
}
|
|
|
|
.pl-current .pl-count {
|
|
display: none;
|
|
}
|
|
|
|
.pl-current .pl-playing {
|
|
display: block;
|
|
}
|
|
|
|
.pl-current .pl-title {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pl-title {
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.pl-title:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.pl-remove {
|
|
opacity: 0;
|
|
margin-right: 0;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0 50px;
|
|
-ms-flex: 0 50px;
|
|
flex: 0 50px;
|
|
}
|
|
|
|
.pl-remove:hover {
|
|
background: var(--base01);
|
|
}
|
|
|
|
.pl-list>li:hover .pl-remove {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pl-list svg {
|
|
fill: rgba(0, 0, 0, .7);
|
|
}
|
|
|
|
.pl-empty {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
font-size: 2rem;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
letter-spacing: 2px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.eq {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 auto;
|
|
-webkit-box-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
-webkit-box-align: end;
|
|
-webkit-align-items: flex-end;
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.eq-bar {
|
|
width: 4px;
|
|
background: rgba(0, 0, 0, .7);
|
|
}
|
|
|
|
.eq-bar:nth-child(1) {
|
|
-webkit-animation: eq .8s ease-in-out infinite 0s;
|
|
animation: eq .8s ease-in-out infinite 0s;
|
|
}
|
|
|
|
.eq-bar:nth-child(2) {
|
|
-webkit-animation: eq .8s ease-in-out infinite .2s;
|
|
animation: eq .8s ease-in-out infinite .2s;
|
|
}
|
|
|
|
.eq-bar:nth-child(3) {
|
|
-webkit-animation: eq .8s ease-in-out infinite .4s;
|
|
animation: eq .8s ease-in-out infinite .4s;
|
|
}
|
|
|
|
.ap-image {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 50px;
|
|
left: 0;
|
|
overflow: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ap-image img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!--<div id='player'></div>-->
|
|
|
|
<script type="text/javascript">
|
|
;
|
|
(function(window, undefined) {
|
|
|
|
'use strict';
|
|
|
|
var AudioPlayer = (function() {
|
|
|
|
var aphtml =
|
|
' <div class="ap-inner">' +
|
|
' <div class="ap-panel">' +
|
|
' <div class="ap-item ap--playback">' +
|
|
' <button class="ap-controls ap-prev-btn">' +
|
|
' <i class="material-icons md-dark">skip_previous</i>' +
|
|
' </button>' +
|
|
' <button class="ap-controls ap-toggle-btn">' +
|
|
' <i class="material-icons md-dark ap--play">play_arrow</i>' +
|
|
' <i class="material-icons md-dark ap--pause">pause</i>' +
|
|
' </button>' +
|
|
' <button class="ap-controls ap-next-btn">' +
|
|
' <i class="material-icons md-dark">skip_next</i>' +
|
|
' </button>' +
|
|
' </div>' +
|
|
' <div class="ap-item ap--track">' +
|
|
' <div class="ap-info">' +
|
|
' <div class="ap-title">Unknown</div>' +
|
|
' <div class="ap-time">' +
|
|
' <span class="ap-time--current">--</span>' +
|
|
' <span> / </span>' +
|
|
' <span class="ap-time--duration">--</span>' +
|
|
' </div>' +
|
|
'' +
|
|
' <div class="ap-progress-container">' +
|
|
' <div class="ap-progress">' +
|
|
' <div class="ap-bar"></div>' +
|
|
' <div class="ap-preload-bar"></div>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
'' +
|
|
' </div>' +
|
|
' </div>' +
|
|
' <div class="ap-item ap--settings">' +
|
|
' <div class="ap-controls ap-volume-container">' +
|
|
' <button class="ap-controls ap-volume-btn">' +
|
|
' <i class="material-icons md-dark ap--volume-on">volume_up</i>' +
|
|
' <i class="material-icons md-dark ap--volume-off">volume_mute</i>' +
|
|
' </button>' +
|
|
' <div class="ap-volume">' +
|
|
' <div class="ap-volume-progress"><div class="ap-volume-bar"></div></div>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
' <button class="ap-controls ap-repeat-btn">' +
|
|
' <i class="material-icons md-dark">repeat</i>' +
|
|
' </button>' +
|
|
' <button class="ap-controls ap-shuffle-btn">' +
|
|
' <i class="material-icons md-dark">shuffle</i>' +
|
|
' </button>' +
|
|
' <button class="ap-controls ap-playlist-btn">' +
|
|
' <i class="material-icons md-dark">queue_music</i>' +
|
|
' </button>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
' </div>';
|
|
|
|
|
|
// Player vars
|
|
var
|
|
player,
|
|
imageDiv,
|
|
playBtn,
|
|
prevBtn,
|
|
nextBtn,
|
|
plBtn,
|
|
repeatBtn,
|
|
shuffleBtn,
|
|
volumeBtn,
|
|
progressBar,
|
|
preloadBar,
|
|
curTime,
|
|
durTime,
|
|
trackTitle,
|
|
audio,
|
|
index = 0,
|
|
playList,
|
|
volumeBar,
|
|
volumeLength,
|
|
repeating = false,
|
|
// either null or an array of all indices which were not played yet
|
|
shuffling = null,
|
|
played = [],
|
|
seeking = false,
|
|
rightClick = false,
|
|
apActive = false,
|
|
// playlist vars
|
|
pl,
|
|
plLi,
|
|
// settings
|
|
settings = {
|
|
container: 'body',
|
|
volume: 0.5,
|
|
autoPlay: false,
|
|
notification: false,
|
|
playList: []
|
|
};
|
|
|
|
function init(options) {
|
|
|
|
if (!('classList' in document.documentElement)) {
|
|
return false;
|
|
}
|
|
|
|
player = create('div', {
|
|
'className': 'ap',
|
|
'id': 'ap',
|
|
'innerHTML': aphtml
|
|
});
|
|
|
|
if (apActive || player === null) {
|
|
return;
|
|
}
|
|
|
|
settings = extend(settings, options);
|
|
|
|
document.querySelector(settings.container).insertBefore(player, null);
|
|
|
|
// get player elements
|
|
playBtn = player.querySelector('.ap-toggle-btn');
|
|
prevBtn = player.querySelector('.ap-prev-btn');
|
|
nextBtn = player.querySelector('.ap-next-btn');
|
|
repeatBtn = player.querySelector('.ap-repeat-btn');
|
|
shuffleBtn = player.querySelector('.ap-shuffle-btn');
|
|
volumeBtn = player.querySelector('.ap-volume-btn');
|
|
plBtn = player.querySelector('.ap-playlist-btn');
|
|
curTime = player.querySelector('.ap-time--current');
|
|
durTime = player.querySelector('.ap-time--duration');
|
|
trackTitle = player.querySelector('.ap-title');
|
|
progressBar = player.querySelector('.ap-bar');
|
|
preloadBar = player.querySelector('.ap-preload-bar');
|
|
volumeBar = player.querySelector('.ap-volume-bar');
|
|
|
|
playList = settings.playList;
|
|
|
|
playBtn.addEventListener('click', playToggle, false);
|
|
volumeBtn.addEventListener('click', volumeToggle, false);
|
|
repeatBtn.addEventListener('click', repeatToggle, false);
|
|
shuffleBtn.addEventListener('click', shuffleToggle, false);
|
|
|
|
progressBar.parentNode.parentNode.addEventListener('mousedown', handlerBar, false);
|
|
progressBar.parentNode.parentNode.addEventListener('mousemove', seek, false);
|
|
document.documentElement.addEventListener('mouseup', seekingFalse, false);
|
|
|
|
volumeBar.parentNode.parentNode.addEventListener('mousedown', handlerVol, false);
|
|
volumeBar.parentNode.parentNode.addEventListener('mousemove', setVolume);
|
|
document.documentElement.addEventListener('mouseup', seekingFalse, false);
|
|
|
|
prevBtn.addEventListener('click', prev, false);
|
|
nextBtn.addEventListener('click', next, false);
|
|
|
|
imageDiv = create('div', {
|
|
'className': 'ap-image'
|
|
})
|
|
player.parentNode.appendChild(imageDiv)
|
|
|
|
apActive = true;
|
|
|
|
// Create playlist
|
|
renderPL();
|
|
plBtn.addEventListener('click', plToggle, false);
|
|
|
|
// Create audio object
|
|
audio = new Audio();
|
|
audio.volume = settings.volume;
|
|
|
|
|
|
|
|
if (isEmptyList()) {
|
|
empty();
|
|
return;
|
|
}
|
|
|
|
audio.src = playList[index].file;
|
|
audio.preload = 'auto';
|
|
trackTitle.innerHTML = playList[index].title;
|
|
volumeBar.style.height = audio.volume * 100 + '%';
|
|
volumeLength = volumeBar.css('height');
|
|
|
|
audio.addEventListener('error', error, false);
|
|
audio.addEventListener('timeupdate', update, false);
|
|
audio.addEventListener('ended', doEnd, false);
|
|
audio.addEventListener('play', () => {
|
|
playBtn.classList.add('playing');
|
|
}, false)
|
|
audio.addEventListener('pause', () => {
|
|
playBtn.classList.remove('playing');
|
|
}, false)
|
|
|
|
if (settings.autoPlay) {
|
|
audio.play();
|
|
plLi[index].classList.add('pl-current');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* PlayList methods
|
|
*/
|
|
function renderPL() {
|
|
var html = [];
|
|
var tpl =
|
|
'<li data-track="{count}">' +
|
|
'<div class="pl-number">' +
|
|
'<div class="pl-count">' +
|
|
'<i class="material-icons">audiotrack</i>' +
|
|
'</div>' +
|
|
'<div class="pl-playing">' +
|
|
'<div class="eq">' +
|
|
'<div class="eq-bar"></div>' +
|
|
'<div class="eq-bar"></div>' +
|
|
'<div class="eq-bar"></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="pl-title">{title}</div>' +
|
|
'<button class="pl-remove">' +
|
|
'<i class="material-icons">delete</i>' +
|
|
'</button>' +
|
|
'</li>';
|
|
|
|
playList.forEach(function(item, i) {
|
|
html.push(
|
|
tpl.replace('{count}', i).replace('{title}', item.title)
|
|
);
|
|
});
|
|
|
|
pl = create('div', {
|
|
'className': 'pl-container hide',
|
|
'id': 'pl',
|
|
'innerHTML': !isEmptyList() ? '<ul class="pl-list">' + html.join('') + '</ul>' : '<div class="pl-empty">PlayList is empty</div>'
|
|
});
|
|
|
|
player.parentNode.insertBefore(pl, player.nextSibling);
|
|
|
|
plLi = pl.querySelectorAll('li');
|
|
|
|
pl.addEventListener('click', listHandler, false);
|
|
}
|
|
|
|
function listHandler(evt) {
|
|
evt.preventDefault();
|
|
if (evt.target.className === 'pl-title') {
|
|
var current = parseInt(evt.target.parentNode.getAttribute('data-track'), 10);
|
|
index = current;
|
|
play();
|
|
plActive();
|
|
} else {
|
|
var target = evt.target;
|
|
while (target.className !== pl.className) {
|
|
if (target.className === 'pl-remove') {
|
|
var isDel = parseInt(target.parentNode.getAttribute('data-track'), 10);
|
|
|
|
playList.splice(isDel, 1);
|
|
target.parentNode.parentNode.removeChild(target.parentNode);
|
|
|
|
plLi = pl.querySelectorAll('li');
|
|
|
|
[].forEach.call(plLi, function(el, i) {
|
|
el.setAttribute('data-track', i);
|
|
});
|
|
|
|
if (!audio.paused) {
|
|
|
|
if (isDel === index) {
|
|
play();
|
|
}
|
|
|
|
} else {
|
|
if (isEmptyList()) {
|
|
empty();
|
|
} else {
|
|
// audio.currentTime = 0;
|
|
audio.src = playList[index].file;
|
|
document.title = trackTitle.innerHTML = playList[index].title;
|
|
progressBar.style.width = 0;
|
|
}
|
|
}
|
|
if (isDel < index) {
|
|
index--;
|
|
}
|
|
|
|
return;
|
|
}
|
|
target = target.parentNode;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function plActive() {
|
|
if (audio.paused) {
|
|
plLi[index].classList.remove('pl-current');
|
|
return;
|
|
}
|
|
var current = index;
|
|
for (var i = 0, len = plLi.length; len > i; i++) {
|
|
plLi[i].classList.remove('pl-current');
|
|
}
|
|
plLi[current].classList.add('pl-current');
|
|
|
|
imageDiv.innerHTML = ''
|
|
if (playList[current].icon) {
|
|
let image = create('img', {
|
|
src: playList[current].icon
|
|
})
|
|
imageDiv.appendChild(image)
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Player methods
|
|
*/
|
|
function error() {
|
|
!isEmptyList() && next();
|
|
}
|
|
|
|
function play() {
|
|
|
|
index = (index > playList.length - 1) ? 0 : index;
|
|
if (index < 0) index = playList.length - 1;
|
|
|
|
if (isEmptyList()) {
|
|
empty();
|
|
return;
|
|
}
|
|
|
|
played.push(index)
|
|
|
|
audio.src = playList[index].file;
|
|
audio.preload = 'auto';
|
|
document.title = trackTitle.innerHTML = playList[index].title;
|
|
audio.play();
|
|
notify(playList[index].title, {
|
|
icon: playList[index].icon,
|
|
body: 'Now playing',
|
|
tag: 'music-player'
|
|
});
|
|
plActive();
|
|
}
|
|
|
|
function prev() {
|
|
if (played.length > 1) {
|
|
index = played.splice(-2)[0];
|
|
} else {
|
|
index = 0;
|
|
}
|
|
|
|
play();
|
|
}
|
|
|
|
function next(interactive) {
|
|
if (shuffling) {
|
|
if (shuffling.length === 0) {
|
|
if (repeating || interactive) {
|
|
shuffling = [...Array(playList.length).keys()]
|
|
} else {
|
|
audio.pause();
|
|
plActive();
|
|
|
|
return;
|
|
}
|
|
}
|
|
|
|
let i = Math.floor(Math.random() * shuffling.length);
|
|
index = shuffling.splice(i, 1)[0];
|
|
} else {
|
|
if (index === playList.length - 1 && (!repeating && !interactive)) {
|
|
audio.pause();
|
|
plActive();
|
|
playBtn.classList.remove('playing');
|
|
return;
|
|
}
|
|
|
|
index = (index === playList.length - 1) ? 0 : index + 1;
|
|
}
|
|
|
|
play();
|
|
}
|
|
|
|
function isEmptyList() {
|
|
return playList.length === 0;
|
|
}
|
|
|
|
function empty() {
|
|
audio.pause();
|
|
audio.src = '';
|
|
trackTitle.innerHTML = 'queue is empty';
|
|
curTime.innerHTML = '--';
|
|
durTime.innerHTML = '--';
|
|
progressBar.style.width = 0;
|
|
preloadBar.style.width = 0;
|
|
pl.innerHTML = '<div class="pl-empty">PlayList is empty</div>';
|
|
}
|
|
|
|
function playToggle() {
|
|
if (isEmptyList()) {
|
|
return;
|
|
}
|
|
if (audio.paused) {
|
|
audio.play();
|
|
notify(playList[index].title, {
|
|
icon: playList[index].icon,
|
|
body: 'Now playing'
|
|
});
|
|
this.classList.add('playing');
|
|
} else {
|
|
audio.pause();
|
|
this.classList.remove('playing');
|
|
}
|
|
plActive();
|
|
}
|
|
|
|
function volumeToggle() {
|
|
if (audio.muted) {
|
|
if (parseInt(volumeLength, 10) === 0) {
|
|
volumeBar.style.height = '100%';
|
|
audio.volume = 1;
|
|
} else {
|
|
volumeBar.style.height = volumeLength;
|
|
}
|
|
audio.muted = false;
|
|
this.classList.remove('muted');
|
|
} else {
|
|
audio.muted = true;
|
|
volumeBar.style.height = 0;
|
|
this.classList.add('muted');
|
|
}
|
|
}
|
|
|
|
function repeatToggle() {
|
|
var repeat = this.classList;
|
|
if (repeat.contains('ap-active')) {
|
|
repeating = false;
|
|
repeat.remove('ap-active');
|
|
} else {
|
|
repeating = true;
|
|
repeat.add('ap-active');
|
|
}
|
|
}
|
|
|
|
function shuffleToggle() {
|
|
var shuffle = this.classList;
|
|
if (shuffle.contains('ap-active')) {
|
|
shuffling = null;
|
|
shuffle.remove('ap-active');
|
|
} else {
|
|
shuffling = [...Array(playList.length).keys()]
|
|
shuffle.add('ap-active');
|
|
}
|
|
}
|
|
|
|
function plToggle() {
|
|
this.classList.toggle('ap-active');
|
|
pl.classList.toggle('hide');
|
|
}
|
|
|
|
function update() {
|
|
if (audio.readyState === 0) return;
|
|
|
|
var barlength = Math.round(audio.currentTime * (100 / audio.duration));
|
|
progressBar.style.width = barlength + '%';
|
|
|
|
var
|
|
curMins = Math.floor(audio.currentTime / 60),
|
|
curSecs = Math.floor(audio.currentTime - curMins * 60),
|
|
mins = Math.floor(audio.duration / 60),
|
|
secs = Math.floor(audio.duration - mins * 60);
|
|
(curSecs < 10) && (curSecs = '0' + curSecs);
|
|
(secs < 10) && (secs = '0' + secs);
|
|
|
|
curTime.innerHTML = curMins + ':' + curSecs;
|
|
durTime.innerHTML = mins + ':' + secs;
|
|
|
|
var buffered = audio.buffered;
|
|
if (buffered.length) {
|
|
var loaded = Math.round(100 * buffered.end(0) / audio.duration);
|
|
preloadBar.style.width = loaded + '%';
|
|
}
|
|
}
|
|
|
|
function doEnd() {
|
|
|
|
next(false);
|
|
|
|
}
|
|
|
|
function moveBar(evt, el, dir) {
|
|
var value;
|
|
if (dir === 'horizontal') {
|
|
value = Math.round(((evt.clientX - el.offset().left) + window.pageXOffset) * 100 / el.parentNode.offsetWidth);
|
|
el.style.width = value + '%';
|
|
return value;
|
|
} else {
|
|
var offset = (el.offset().top + el.offsetHeight) - window.pageYOffset;
|
|
value = Math.round((offset - evt.clientY));
|
|
if (value > 100) value = 100;
|
|
if (value < 0) value = 0;
|
|
volumeBar.style.height = value + '%';
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function handlerBar(evt) {
|
|
rightClick = (evt.which === 3) ? true : false;
|
|
seeking = true;
|
|
seek(evt);
|
|
}
|
|
|
|
function handlerVol(evt) {
|
|
rightClick = (evt.which === 3) ? true : false;
|
|
seeking = true;
|
|
setVolume(evt);
|
|
}
|
|
|
|
function seek(evt) {
|
|
if (seeking && rightClick === false && audio.readyState !== 0) {
|
|
var value = moveBar(evt, progressBar, 'horizontal');
|
|
audio.currentTime = audio.duration * (value / 100);
|
|
}
|
|
}
|
|
|
|
function seekingFalse() {
|
|
seeking = false;
|
|
}
|
|
|
|
function setVolume(evt) {
|
|
volumeLength = volumeBar.css('height');
|
|
if (seeking && rightClick === false) {
|
|
var value = moveBar(evt, volumeBar.parentNode, 'vertical') / 100;
|
|
if (value <= 0) {
|
|
audio.volume = 0;
|
|
volumeBtn.classList.add('muted');
|
|
} else {
|
|
if (audio.muted) audio.muted = false;
|
|
audio.volume = value;
|
|
volumeBtn.classList.remove('muted');
|
|
}
|
|
}
|
|
}
|
|
|
|
function notify(title, attr) {
|
|
if (!settings.notification) {
|
|
return;
|
|
}
|
|
if (window.Notification === undefined) {
|
|
return;
|
|
}
|
|
window.Notification.requestPermission(function(access) {
|
|
if (access === 'granted') {
|
|
var notice = new Notification(title.substr(0, 110), attr);
|
|
notice.onshow = function() {
|
|
setTimeout(function() {
|
|
notice.close();
|
|
}, 5000);
|
|
}
|
|
// notice.onclose = function() {
|
|
// if(noticeTimer) {
|
|
// clearTimeout(noticeTimer);
|
|
// }
|
|
// }
|
|
}
|
|
})
|
|
}
|
|
|
|
/* Destroy method. Clear All */
|
|
function destroy() {
|
|
if (!apActive) return;
|
|
|
|
playBtn.removeEventListener('click', playToggle, false);
|
|
volumeBtn.removeEventListener('click', volumeToggle, false);
|
|
repeatBtn.removeEventListener('click', repeatToggle, false);
|
|
plBtn.removeEventListener('click', plToggle, false);
|
|
|
|
progressBar.parentNode.parentNode.removeEventListener('mousedown', handlerBar, false);
|
|
progressBar.parentNode.parentNode.removeEventListener('mousemove', seek, false);
|
|
document.documentElement.removeEventListener('mouseup', seekingFalse, false);
|
|
|
|
volumeBar.parentNode.parentNode.removeEventListener('mousedown', handlerVol, false);
|
|
volumeBar.parentNode.parentNode.removeEventListener('mousemove', setVolume);
|
|
document.documentElement.removeEventListener('mouseup', seekingFalse, false);
|
|
|
|
prevBtn.removeEventListener('click', prev, false);
|
|
nextBtn.removeEventListener('click', next, false);
|
|
|
|
audio.removeEventListener('error', error, false);
|
|
audio.removeEventListener('timeupdate', update, false);
|
|
audio.removeEventListener('ended', doEnd, false);
|
|
player.parentNode.removeChild(player);
|
|
|
|
// Playlist
|
|
pl.removeEventListener('click', listHandler, false);
|
|
pl.parentNode.removeChild(pl);
|
|
|
|
audio.pause();
|
|
apActive = false;
|
|
}
|
|
|
|
|
|
/**
|
|
* Helpers
|
|
*/
|
|
function extend(defaults, options) {
|
|
for (var name in options) {
|
|
if (defaults.hasOwnProperty(name)) {
|
|
defaults[name] = options[name];
|
|
}
|
|
}
|
|
return defaults;
|
|
}
|
|
|
|
function create(el, attr) {
|
|
var element = document.createElement(el);
|
|
if (attr) {
|
|
for (var name in attr) {
|
|
if (element[name] !== undefined) {
|
|
element[name] = attr[name];
|
|
}
|
|
}
|
|
}
|
|
return element;
|
|
}
|
|
|
|
Element.prototype.offset = function() {
|
|
var el = this.getBoundingClientRect(),
|
|
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
|
|
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
return {
|
|
top: el.top + scrollTop,
|
|
left: el.left + scrollLeft
|
|
};
|
|
};
|
|
|
|
Element.prototype.css = function(attr) {
|
|
if (typeof attr === 'string') {
|
|
return getComputedStyle(this, '')[attr];
|
|
} else if (typeof attr === 'object') {
|
|
for (var name in attr) {
|
|
if (this.style[name] !== undefined) {
|
|
this.style[name] = attr[name];
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Public methods
|
|
*/
|
|
return {
|
|
init: init,
|
|
destroy: destroy
|
|
};
|
|
|
|
})();
|
|
|
|
window.AP = AudioPlayer;
|
|
|
|
})(window);
|
|
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// test image for web notifications
|
|
var iconImage = null;
|
|
|
|
AP.init({
|
|
container: 'body', //a string containing one CSS selector
|
|
volume: 0.7,
|
|
autoPlay: true,
|
|
notification: false,
|
|
playList: [{{range .}}{
|
|
"title": "{{.Title}}",
|
|
"file": "{{.File}}"
|
|
},{{end}}]
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |