asked on 9/7/2013

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>

Last Comment

9/9/2013

9/8/2013

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

ForLoop5

9/8/2013

ASKER

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

ASKER CERTIFIED SOLUTION

Rob

9/9/2013

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

ForLoop5

9/9/2013

ASKER

Thanks. Nice work.