感谢您查看我的问题。我想同时播放多个音频循环,以便它们同步,立即将它们全部静音,然后有按钮来静音和取消静音每个声音。我已经实现了 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>