当选中此文件的复选框时,会有一个音频文件,其中包含一个'节拍器点击'在第二个录音带开始之前添加。另外还有一个下拉菜单,您可以选择第二个录音带重复的次数。我有两个问题:这是编写代码的最佳方式吗?是否有可能暂停'定时并在同一时间点重启音频?我试过window.clearTimeout(myFunction),但它没有用。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<audio id="myAudio1">
<source src="http://u1259p183.web0080.zxcs.nl/html5musicxmlviewer/waveform-playlist-1.0.9/dist/mp3/metronome.mp3" type="audio/mpeg">
</audio>
<audio id="myAudio2">
<source src="http://u1259p183.web0080.zxcs.nl/jQuery.mmenu-master/demo/sortablemenumobile/range_items/audio_notes/10_a.mp3" type="audio/mpeg">
</audio>
</head>
<body>
<span style="font-family:arial; font-size:16px;"><b>Precount:</b></span>
<input id="precount" type="checkbox"><br><br>
<span style="font-family:arial; font-size:16px;"><b>Repeat:</b></span>
<select>
<option id="ok1">1x</option>
<option id="ok2">2x</option>
<option id="ok3">3x</option>
</select><br><br>
<button type="button" id="play">Play</button>
<button onclick="pause()">Pause</button>
<script type="text/javascript">
function pause() {
window.clearTimeout(myFunction);
}
</script>
<script>
var a1 = document.getElementById("myAudio1");
var a2 = document.getElementById("myAudio2");
function timedAudio_a() {
setTimeout(PlayThrice, 4000)
}
function timedAudio_b() {
setTimeout(PlayOnce, 0000)
setTimeout(PlayThrice, 4000)
}
function timedAudio1() {
setTimeout(PlayThrice, 0000)
setTimeout(PlayThrice, 4000)
}
function timedAudio2() {
setTimeout(PlayOnce, 0000)
setTimeout(PlayThrice, 4000)
setTimeout(PlayThrice, 8000)
}
function timedAudio3() {
setTimeout(PlayOnce, 0000)
setTimeout(PlayThrice, 4000)
setTimeout(PlayThrice, 8000)
setTimeout(PlayThrice, 12000)
}
function timedAudio4() {
setTimeout(PlayThrice, 0000)
setTimeout(PlayThrice, 4000)
setTimeout(PlayThrice, 8000)
}
function PlayOnce() {
a1. play();
}
function PlayThrice() {
a2. play();
}
</script>
<script>
document.getElementById("play").addEventListener("click", myFunction);
function myFunction() {
if ((document.getElementById("precount").checked==true) && (document.getElementById("ok1").selected==true)) {
timedAudio_b();
}
else if ((document.getElementById("precount").checked==false) && (document.getElementById("ok1").selected==true)) {
timedAudio_a();
}
else if ((document.getElementById("precount").checked==true) && (document.getElementById("ok2").selected==true)) {
timedAudio2();
}
else if ((document.getElementById("precount").checked==false) && (document.getElementById("ok2").selected==true)) {
timedAudio1();
}
else if ((document.getElementById("precount").checked==false) && (document.getElementById("ok3").selected==true)) {
timedAudio4();
}
else if ((document.getElementById("precount").checked==true) && (document.getElementById("ok3").selected==true)) {
timedAudio3();
}
else {
timedAudio1();
}
}
</script>
</body>
</html>