alexanderkatz / html5-audio Goto Github PK

document.addEventListener("DOMContentLoaded", function(event) {
/* DOMContentLoaded*/
});

<li><a src='http://www.alexkatz.me/codepen/music/chooseyourweapon.mp3'> Choose</a></li>
<li><a src='http://www.alexkatz.me/codepen/music/interlude.mp3'>Interlude</a></li>
<li><a src='http://www.alexkatz.me/codepen/music/scriptures.mp3'>Scriptures</a></li>

// Actions that happen when a link is clicked:

function showControls() { 

	/*---------------------------------------------------------------------------------------------------------------------------------------
	Script source; http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/
	Icon source: Icon source: https://www.iconfinder.com/search/?q=play&maximum=16
	REMARKS !! : 
		- By adding the function 'getPosition(el)' the script also works fine for absolute/relative and fixed positioning.
		  Also scrolling and window resize can be used by adding listeners for those events and updating the position for them.
		- e.pageX is replaced by e.clientX, this works just as well, with e.clientX the script is also stable and this has the advantage of a
		  wider browser support. e.pageX is not supported by IE 8 (only from IE 9 and up). Although there is an issue with e.clientX in lower
		  IE versions from 7 and down described at http://help.dottoro.com/ljsqnefp.php in the following way:
			  In Internet Explorer earlier than version 8, the clientX property retrieves the position of the mouse in physical pixel size,
			  while from version 8, it returns the position in logical pixel size. What does it mean?
			  If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -),
			  the clientX property works differently from version 8 than in earlier versions. The position of the mouse pointer is calculated
			  in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different.
			  From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the position is calculated in the current pixel size.
			  So then e.clientX is not influenced by user zooming.
	----------------------------------------------------------------------------------------------------------------------------------------*/
	
	// get references to variables
	var audio = document.getElementById('audio');	 				 		// audio object
	var pButton = document.getElementById('pButton'); 				 		// play button
	var playhead = document.getElementById('playhead');				 		// moving playhead
	var timeline = document.getElementById('timeline');				 		// timeline for playhead																			
	var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; 		// timeline width adjusted for playhead
	
	if (audio.src) {														// 'duration' is globally declared (see top of script) to keep track of 
		duration = audio.duration;											// the duration of the audio clip ( 'zero' if audio.src = '' )
	}																		// duration is constantly updated by EventListener "canplaythrough"
																			// !!!!!! in case of changing multiple media sources !!!!!!!; be sure to
																			// get the new value of 'audio.duration' every time 'audio.src' is changed
	  
	// timeupdate event listener
	audio.addEventListener("timeupdate", timeUpdate, false);
	
	// makes timeline clickable
	timeline.addEventListener("click", function (event) {
		moveplayhead(event);
		if (!duration == 0 || !duration == NaN) {							// this is to avoid errors if no audio is loaded; audio.src=''
			audio.currentTime = duration * clickPercent(event);
		} 
	}, false);
	
	// returns click as decimal (.77) of the total timelineWidths
	function clickPercent(e) {
		return (e.clientX - getPosition(timeline).x) / 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);
		audio.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);
			
			if (!duration == 0 || !duration == NaN) {						// this is to avoid errors if no audio is loaded; audio.src=''
				audio.currentTime = duration * clickPercent(e);	
			} 
			audio.addEventListener('timeupdate', timeUpdate, false);
		}
		onplayhead = false;
	}
	
	// mousemove EventListener
	// Moves playhead as user drags
	function moveplayhead(e) {
		
		var newMargLeft = e.clientX - getPosition(timeline).x;
		if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
			playhead.style.marginLeft = newMargLeft + "px";
		}
		
		if (newMargLeft < 0) {
			playhead.style.marginLeft = "0px";
		}
		
		if (newMargLeft > timelineWidth) {
			playhead.style.marginLeft = timelineWidth + "px";
		}
		
	}
	
	// timeUpdate synchronizes playhead position with current point in audio 
	function timeUpdate() {
		
		var playPercent = timelineWidth * (audio.currentTime / duration);
		playhead.style.marginLeft = playPercent + "px";
		
		if (audio.currentTime == duration) {
			
			pButton.className = "";
			pButton.className = "play";
			
		}
		
	}
	
	// gets audio file duration
	audio.addEventListener("canplaythrough", function () {
		duration = audio.duration;  
	}, false);
	
	// getPosition(el) ; cross browser function to get an element's exact (absolute) position from the entry
	// point(=html tag) of the DOM document. This is used to make the controls available in any positon.
	// see document "Javascript; Get an Element's Position Using JavaScript.docx"
	// N.B. ===>Deal with the page getting resized or scrolled: add the 2 below event listeners
	// 				window.addEventListener("scroll", updatePosition, false);
	// 				window.addEventListener("resize", updatePosition, false); 
	// and a function like this:
	// 			function updatePosition() {
	// 				add your code to update the position when your browser
	// 				is resized or scrolled
	//			}
	
	function getPosition(el) {
	  var xPos = 0;
	  var yPos = 0;
	 
	  while (el) {
		if (el.tagName == "BODY") {
		  // deal with browser quirks with body/window/document and page scroll
		  var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
		  var yScroll = el.scrollTop || document.documentElement.scrollTop;
	 
		  xPos += (el.offsetLeft - xScroll + el.clientLeft);
		  yPos += (el.offsetTop - yScroll + el.clientTop);
		  
		} else {
			
		  // for all other non-BODY elements
		  xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
		  yPos += (el.offsetTop - el.scrollTop + el.clientTop);
		  
		}
	 
		el = el.offsetParent;
		
	  }
	  return {
		x: xPos,
		y: yPos
	  };
	}
	
}

	<div id="wrapper">
		<!--Audio Player Interface-->
		<div id="audioplayer">
			<button id="pButton" class="play"></button>
			<div id="timeline">
				<div id="playhead"></div>
			</div>
		</div>
	</div>`