Skip to content

Instantly share code, notes, and snippets.

@owidat

owidat/aaup-edu-fm-audio-player.markdown

Last active April 18, 2019 11:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save owidat/8600e7f0ef479e315e399a06086917db to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save owidat/8600e7f0ef479e315e399a06086917db to your computer and use it in GitHub Desktop.
Download ZIP
AAUP.EDU FM Audio Player
Raw
aaup-edu-fm-audio-player.markdown

AAUP.EDU FM Audio Player

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.

License.

Raw
index.html
<!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>
Raw
script.js
$(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;
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment