Custom Audio Player

<!--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="" type="audio/mpeg"> <source src="" 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>
// body{ // overflow-y: scroll; // } //player #player{ background-image: url(; 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(; 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; } }
/*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 */ 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() { = "none"; = "block"; } if (myAudio.paused) { displayControls(); } else { myAudio.addEventListener('canplay', function() { displayControls(); }); } play.addEventListener('click', function() {; = "none"; = "block"; }); pause.addEventListener('click', function() { myAudio.pause(); = "none"; = "block"; }); //progress myAudio.addEventListener('timeupdate', function() { = 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
Expand for more options Login