Avatar of ForLoop5
ForLoop5Flag for United States of America asked on

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

JavaScriptHTML

Avatar of undefined
Last Comment
ForLoop5

8/22/2022 - Mon
Rob

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

ASKER
ForLoop5

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
ForLoop5

Thanks. Nice work.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck