<!DOCTYPE html>
<head>
<title>MusicWebs</title>
<style>
#button{background-color: red;
display: inline-block;
margin: 10px; }
</style>
</head>

<body>
<div  id="button">Play/Pause</div>
</br>
<input id="location" type="range"  min="0" max="100" value="0"/>
</br>
</br>
<audio class="music"  controls>
  <source src="alto.wav" type="audio/wav">
</audio>

<audio class="music"  controls>
  <source src="mezz.wav" type="audio/wav">
</audio>

<audio class="music" controls>
  <source src="bari.wav" type="audio/wav">
</audio>

<audio class="music" controls>
  <source src="sop.wav" type="audio/wav">
</audio>

<audio class="music" controls>
  <source src="ten.wav" type="audio/wav">
</audio>

<audio class="music" controls>
  <source src="bass.wav" type="audio/wav">
</audio>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var main = function(){
	var songs = document.getElementsByClassName("music");

//sets start time
	 $("#location").attr("max", songs[0].duration);
	 $("[type=range]").change(function(){
    	var newVal=$(this).val();
    	for (var i=0;i<songs.length;i++){
			songs[i].currentTime= newVal;
		}
 	 });
	
	

	var isPlay = false;

	$('#button').click(function() {
		if (isPlay==false) {
			isPlay = true;
			for (var i=0;i<songs.length;i++){
				songs[i].play();
			}
		}
		else {
			isPlay=false;
			for (var i=0;i<songs.length;i++){
				songs[i].pause();
		}
	}
	
	});
};
$(document).ready(main);
</script>


</body>
</html>



Test for simultaneous play - works well on Chrome
Test for simultaneous play - works well on Chrome
