Audio player

HTML

<figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">

<div id="fader"></div>

<audio controls src="//demosthenes.info/assets/audio/24-ghosts-III.mp3" id="audiotrack" preload="auto" itemprop="audio"></audio>
</figure>

CSS

@font-face {
    font-family:"SSStandard";
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-standard.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}
.ss-icon,.ss-icon.ss-standard {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    
}
.ss-icon,.ss-icon.ss-standard {
    font-family: "SSStandard";
}
* { box-sizing: border-box; }
figure#audioplayer { 
  border: 1px solid #000;
  background: #333;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dark_wall.png);
  overflow: hidden;
  width: 9rem;
  padding: .4rem;
  margin: 0 auto;
}
figure#audioplayer audio { width: 0; height: 0; }
figure#audioplayer figcaption { 
  width: 21.5rem; font-size: 0;
  margin: .45rem; background: #000;
  float: left; 
  border: 1px solid #555;
}
figure#audioplayer figcaption div { 
  background: #000;
  color: #fff;
  padding: .8rem;
  font-family: Avenir, Helvetica, sans-serif;
  text-transform: uppercase; font-size: .8rem;
  display: inline-block;
}
figure#audioplayer figcaption div span { 
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem; 
}
div#album { 
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  width: 100%; 
}
div#time { 
  width: 7.55rem;
  border-left: 1px solid #555; 
}
input#volumeSlider { -webkit-appearance: slider-vertical;  }
figure#audioplayer button { 
  width: 3rem; height: 3rem; 
  background: #000; color: #fff; 
  border: none; 
}
#playback { clear: both; }
div#fader { display: inline-block; }
#playback progress { 
  margin-left: 1rem; 
  width: 20rem; height: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #888;
  border: none;
  color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
  background: hsl(44,100%,44%);
}
progress::-webkit-progress-value { background: hsl(44,100%,44%); }
progress::-moz-progress-bar...

JavaScript

function player() {
  if (audioTrack.paused) {
	setText(this, "Pause");
	audioTrack.play();
	} else {
	setText(this,"Play");
	audioTrack.pause();	
	}
}

function setText(el,text) {
	el.innerHTML = text;
}

function finish() {
		audioTrack.currentTime = 0;
		setText(playButton,"Play");
}

function updatePlayhead() { 
	playhead.value = audioTrack.currentTime;
	var s = parseInt(audioTrack.currentTime % 60);
    var m = parseInt((audioTrack.currentTime / 60) % 60);
    s = (s >= 10) ? s : "0" + s;
    m = (m >= 10) ? m : "0" + m;
    playbacktime.innerHTML = m + ':' + s ;
    
}

function volumizer() {
	if (audioTrack.volume == 0) { setText(muteButton,"volume"); }
	else { setText(muteButton,"volumehigh"); }
}

function muter() {
	if (audioTrack.volume == 0) {
		audioTrack.volume = restoreValue;
		volumeSlider.value = restoreValue;
	} else {
		audioTrack.volume = 0;
		restoreValue = volumeSlider.value;
		volumeSlider.value = 0;
	}
}

function setAttributes(el, attrs) {
	for(var key in attrs){
		el.setAttribute(key, attrs[key]);
	}
}

var audioPlayer = document.getElementById("audioplayer"),
fader = document.getElementById("fader"),
playback = document.getElementById("playback"),
audioTrack = document.getElementById("audiotrack"),
playbackTime = document.getElementById("playbacktime"),
playButton = document.createElement("button"),
muteButton = document.createElement("button"),
playhead = document.createElement("progress")
volumeSlider = document.createElement("input");
setText(playButton, "Play");
setText(muteButton, "volumehigh");
setAttributes(playButton, { "type": "button", "class": "ss-icon" });
setAttributes(muteButton, { "type": "button", "class": "ss-icon" });
muteButton.style.display = "block";
muteButton.style.margin = "0 auto";
setAttributes(volumeSlider, { "type": "range", "min": "0", "max": "1", "step": "any", "value": "1", "orient": "vertical", "id": "volumeSlider" });
var duration = audioTrack.duration;
setAttributes(playhead, { "min": "0", "max": "100",...