troubleshooting Question

Looping more than 4 audio samples at the same time.

Avatar of ForLoop5
ForLoop5Flag for United States of America asked on
JavaScriptHTML
4 Comments1 Solution369 ViewsLast Modified:
Im working on making a beat mixer. I am aiming to have all the sounds loop together.

I start off by playing all the sounds and then muting them immediately.  Then I use a button to un-mute each channel so that they can be triggered on and off.  Currently this works with up to 4 sounds with the method I'm using. From the 5th sound on nothing plays but 1 - 4 still work.  Can you take a look at my code and tell me what i might be doing wrong.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<audio id="audio" src="one.ogg" loop></audio>
<audio id="audio2" src="two.ogg" loop></audio>
<audio id="audio3" src="three.ogg" loop></audio>
<audio id="audio4" src="four.ogg" loop></audio>
<audio id="audio5" src="five.ogg" loop></audio>
<audio id="audio6" src="six.ogg" loop></audio>
<audio id="audio7" src="seven.ogg" loop></audio>
<audio id="audio8" src="eight.ogg" loop></audio>
<audio id="audio9" src="nine.ogg" loop></audio>
<audio id="audio10" src="ten.ogg" loop></audio>

<script type="text/javascript">
    var context = new webkitAudioContext;
    var el = document.getElementById('audio');
    var source = context.createMediaElementSource(el);
    source.connect(context.destination);
	el.play();
	//el.muted = true;
   // el.play();

	var context2 = new webkitAudioContext;
    var el2 = document.getElementById('audio2');
    var source2 = context2.createMediaElementSource(el2);
    source2.connect(context2.destination);
    el2.play();
	
		var context3 = new webkitAudioContext;
    var el3 = document.getElementById('audio3');
    var source3 = context3.createMediaElementSource(el3);
    source3.connect(context3.destination);
    el3.play();
	
		var context4 = new webkitAudioContext;
    var el4 = document.getElementById('audio4');
    var source4 = context4.createMediaElementSource(el4);
    source4.connect(context4.destination);
   el4.play();
	
		var context5 = new webkitAudioContext;
    var el5 = document.getElementById('audio5');
    var source5 = context5.createMediaElementSource(el5);
    source5.connect(context5.destination);
    el5.play();
	
		var context6 = new webkitAudioContext;
    var el6 = document.getElementById('audio6');
    var source6 = context6.createMediaElementSource(el6);
    source6.connect(context6.destination);
    el6.play();
	
		var context7 = new webkitAudioContext;
    var el7 = document.getElementById('audio7');
    var source7 = context7.createMediaElementSource(el7);
    source7.connect(context7.destination);
    el7.play();
	
	
		var context8 = new webkitAudioContext;
    var el8 = document.getElementById('audio8');
    var source8 = context8.createMediaElementSource(el8);
    source8.connect(context8.destination);
    el8.play();
	
		var context9 = new webkitAudioContext;
    var el9 = document.getElementById('audio9');
    var source9 = context9.createMediaElementSource(el9);
    source9.connect(context9.destination);
    el9.play();
	
		var context10 = new webkitAudioContext;
    var el10 = document.getElementById('audio10');
    var source10 = context10.createMediaElementSource(el10);
    source10.connect(context10.destination);
    el10.play();
	
	
//	el2.muted = true;
	
//<button onclick="JavaScript:alert('Well done!')">Click Me!</button>
function funct(){
	if (el.muted == false){
	el.muted = true;	
	return;
	}
	if (el.muted == true){
	el.muted = false;	
	return;
	}
}

function funct2(){
	if (el2.muted == false){
	el2.muted = true;	
	return;
	}
	if (el2.muted == true){
	el2.muted = false;	
	return;
	}	
}

function funct3(){
	if (el3.muted == false){
	el3.muted = true;	
	return;
	}
	if (el3.muted == true){
	el3.muted = false;	
	return;
	}	
}

function funct4(){
	if (el4.muted == false){
	el4.muted = true;	
	return;
	}
	if (el4.muted == true){
	el4.muted = false;	
	return;
	}	
}

function funct5(){
	if (el5.muted == false){
	el5.muted = true;	
	return;
	}
	if (el5.muted == true){
	el5.muted = false;	
	return;
	}	
}


function funct6(){
	if (el6.muted == false){
	el6.muted = true;	
	return;
	}
	if (el6.muted == true){
	el6.muted = false;	
	return;
	}	
}

function funct7(){
	if (el7.muted == false){
	el7.muted = true;	
	return;
	}
	if (el7.muted == true){
	el7.muted = false;	
	return;
	}	
}

function funct8(){
	if (el8.muted == false){
	el8.muted = true;	
	return;
	}
	if (el8.muted == true){
	el8.muted = false;	
	return;
	}	
}


function funct9(){
	if (el9.muted == false){
	el9.muted = true;	
	return;
	}
	if (el9.muted == true){
	el9.muted = false;	
	return;
	}	
}


function funct10(){
	if (el10.muted == false){
	el10.muted = true;	
	return;
	}
	if (el10.muted == true){
	el10.muted = false;	
	return;
	}	
}





</script>
<a href="#current" onclick="funct()">Link 1</a>
<a href="#current" onclick="funct2()">Link 2</a>
<a href="#current" onclick="funct3()">Link 3</a>
<a href="#current" onclick="funct4()">Link 4</a>
<a href="#current" onclick="funct5()">Link 5</a>
<a href="#current" onclick="funct6()">Link 6</a>
<a href="#current" onclick="funct7()">Link 7</a>
<a href="#current" onclick="funct8()">Link 8</a>
<a href="#current" onclick="funct9()">Link 9</a>
<a href="#current" onclick="funct10()">Link 10</a>

</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros