Looping more than 4 audio samples at the same time.

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>

Open in new window

LVL 1
ForLoop5Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
I have just simplified your code.  What was the need for the webkitAudioContext?

http://jsbin.com/IdOheZ/2/edit

function funct(tagid){
	var el = document.getElementById(tagid);

	if (el.muted === false){
		el.muted = true;	
		return;
	}
	if (el.muted === true){
		el.muted = false;	
		return;
	}
}

window.onload = function() {
	var context = [];
	var el;
	var source;
	for (var i=1; i<=10; i++) {
		el = document.getElementById('audio'+i);
		el.play();
	}
};

Open in new window


new html:
<!doctype html>
<html>
<head>
  
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
%code%
</script>

  </head>
<body>
<audio id="audio1" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio2" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio3" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio4" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio5" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio6" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio7" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio8" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio9" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>
<audio id="audio10" src="http://upload.wikimedia.org/wikipedia/en/f/f6/Radiohead_-_2_%2B_2_%3D_5_%28sample%29.ogg" loop></audio>

<a href="#current" onclick="funct('audio1')">Link 1</a>
<a href="#current" onclick="funct('audio2')">Link 2</a>
<a href="#current" onclick="funct('audio3')">Link 3</a>
<a href="#current" onclick="funct('audio4')">Link 4</a>
<a href="#current" onclick="funct('audio5')">Link 5</a>
<a href="#current" onclick="funct('audio6')">Link 6</a>
<a href="#current" onclick="funct('audio7')">Link 7</a>
<a href="#current" onclick="funct('audio8')">Link 8</a>
<a href="#current" onclick="funct('audio9')">Link 9</a>
<a href="#current" onclick="funct('audio10')">Link 10</a>

</body>
</html>

Open in new window

0
ForLoop5Author Commented:
The webKitAudioContext was used fixed the issue with a gap between each loop.  The gap is very small but it ruins the smooth playback of the loop.  From what I understand the webkitaudiocontext loads the file into memory and this creates  gap less looping
0
RobOwner (Aidellio)Commented:
I'm not noticing any difference in gapless playing but that could be the clips I'm using.

Seems you are going to be limited by the available resources and it seems this is 4 for me.

I've modified the code for you to use more than one and it's certainly helped the distortion that was happening when just using one:

http://jsbin.com/IdOheZ/4/edit

This will give you the possibility of having 4 audio clips per webKitAudioContext but experiment as you may be able to get more.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ForLoop5Author Commented:
Thanks. Nice work.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.