Testing HTML5 Custom Players

by MegaScience

HTML

<audio id="music" preload="true">
  <source src="http://www.robbynkirmsse.com/Resources/5-%20RememberROBBYN.mp3">
  <source src="http://www.alexkatz.me/codepen/music/interlude.ogg">
</audio>
<div id="audioplayer">
  <button id="pButton" class="play" onclick="play()"></button>
  <div id="timeline">
    <div id="playhead"></div>
  </div>
</div>

CSS

#audioplayer {
  width: 480px;
  height: 60px;
  margin: 50px auto auto auto;
  border: solid;
}

#pButton {
  height: 60px;
  width: 60px;
  border: none;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  outline: none;
}

.play {
  background: url('http://www.alexkatz.me/codepen/images/play.png');
}

.pause {
  background: url('http://www.alexkatz.me/codepen/images/pause.png');
}

#timeline {
  width: 400px;
  height: 20px;
  margin-top: 20px;
  float: left;
  border-radius: 15px;
  background: rgba(0, 0, 0, .3);
}

#playhead {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  background: rgba(0, 0, 0, 1);
}

JavaScript

/* Taken from: http://www.alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/ && http://codepen.io/katzkode/pen/Kfgix 

No credit taken - used for testing purposes, only. */

var music = document.getElementById('music'); // id for audio element
music.volume = 0.2;
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button

var playhead = document.getElementById('playhead'); // playhead

var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);

//Makes timeline clickable
timeline.addEventListener("click", function (event) {
	moveplayhead(event);
	music.currentTime = duration * clickPercent(event);
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(e) {
	return (e.pageX - timeline.offsetLeft) / timelineWidth;
}

// Makes playhead draggable 
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that mouse is moved on mouseUp only when the playhead is released 
var onplayhead = false;
// mouseDown EventListener
function mouseDown() {
	onplayhead = true;
	window.addEventListener('mousemove', moveplayhead, true);
	music.removeEventListener('timeupdate', timeUpdate, false);
}
// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(e) {
	if (onplayhead === true) {
		moveplayhead(e);
		window.removeEventListener('mousemove', moveplayhead, true);
		// change current time
		music.currentTime = duration * clickPercent(e);
		music.addEventListener('timeupdate', timeUpdate, false);
	}
	onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(e) {
	var newMargLeft = e.pageX - timeline.offsetLeft;
	if (newMargLeft >= 0 &&...