用javascript控制音频

时间:2016-08-31 08:36:19

标签: javascript html

当选中此文件的复选框时,会有一个音频文件,其中包含一个'节拍器点击'在第二个录音带开始之前添加。另外还有一个下拉菜单,您可以选择第二个录音带重复的次数。我有两个问题:这是编写代码的最佳方式吗?是否有可能暂停'定时并在同一时间点重启音频?我试过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> 

0 个答案:

没有答案