使用javascript一次循环超过4个声音

Question

感谢您查看我的问题。我想同时播放多个音频循环，以便它们同步，立即将它们全部静音，然后使用按钮静音和取消静音。我已经达到4声或更少的声音。一次超过4个声音的任何东西都不会播放。你能帮帮我吗？我之所以一次播放它们，然后静音和取消静音的原因也是让它们保持同步，因为循环长度和bpm相同。

<!--declare audio tags and sounds-->
<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>

<!--Create new webkitaudiocontext for each sound and play-->

<script type="text/javascript">
var context = new webkitAudioContext;
var el = document.getElementById('audio');
var source = context.createMediaElementSource(el);
source.connect(context.destination);
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();


//functions that check to see if the audio is muted or playing on button click.

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;
}   
}



//buttons that mute or unmute the playing audio

</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>

Answer 1

如果您需要高级实时音频操作，请使用Web Audio API代替HTML5 <audio>元素。

Web Audio API允许定时和多个同时语音播放。

http://www.html5rocks.com/en/tutorials/webaudio/intro/