HTML
<!--That song is not the real song obviously... just couldn't find the actual track and put the first sound I found that wasn't annoying-->
<div id="player"></div>
<section class="player-container">
<div class="player-left">
</div>
<div class="player-right">
<h1>Spring / Sun / Winter / Dread
<br>
<span>Everything Everything</span>
</h1>
<audio id="audio-demo">
<source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg">
<source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" type="audio/ogg">
<p>Sorry looks like your browser does not support this kind of media, please consider changing or updating your browser if you wish to continue.</p>
<a href="audiofile.mp3">audiofile.mp3</a>
</audio>
<div id="controls">
<span id="loading">loading</span>
<span class="left"><<</span>
<button id="play" style="display:none">►</button>
<button id="pause" style="display:none" >||</button>
<span class="right">>></span>
</div>
<div id="progress">
<div id="bar"></div>
</div>
</div>
</section>
SCSS
// body{
// overflow-y: scroll;
// }
//player
#player{
background-image: url(https://images.genius.com/533a6cd476a65559cffce0cf6c6d988a.1000x1000x1.jpg);
background-position: center center;
background-size: cover;
position: fixed;
z-index: -1;
display: block;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
padding: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
//player-container
.player-container{
position: absolute;
width: 680px;
display: block;
margin: 0 auto;
left: 50%;
transform: translate(-50%,2%);
}
//player left
.player-left{
width: 60%;
height: 400px;
position: absolute;
background-image: url(https://images.genius.com/533a6cd476a65559cffce0cf6c6d988a.1000x1000x1.jpg);
background-position: center center;
background-size: cover;
}
//player-right
.player-right{
width: 100%;
height: 250px;
margin-top: 200px;
margin-left: 20px;
background-color: rgba(255,255,255,1);
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
h1{
position: absolute;
right: 0px;
font-size: 1.7em;
font-family: Sans-serif;
fot-weight: bold;
color: #fff;
background-color:rgba(93,17,235,0.9);
padding: 10px 20px;
span{
font-size: 0.6em;
opacity: 0.9;
&:before{
content:'by';
margin-right: 5px;
font-weight: light;
}
}
}
#controls {
width: 190px;
float: right;
margin-right: 10%;
margin-top: 150px;
height:40px;
button{
background-color: #5d11eb;
box-shadow: 0px;
border: 2px solid #5d11eb;
color: #fff;
font-weight: bold;
height: 40px;
width: 40px;
text-align: center;
border-radius: 100%;
box-shadow: 0 3px 10px rgba(0,0,0,0.15), 0 1px 12px rgba(0,0,0,0.20);
opacity: 0.9;
transition: all 0.7s ease;
&:hover{
opacity: 1;
cursor: pointer;
}
}
span{}
.right{
display: inline;
float: right;
margin-top: -40px;
}
.left{
display: inline;
float: left;
margin-right: 35px;
}
.left,.right{
border: 1px solid #5d11eb;
color: #5d11eb;;
font-weight: bold;
padding: 10px 10px;
border-radius: 100%;
box-shadow: 0 3px 5px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.10);
opacity: 0.4;
transition: all 0.7s ease;
&:hover{
cursor: pointer;
opacity: 0.7;
}
}
}
#progress {
margin-left: 80px;
background-color: rgba(0,0,0,0.07);
border-radius: 20px;
cursor: pointer;
position: absolute;
bottom: 20px;
width: 80%;
}
#bar {
height: 10px;
background-color: #5d11eb;
width: 0;
border-radius: 20px;
}
}
JAVASCRIPT
/*For some reason javascript is not working on codepad, I uploaded this to my codepen account as well if you want to check it out
http://codepen.io/kaprilam/pen/egjwjb
*/
window.onload = function(){
var myAudio = document.getElementById('audio-demo');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var loading = document.getElementById('loading');
var bar = document.getElementById('bar');
function displayControls() {
loading.style.display = "none";
play.style.display = "block";
}
if (myAudio.paused) {
displayControls();
} else {
myAudio.addEventListener('canplay', function() {
displayControls();
});
}
play.addEventListener('click', function() {
myAudio.play();
play.style.display = "none";
pause.style.display = "block";
});
pause.addEventListener('click', function() {
myAudio.pause();
pause.style.display = "none";
play.style.display = "block";
});
//progress
myAudio.addEventListener('timeupdate', function() {
bar.style.width = parseInt(((myAudio.currentTime / myAudio.duration) * 100), 10) + "%";
});
var progress = document.getElementById('progress');
progress.addEventListener('click', function(e) {
var clickPosition = (e.pageX - this.offsetLeft) / this.offsetWidth;
var clickTime = clickPosition * myAudio.duration;
myAudio.currentTime = clickTime;
});
}//end of onload
