クリックイベントで再生するタイマーとオーディオファイル

Question

ボタンが音声を再生します。また、以下のタイマーも同時に起動したいと思います。今の時点で、ページがロードされるとすぐにタイマーが開始されます。ボタンを押すと、オーディオと一緒にしか始めることはできません。私は構文を理解することはできません。

<button class="button1" 
onclick="document.getElementById('sound1').play()"> 
</button> 



<p> Time ends in <span id="countdowntimer">10 </span> Seconds</p> 

<script type="text/javascript"> 
var timeleft = 10; 
var downloadTimer = setInterval(function(){ 
timeleft--; 
document.getElementById("countdowntimer").textContent = timeleft; 
if(timeleft <= 0) 
    clearInterval(downloadTimer); 
},1000); 
**strong text**</script> 

Answer 1

使用currentTimeとduration性質ここでは、左の時間を計算する例を次に示します。

var sound1 = document.getElementById('sound1'); 
 
var countDownTimer = document.getElementById('countdowntimer'); 
 

 
function play() { 
 
    sound1.play(); 
 
}; 
 

 
function updateTimer() { 
 
    countDownTimer.textContent = Math.floor(sound1.duration) - Math.floor(sound1.currentTime); 
 
}

<audio id="sound1" src="https://ia902508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3" ontimeupdate="updateTimer()" > 
 
    Your browser does not support the <code>audio</code> element. 
 
</audio> 
 

 
<button class="button1" onclick="play()">Play</button> 
 

 
<p> Time ends in <span id="countdowntimer"></span> Seconds</p>