This is an Audio Player with a playlist and album cover.
Problems: there can't be more than one player per page.
A Pen by Mohammad Owidat on CodePen.
This is an Audio Player with a playlist and album cover.
Problems: there can't be more than one player per page.
A Pen by Mohammad Owidat on CodePen.
<!DOCTYPE html> | |
<html lang="en" > | |
<head> | |
<meta charset="UTF-8"> | |
<title>AAUP.EDU FM Audio Player</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Audio Player</title> | |
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> | |
<link rel="stylesheet" href="css/style.css"> | |
</head> | |
<body> | |
<div class="BG"> | |
<div id="container"> | |
<div class="background"></div> | |
<div id="cover"></div> | |
<!-- audio player --> | |
<div id="Audio-Info"> | |
<span class="Artist">Artist</span> | |
<span class="Title">Title</span> | |
</div> | |
<!-- Seek bar --> | |
<div class="bottom"> | |
<div id="Seek-Bar"> | |
<div id="Progress-Bar"></div> | |
<div id="Loading-Bar"></div> | |
<div id="handle"></div> | |
</div> | |
<div id="Time"></div> | |
<!-- Controls --> | |
<div id="Controls"> | |
<!-- <button class="Skip-Back"><i class="ion-skip-backward"></i></button> --> | |
<button class="Play"> | |
<i class="ion-play"></i> | |
</button> | |
<button class="Pause"> | |
<i class="ion-pause"></i> | |
</button> | |
<button class="Stop"> | |
<i class="ion-stop"></i> | |
</button> | |
<!-- <button class="Skip-forward"><i class="ion-skip-forward"></i></button> --> | |
<div id="Volume-Controls"> | |
<i class="ion-volume-medium" id="Volume-Icon"></i> | |
<input id="Volume" type="range" min="0" max="100" value="50" orient="vertical"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="playlist"> | |
<li song="http://gdurl.com/arOF" artist="AAUP FM" title="AAUP FM" cover="https://www.aaup.edu/sites/all/themes/scholarly/logo.png">Bulletproof</li> | |
</div> | |
</div> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> | |
<script src="js/index.js"></script> | |
</body> | |
</html> |
$(document).ready(function(){ | |
var isPlaying = false; | |
var songtime = 0; | |
var song; | |
$.get; | |
$(".Pause").hide(); | |
let fillBar = document.querySelector('#Progress-Bar'); | |
let seekBar = document.querySelector('#Seek-Bar'); | |
let volumeSlider = document.querySelector('#Volume'); | |
let container = document.querySelector('#container'); | |
//Initializer - Play First Song | |
initAudio($('#playlist li:first-child')); | |
function initAudio(element){ | |
var file = element.attr('song'); | |
var title = element.text(); | |
var cover = element.attr('cover'); | |
var artist = element.attr('artist'); | |
//Create a New Audio Object | |
song = new Audio(file); | |
if(!song.currentTime){ | |
$('#duration').html('0.00'); | |
} | |
$('#audio-info .title').text(title); | |
$('#audio-info .artist').text(artist); | |
$('#container').css('background-image', 'url(' + cover + ')'); | |
$('#playlist li').removeClass('active'); | |
element.addClass('active'); | |
} | |
// Play Button | |
$(".Play").click(function(){ | |
song.play(); | |
isPlaying = true; | |
console.log("Playing..."); | |
$(this).hide(); | |
$(".Pause").show(); | |
showDuration(); | |
$("#cover").css("transform", "scale(1)") | |
}); | |
// Pause Button | |
$(".Pause").click(function(){ | |
$(this).hide(); | |
$(".Play").show(); | |
song.pause(); | |
isPlaying = false; | |
console.log("Paused") | |
$("#cover").css("transform", "scale(.8)") | |
}); | |
// Stop Button | |
$(".Stop").click(function(){ | |
song.pause(); | |
song.currentTime = 0; | |
$(".Pause").hide(); | |
$(".Play").show(); | |
$("#cover").css("transform", "scale(.8)"); | |
}); | |
// Time Duration | |
if(!song.currentTime) { | |
$("#Time").html("0:00") | |
} | |
function showDuration() { | |
$(song).bind("timeupdate",function(){ | |
// Get Hours & Minutes | |
var s = parseInt (song.currentTime % 60); | |
var m = parseInt ((song.currentTime)/ 60) % 60; | |
// Add 0 if less them 10 | |
if(s < 10) { | |
s = "0" + s; | |
} | |
$("#Time").html(m + ":" + s) | |
var value = 0; | |
if(song.currentTime > 0) { | |
value = Math.floor((100/ song.duration) * song.currentTime); | |
} | |
let p = song.currentTime / song.duration; | |
fillBar.style.width = p * 100 + '%'; | |
}); | |
} | |
// Volume Control | |
volumeSlider.oninput = function() { | |
song.volume = parseFloat(this.value / 100); | |
}; | |
// progress bar | |
let mousedown = false | |
function clamp (min, val, max) { | |
return Math.min(Math.max(min, val), max); | |
} | |
function getP (e) { | |
let p = (e.clientX - container.offsetLeft - seekBar.offsetLeft) / seekBar.clientWidth; | |
p = clamp(0, p, 1); | |
console.log(p); | |
return p; | |
} | |
seekBar.addEventListener('mousedown', function (e) { | |
mousedown = true; | |
let p = getP(e); | |
fillBar.style.width = p * 100 + '%'; | |
console.log; | |
}); | |
//Playlist Song Click | |
$('#playlist li').click(function () { | |
song.pause(); | |
initAudio($(this)); | |
$('.Play').hide(); | |
$('.Pause').show(); | |
song.play(); | |
showDuration(); | |
}); | |
window.addEventListener('mousemove', function (e) { | |
if (!mousedown) return; | |
let p = getP(e); | |
fillBar.style.width = p * 100 + '%'; | |
fillBar.style.transition = "0s"; | |
}); | |
window.addEventListener('touchmove', function (e) { | |
if (!touchstart) return; | |
let p = getP(e); | |
fillBar.style.width = p * 100 + '%'; | |
fillBar.style.transition = "0s"; | |
}); | |
window.addEventListener('mouseup', function (e) { | |
if (!mousedown) return; | |
mousedown = false; | |
let p = getP(e); | |
console.log | |
fillBar.style.width = p * 100 + '%'; | |
fillBar.style.transition = "0.3s"; | |
song.currentTime = p * song.duration; | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
body, html{ | |
padding: 0px; | |
margin: 0px; | |
} | |
html { | |
height: 100%; | |
} | |
.BG { | |
background:linear-gradient(to bottom right, #135058,#F1F2B5) ; | |
background-repeat: no-repeat; | |
background-size: 100% 100%; | |
background-attachment: fixed; | |
background-size: cover; | |
height: 100%; | |
padding: 50px; | |
margin: 0px; | |
} | |
@media screen and (max-width: 450px) { | |
.BG { | |
padding: 0; | |
} | |
} | |
#container { | |
height: 500px; | |
width: 350px; | |
transition: all 1s; | |
margin: 0px auto; | |
border-radius: 10px; | |
overflow: hidden; | |
position: relative; | |
background-position: center; | |
background-size: cover; | |
z-index: 1; | |
} | |
.background { | |
height: 100%; | |
width: 100%; | |
background-image: inherit; | |
background-size: cover; | |
background-position: center; | |
transform: scale(1.2); | |
filter: blur(8px); | |
-webkit-filter: blur(8px); | |
z-index: -1; | |
box-shadow: 500px 0px rgba(146, 146, 146, 0.452) inset; | |
} | |
#audio-player { | |
align-items: center; | |
background-color: rgb(123, 75, 168); | |
margin: 5px; | |
border-radius: 10px; | |
} | |
#cover { | |
height: 300px; | |
width: 300px; | |
position: absolute; | |
top:0px; | |
background-image: inherit; | |
margin: 25px; | |
transform: scale(.8); | |
border-radius: inherit; | |
transition: all .5s; | |
background-size: cover; | |
background-position: center; | |
z-index: 7; | |
resize: both; | |
} | |
#Audio-Info { | |
text-align: center; | |
color: black; | |
height: 20px; | |
background-color: pink; | |
font-family: Verdana, sans-serif; | |
font-size: 22px; | |
} | |
#Audio-Info.artist { | |
text-align: center; | |
font-weight: bold; | |
} | |
#Controls { | |
height: 100px; | |
width: 100%; | |
background-color: rgba(152, 0, 0, 0.8); | |
position: absolute; | |
bottom: 0px; | |
text-align: center; | |
} | |
button { | |
border-style: none; | |
background-color: transparent; | |
} | |
#Volume { | |
writing-mode: bt-lr; /* IE */ | |
-webkit-appearance: slider-vertical; /* WebKit */ | |
width: 8px; | |
height: 60px; | |
padding: 0 5px; | |
align-self: bottom; | |
margin-top: 15px; | |
} | |
i#Volume-Icon { | |
font-size: 50px; | |
} | |
.Play,.Stop,.Pause,#Volume-Controls { | |
height: 100px; | |
width: 100px ; | |
display: inline-block; | |
font-size: 50px; | |
color: #fff | |
} | |
.bottom { | |
position: absolute; | |
bottom: 0px; | |
text-align: center; | |
width: 100%; | |
height: 150px; | |
} | |
button:active { | |
outline: none; | |
border: none; | |
} | |
ul { | |
width: 300px; | |
border: solid green 2px; | |
list-style: none; | |
} | |
li { | |
/* background-color: black; */ | |
margin: 10px; | |
color: white; | |
background-color: rgba(152, 0, 0, 0.534); | |
height: 20px; | |
margin: 0px; | |
transition: all .3s; | |
} | |
li:hover { | |
cursor: pointer; | |
background-color:rgba(152, 0, 0, 0.534); | |
} | |
#Time{ | |
color: #990000; | |
} | |
/* SEEK BAR */ | |
#Seek-Bar { | |
margin: 10px auto; | |
width: 300px; | |
height: 10px; | |
display: flex; | |
align-items: center; | |
background-color: rgba(255, 255, 255, 0.42); | |
border-radius: 1000px; | |
cursor: pointer; | |
/* margin: 0px auto; */ | |
} | |
#Progress-Bar { | |
height: 10px; | |
background-color: rgb(152, 0, 0); | |
width: 0px; | |
border-radius: 1000px 0px 0px 1000px ; | |
display: inline-block; | |
transition: all .3s; | |
} | |
#handle { | |
width: 10px; | |
height: 10px; | |
background-color:rgb(152, 0, 0); | |
border-radius: 5px; | |
margin-left:-5px ; | |
transform: scale(1); | |
transition: all .3s; | |
display: inline-block; | |
} | |
#Seek-Bar:hover #handle { | |
transform: scale(3); | |
background-color: rgb(199, 199, 199); | |
border-radius: 5px; | |
} | |
/* SEEK BAR */ | |
#playlist | |
{ | |
display: none; | |
} |