Player Audio

by Lazaro Contreras

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<div class="player">
  <audio url="https://a.tumblr.com/tumblr_nyag1wXeQs1sdvzwso1.mp3"></audio>
  <a id="play" class="material-icons">play_arrow</a>
  <div class="progress">
    <div class="progressCharge">
       <div class="track pro"></div>
    </div>
  </div>
  <a id="mute" class="material-icons">volume_up</a>
  <div class="volume">
    <div class="volumeCharge">
      <div class="track vol"></div>
    </div>
  </div>
</div>

CSS

*{
  margin:0;
  padding:0;
}
.player{
  position:relative;
  display:block;
  left:0;
  right:0;
  margin:0 auto;
  height:25px;
  background:#333;
  border-radius: 0 0 2px 2px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor:default;
}
.player a.material-icons{
  position:relative;
  color:white;
  cursor:pointer;
  width:30px;
  height:35px;
}
.player a#mute{
  position:absolute;
  right:75px;
  float:rigt;
}
.player .progress{
  position:absolute;
  display:block;
  left:0;
  right:0;
  margin-left:25px;
  margin-right:105px;
  bottom:10px;
  height:5px;
  background:grey;
}
.player .progressCharge{
  position:relative;
  display:block;
  width:0;
  height:5px;
  background:red;
}
.player .volume{
  position:absolute;
  display:inline-block;
  right:7.5px;
  float:rigt;
  bottom:10px;
  width:70px;
  height:5px;
  background:grey;
}
.player .volumeCharge{
  position:relative;
  display:block;
  width:100%;
  height:5px;
  background:red;
}
.player .track.pro{
  position:absolute;
  display:none;
  top:-4px;
  right:-6px;
  width:13px;
  height:13px;
  background:red;
  border-radius:50%;
}
.player .track.vol{
  position:absolute;
  display:block;
  top:-4px;
  right:-2px;
  width:4px;
  height:13px;
  background:white;
}

JavaScript

function $(query){
  return document.querySelector(query);
}
var audio = $('audio');
var play = $('#play');
var mute = $('#mute');
var player = $('.player');
var vol = $('.volume');
var volC = $('.volumeCharge');
var pro = $('.progress');
var proC = $('.progressCharge');
var proT = $('.track.pro');
//play
audio.onpause = function(){
 play.innerHTML = 'play_arrow';
}
audio.onplay = function(){
 play.innerHTML = 'pause';
}
play.onclick = function(){
  if(audio.paused){
    audio.play();
  }else{
    audio.pause();
  }
}
//volume
audio.onvolumechange = function(){
  if(!audio.muted){
    volumeState()
    volC.style.width = audio.volume*100/1 + '%';
  }else{
    mute.innerHTML = 'volume_off';
    volC.style.width = '0%';
  }
}
mute.onclick = function(){
  if(audio.muted){
    audio.muted = false;
  } else{
    audio.muted = true;
  }
}
function volumeState(){
  var Value = audio.volume;
  if(Value > 0.5){
    mute.innerHTML = 'volume_up';
  }else if(Value > 0){
    mute.innerHTML = 'volume_down';
  }else{
    mute.innerHTML = 'volume_mute';
  }
}
vol.onmousedown = function(){
  window.addEventListener('mousedown',VolumeOn);
  window.addEventListener('mousemove',VolumeOn);
  window.addEventListener('mouseup',VolumeOff);
}
function VolumeOn(e){
  var mouse = e.clientX - (player.offsetLeft + vol.offsetLeft);
  var value = mouse*1/vol.offsetWidth;
  if(value > 0 & value < 1){
    audio.volume = value;
  }else if(value <= 0){
    value = 0;
    audio.volume = value;
  }else{
    value = 1;
    audio.volume = value;
  }
}
function VolumeOff(){
  window.removeEventListener('mousedown',VolumeOn);
  window.removeEventListener('mousemove',VolumeOn);
  window.removeEventListener('mouseup',VolumeOff);
}
//progress
audio.ontimeupdate = function(){
  proC.style.width = this.currentTime * 100 / this.duration + '%';
}
pro.onmouseover = function(){
  proT.style.display = 'block';
}
pro.onmouseleave = function(){
  proT.style.display = 'none';
}
pro.onmousedown = function(){
 ...