<div class="floating-icon"><a href="https://jewel998.github.io/playlist" style="color:white"><i class="fa fa-github"></i></a></div>
<div class="floating-icon"><a href="https://codepen.io/jewel998" style="color:white"><i class="fa fa-codepen"></i></a></div>
<div id="music-player">
<img id="album-art"/>
<div id="top-bar">
<button id="back"><i class="fa fa-arrow-left"></i></button>
<div id="about-song"><h2 class="song-name"></h2><h4 class="artist-name"></h4></div>
</div>
<div id="lyrics">
<h2 class="song-name"></h2><h4 class="artist-name"></h4>
<div id="lyrics-content">
</div>
</div>
<audio id="audioFile" preload="true">
</audio>
<div id="player">
<div id="bar">
<div id="currentTime"></div>
<div id="progress-bar">
<div id="progress"><i id="progressButton" class="fa fa-circle"></i></div>
</div>
<div id="totalTime"></div>
</div>
<div id="menu">
<button id="repeat" style="color:grey"><i class="fa fa-repeat"></i></button>
<button id="prev"><i class="fa fa-step-backward"></i></button>
<button id="play"><i class="fa fa-play"></i></button>
<button id="next"><i class="fa fa-step-forward"></i></button>
<button id="shuffle" style="color:grey"><i class="fa fa-random"></i></button>
</div>
</div>
<div id="playlist">
<div id="label">
<h1>Playlist</h1>
<input id="search" type="text" placeholder=" Search from all songs"></input>
</div>
<div id="show-box">
<div id="show-list">
</div>
</div>
</div>
</div>
:root{
--bg-color: background-color: #7f5a83;
background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
--menu-color: #00000045;
--lyrics-color: white;
--font-family: "Montserrat",sans-serif;
}
html,body{
margin: 0;
padding: 0;
font-family: var(--font-family);
overflow: hidden;
}
#music-player{
width:100%;
height:100vh;
background: var(--bg-color);
}
#album-art{ position:fixed; z-index:-1; left: 50%; transform: translateX(-50%);opacity: 0.15;width: auto; height: 100%;}
#top-bar{
position: relative;
height: 8vh;
color: white;
width: 90%;
padding: 0 0 0 5%;
z-index: 50;
}
#top-bar > *{ display:inline-block; }
#top-bar button{ margin:0;background: inherit; border: none; color: white; font-size: 100%;vertical-align:middle;transform:translateY(-40%);padding: 5px 10px;}
#about-song{ width: 60%; margin: 0 5%; line-height: 1vh; font-size:70%;}
.artist-name{ color: #ffffff79;}
@media only screen and (max-width: 340px){
#top-bar > button{ font-size: 15px; }
#top-bar > #about-song *{ font-size:120%;line-height:0; }
#menu > button{ font-size: 5vw !important; padding: 4px 6px !important; }
#progress-bar{
width: 50% !important;
}
}
#lyrics{
width: 100%;
height: 60vh;
color: var(--lyrics-color);
text-align: center;
overflow-Y: scroll;
font-size: 2vh;
}
#lyrics-content{
margin:0;
padding: 20vh 0;
transition: ease 0.1s all;
}
#lyrics h2{
opacity: 0.25;
}
#lyrics .current{
opacity: 1;
font-size: 250%;
transform: translateY(25%);
}
#lyrics .current + h2{
opacity: 0.5;
font-size: 180%;
}
#player{
background: var(--menu-color);
position: fixed;
bottom: 0;
height: 25vh;
width: 100%;
z-index: 50;
}
#bar{
position:relative;
text-align: center;
width:100%;
padding-top: 25px;
}
#currentTime,#totalTime{transform:translateY(-50%);padding: 0 2%;font-size: 3vh}
@media only screen and (min-height: 500px){#currentTime,#totalTime{font-size: 2.25vh !important;}}
#currentTime,#progress-bar,#totalTime{color: white;display: inline-block;}
#progress-bar{
position: relative;
text-align: center;
height: 0.25em;
width: 70%;
border: 1px solid #222;
background: #333;
border-radius: 20px;
margin:0;padding:0;
cursor: pointer;
transform: translateY(-160%);
}
#progress{
height:100%;
width:0%;
background: red;
border-radius: 20px;
text-align: right;
transition: ease all;
}
#progress > i{
position: absolute;
transform: translate(-50%,-35%);
}
#menu{
position:relative;
text-align: center;
width:100%;
overflow: hidden;
}
#menu > button{
padding: 10px 14px;
border-radius: 50%;
border: none;
margin: 0 5px;
background: inherit;
color: white;
font-size: 20px;
text-align: center;
opacity: 0.75;
cursor: pointer;
}
#menu > button > i{
padding: 5px 3px 5px 5px;
}
#menu > button#play{
opacity: 1;
border: 2px solid white;
}
#menu > button:focus{
outline: none;
}
#playlist{
position:fixed;
top:8vh;
left:0;
height:67vh;
width:100%;
z-index: 4;
color: var(--lyrics-color);
background-color: #7f5a8399;
background-image: linear-gradient(315deg, #7f5a8399 0%, #0d324d99 74%);
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s all;
transform:translateX(100%);
}
#show-box{
position: absolute;
top: 70%;
left:50%;
height: 30vh;
width:70%;
padding: 4vh;
transform: translate(-50%,-70%);
overflow: auto;
}
#show-list{
position: relative;
transition: ease-in-out 0.5s all;
height: 100%;
}
#show-list .float-song-card{
position: relative;
display:inline-block;
height: 130px;
width: 110px;
padding: 20px 10px;
background: #00000089;
text-align: center;
font-size: 70%;
border-radius:8px;
margin: 4px 10px;
overflow:hidden;
cursor: pointer;
}
.float-song-card > .album-art{
position: absolute;
top:0;
left:50%;
transform: translateX(-50%);
height:100%;
width: auto;
opacity:0.75;
transition: ease-in-out 0.5s all;
}
.float-song-card:hover > .album-art{
transform: translateX(-50%) scale(1.2,1.2);
opacity:1;
}
.float-song-card > h2,
.float-song-card > h4{position:relative;z-index:49;margin:2px 0;}
#playlist > #label{
width:100%;
text-align: center;
font-size:100%;
}
#playlist > #label > h1{ line-height:0;margin: 6vh 0 2.5vh;}
#search{
background: transparent;
color: white;
border:1px solid #ffffff99;
padding: 8px;
margin: 2.5vh 0;
border-radius: 50%;
font-family: FontAwesome,"Montserrat",sans-serif;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s all;
width: 12px;
background: white;
}
#search:focus{outline:none;border-radius:8px;border:1px solid #ffffff;width:25vw;padding: 1vh 1.5vw;background: inherit;}
@media only screen and (max-height: 500px){
#show-list .float-song-card{font-size:40% !important;height:60px;width:50px;}
#playlist > #label{font-size:70%;}
#search{font-size:10px;padding:4px;width:10px;}
#search:focus{width:40vw;}
#playlist > #label > h1{margin:8vh 0 4vh !important;}
}
#lyrics::-webkit-scrollbar,#show-box::-webkit-scrollbar{
width:5px;
}
#lyrics::-webkit-scrollbar-track,#show-box::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#lyrics::-webkit-scrollbar-thumb,#show-box::-webkit-scrollbar-thumb{
background-color: darkgrey;
outline: 1px solid slategrey;
border-radius: 15px;
}
.floating-icon{
position: absolute;
bottom: 5%;
z-index: 1000;
font-size: 4vh;
border: 1.5px solid white;
border-radius: 50%;
padding: 1vh 2vh;
background: #222;
}
.floating-icon:nth-child(1){
right: 3vh;
}
.floating-icon:nth-child(2){
right: 12vh;
}
console.clear();
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
var buttonColorOnPress = "white";
$(document).ready(function(){
$.getJSON('https://jewel998.github.io/playlist/playlist.json',function(data){
var abort_other_json;
var playlist = data;
var index = 0;
var indexing = playlist.songs[index];
var time = 0;
var totalTime = 0;
var timeList = [];
var play = 0;
var counter = 0;
var songRepeat = 0;
var songShuffle = 0;
var mute = 0;
var stopTimer;
var previousTime;
var safeKill = 0;
var audio = document.getElementById('audioFile');
function centerize() {
if(play == 0) return;
if($(".current").length == 0) return;
var a = $(".current").height();
var c = $("#lyrics").height();
var d = $(".current").offset().top - $(".current").parent().offset().top;
var e = d + (a/2) - (c*1/4);
$("#lyrics").animate(
{scrollTop: e + "px"}, {easing: "swing", duration: 500}
);
}
function next(){
var current = $('#lyrics .current');
if(current.length == 0){ $('#lyrics-content h2:nth-child(1)').addClass("current"); return; }
current.removeClass('current');
current.next().addClass('current');
}
function previous(){
var current = $('#lyrics .current');
if(current.length == 0){ return; }
var first = $('#lyrics-content h2:nth-child(1)');
current.removeClass('current');
if(current === first){ return; }
current.prev().addClass('current');
}
function setSongName(songName){
var context = $('.song-name');
for(var i=0;i<context.length;i++){
context[i].innerHTML = songName;
}
}
function setArtistName(artistName){
var context = $('.artist-name');
for(var i=0;i<context.length;i++){
context[i].innerHTML = artistName;
}
}
function setAlbumArt(albumart){
var context = $('#album-art');
context.attr("src",albumart);
}
function processTime(a){
var b = parseInt(a/60000);
var c = parseInt((a%60000)/1000);
if(c < 10){ c = "0"+c; }
return b+":"+c;
}
function reset(){
time = 0;
audio.currentTime = 0;
}
function playSong(){
if(play==0){play = 1;audio.play();$('#menu button#play i').removeClass("fa-play");$('#menu button#play i').addClass("fa-pause");}
else{play = 0;audio.pause();$('#menu button#play i').removeClass("fa-pause");$('#menu button#play i').addClass("fa-play");}
}
function processing(data){
if(data.author == ""){ data.author = "Unknown"; }
setSongName(data.song);
setArtistName(data.author);
setAlbumArt(data.albumart);
var html = "";
timeList=[];
for(var i=0;i<data.lyrics.length;i++){
timeList.push(data.lyrics[i].time);
html = html + "<h2>"+data.lyrics[i].line+"</h2>";
}
$('#lyrics-content').html(html);
$('#totalTime').html(processTime(totalTime));
$('#currentTime').html(processTime(time));
var percent = time/totalTime * 100;
$('#progress').css("width",percent+"%");
}
$('#progress-bar').on('mousedown',function(){
$('#progress-bar').on('mousemove',function handler(event){
event.preventDefault;
if(event.offsetY > 5 || event.offsetY < 1) return;
var width = $('#progress-bar').css("width");
var percent = parseInt(event.offsetX)/parseInt(width)*100;
$('#progress').css("width",percent+"%");
time = parseInt(totalTime * (percent/100));
audio.currentTime = parseInt(time/1000);
});
});
function changeProgress(){
dragHandler = (event)=>{
event.preventDefault;
if(event.offsetY > 5 || event.offsetY < 1) return;
var width = $('#progress-bar').css("width");
var percent = parseInt(event.offsetX)/parseInt(width)*100;
$('#progress').css("width",percent+"%");
time = parseInt(totalTime * (percent/100));
audio.currentTime = parseInt(time/1000);
}
}
$('#progressButton').on('mousedown',changeProgress());
$('#progress-bar').mouseup(function(){
$('#progress-bar').off('mousemove');
});
$('#progressButton').mouseup(function(){
$('#progress-bar').off('mousemove');
});
function rewind5s(){
if(time > 5000)
time = time - 5000;
else
time = 0;
audio.currentTime = parseInt(time/1000);
}
function forward5s(){
if((time+5000) < totalTime)
time = time + 5000;
else
time = totalTime;
audio.currentTime = parseInt(time/1000);
}
$(document).bind('keydown',function(event){
switch(event.keyCode){
case 37:
rewind5s();
break;
case 39:
forward5s();
break;
}
});
function toggleRepeat(){if(songRepeat == 0){$('#repeat').css("color",buttonColorOnPress);songRepeat=1;}else{$('#repeat').css("color","grey");songRepeat=0;}}function toggleShuffle(){if(songShuffle == 0){$('#shuffle').css("color",buttonColorOnPress);songShuffle = 1;}else{$('#shuffle').css("color","grey");songShuffle = 0;}}function toggleMute(){if(mute == 0){mute=1;audio.volume = 0;}else{mute = 0;audio.volume = 1;}}
$(document).bind('keypress',function(event){
//console.log(event.keyCode);
switch(event.keyCode){
case 32:
playSong();
break;
case 109:
toggleMute();
break;
case 114:
toggleRepeat();
break;
case 115:
toggleShuffle();
break;
}
});
function prevSong(){
if(abort_other_json){abort_other_json.abort();}reset();timeList=[];previousTime=0;counter=0;
clearInterval(stopTimer);
index = (index-1)%playlist.songs.length;
indexing = playlist.songs[index];
$('#audioFile').attr('src',indexing.audio);
loadSong();
}
function nextSong(){
if(abort_other_json){abort_other_json.abort();}reset();timeList=[];previousTime=0;counter=0;
clearInterval(stopTimer);
index = (index+1)%playlist.songs.length;
indexing = playlist.songs[index];
$('#audioFile').attr('src',indexing.audio);
loadSong();
}
function updateTimer(data){
if(totalTime == 0 || isNaN(totalTime)){totalTime = parseInt((audio.duration * 1000));processing(data);}
//for the end of the song
if(time >= totalTime){if(play == 0) return; playSong(); if(songRepeat == 1){ reset(); playSong(); return; }else{ nextSong(); playSong(); } return;}
//update timer
if(play == 1){time = time + 1000;}
else if(play == -1){time = 0;}
//upadate time on the progress bar
if(audio.currentTime != previousTime){previousTime=audio.currentTime;$('#currentTime').html(processTime(time));var percent = time/totalTime * 100;$('#progress').css("width",percent+"%");}
else{ time = parseInt(audio.currentTime*1000);if(time>100)time=time-100;if(play==1){audio.pause();if(audio.readyState == 4){audio.play();}} }
safeKill = 0;
while(true){
safeKill += 1;
if(safeKill >= 100) break;
if(counter == 0){if(time < timeList[counter]){previous();break;}}
if((counter == timeList.length) && (time <= timeList[counter-1])){counter--;previous();}
if(time >= timeList[counter]){if(counter<=timeList.length){counter++;}next();}
else if(time < timeList[counter-1]){counter--;previous();}
else{if(play == 1 && !audio.paused && !audio.ended)centerize();break;}
}
}
function loadSong(){
$('#audioFile').attr('src',indexing.audio);
abort_other_json = $.getJSON(indexing.json,function(data){
processing(data);
totalTime = NaN;
stopTimer = setInterval(function(){updateTimer(data);},1000);
});
}
loadSong();
$('#prev').on('click',prevSong);
$('#next').on('click',nextSong);
$('#play').on('click',playSong);
$('#repeat').on('click',toggleRepeat);
$('#shuffle').on('click',toggleShuffle);
function playSongAtIndex(data){
if(data == index) return;
if(index >= playlist.songs.length) return;
if(abort_other_json){abort_other_json.abort();reset();clearInterval(stopTimer);timeList=[];previousTime=0;counter=0;}
index = data;
indexing = playlist.songs[index];
$('#audioFile').attr('src',indexing.audio);
loadSong();
}
function addToPlayList(data,index){
var html = "";html = $('#show-list').html();html +="<div class=\"float-song-card\" data-index=\""+index+"\"><img class=\"album-art\" src=\""+data.albumart+"\"><h2 class=\"song\">"+data.song+"</h2><h4 class=\"artist\">"+data.author+"</h4></div>";$('#show-list').html(html);$('.float-song-card').on('click',function(){playSongAtIndex($(this).attr("data-index"));});
}
function setPlaylist(){
for(var i=0;i<playlist.songs.length;i++){
$.getJSON(playlist.songs[i].json,function(i){ return function(data){addToPlayList(data,i)}; }(i));
}
}
setPlaylist();
});
$('#search').keyup(function(){
var toSearch = $(this).val();
$('.float-song-card').css("display","none");
$('.float-song-card:contains('+toSearch+')').css("display","inline-block");
});
var togglePlaylist = 0;
$('#back').on('click',function(){
if(togglePlaylist == 0){
$('#playlist').css("transform","translateX(0)");
togglePlaylist = 1;
}
else{
$('#playlist').css("transform","translateX(100%)");
togglePlaylist = 0;
}
});
});