multitrack player

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>

  <style type='text/css'>
.mp3Player {
    padding:8px;
    margin:8px;
    background-color:#ddf;
}
  </style>


<script type='text/javascript'>//<![CDATA[

jQuery(function (){
	var myAudio = document.getElementById("myAudio");
	var playList = [
		{src:'songs/loop1.mp3', t:'title 1'}, /* .ogg will be alternatives */
		{src:'songs/loop2.mp3', t:'title 2'},
		{src:'songs/loop3.mp3', t:'title 3'},
		{src:'songs/loop4.mp3', t:'title 4'},
		{src:'songs/loop5.mp3', t:'title 5'}
	];
	var playListIndex = 0;
	var current = null;
	var playingString = "<span aria-hidden=\"true\" data-icon=\"&#xe002;\"></span><span class=\"screen-reader-text\">Pause</span>";
	var pausedString = "<span aria-hidden=\"true\" data-icon=\"&#xe003;\"></span><span class=\"screen-reader-text\">Play</span>";
	$('.btnPlayPause').click(function(e){
		var target = this;
		//console.log(target, current); //return;
		if (current == target) {
			target.innerHTML = pausedString;
			target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
			myAudio.pause();
			current = null;
		} else { // current!=target
			if (current != null) {
				current.innerHTML = pausedString;
				current.parentNode.setAttribute('data-pos', '0'); //reset position
				target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
			}
			current = target;
			target.innerHTML = playingString;
			var src;
			if (target.id && target.id == 'specialPlay') {
				src = playList[playListIndex].src;
				//console.log(playList, src);
				target.parentNode.parentNode.title = playList[playListIndex].t;
				myAudio.onended = function(){ //auto progress to next track
					playListIndex = (playListIndex<playList.length-1) ? playListIndex+1 :0;
					myAudio.src = playList[playListIndex].src;
					target.parentNode.setAttribute('data-pos', '0'); //reset position
					target.parentNode.parentNode.title = playList[playListIndex].t;
					myAudio.play();
				}
			} else {
				src = target.parentNode.getAttribute('data-src');
			}
			if(myAudio.canPlayType && myAudio.canPlayType("audio/mpeg") != "") { // MP3
				src = src;
			} else if(myAudio.canPlayType && myAudio.canPlayType("audio/ogg") != "") {  // OGG
				src = src.replace(/.mp3$/i,'.ogg');;
			} else {
				//alert('Error: your browser doesn\'t support playing audio. Please use modern browser like Chrome, Firefox, Safari or IE9.');
				return;
			}
			myAudio.src = src;
			myAudio.play();
			myAudio.onloadeddata = function () {
				myAudio.currentTime = parseFloat(target.parentNode.getAttribute('data-pos'));
			};
		}
	});
	$('.btnMute').click(function(e){
		myAudio.muted = !myAudio.muted;
		$('.btnMute').each(function(){
			if (myAudio.muted) {
				this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe001;\"></span><span class=\"screen-reader-text\">Muted</span>";
			} else {
				this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe000;\"></span><span class=\"screen-reader-text\">Audible</span>";
			}
		});
	});
});

//]]>

</script>


</head>
<body>


<div class="custom"><!--top multitrack player-->
	<div class="audio-container">
		<div class="controls" data-pos="0">
			<button class="btnPlayPause" id="specialPlay">
				<span class="controller" aria-hidden="true" data-icon="&#xe002;"></span>
				<span class="screen-reader-text">Play/Pause</span>
			</button>
			<button class="btnMute">
				<span class="controller" aria-hidden="true" data-icon="&#xe001;"></span>
				<span class="screen-reader-text">Mute/Unmute</span>
			</button>
		</div><!-- /controls -->
	</div><!-- /audio-container -->
</div>

  <audio id="myAudio"></audio>

<div class="mp3Player" data-src="a.mp3" data-src2="a.ogg" data-pos="0">
    <button class="btnPlayPause button">►||</button>
    <button class="btnMute button">MUTE</button>
    <span class="infoLabel">Audio #1</span>
</div>

<div class="mp3Player" data-src="b.mp3" data-src2="b.ogg" data-pos="0">
    <button class="btnPlayPause button">►||</button>
    <button class="btnMute button">MUTE</button>
    <span class="infoLabel">Audio #2</span>
</div>

<!-- http://stackoverflow.com/questions/18035392/control-multiple-html5-audio-tracks-using-a-single-controller/ -->
</body>
</html>