單擊按鈕時，使計時器與音樂一起

Question

單擊此按鈕后，我想啟動一個計時器。 我發現了大量的計時器在頁面加載時啟動。 但是，單擊按鈕時，沒有一個啟動。 另一個復雜之處是，它需要在聲音開始時同時開始。 任何幫助將不勝感激。

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

Answer 1

使用javascript，您可以像這樣操作DOM ：

 //Pause audio on document load document.getElementById('sound1').pause(); //Detect button clikc document.getElementById('play').addEventListener("click", cuntingsec, false); //Function to count second function cuntingsec() { var seconds = 0; var el = document.getElementById('seconds-counter'); function incrementSeconds() { seconds += 1; el.innerText = "Audio is played " + seconds + " seconds."; //Detect audio end document.getElementById('sound1').addEventListener("ended", function(){ el.innerText = "Audio is played " + seconds + " seconds. and ended"; //Clear interval clearInterval(cancel); }); } var cancel = setInterval(incrementSeconds, 1000); } 

 <audio id="sound1" autostart="0" src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> Votre navigateur ne supporte pas l'élément <code>audio</code>. </audio> <div id='seconds-counter'> </div> <button class="button1" id="play" onclick="document.getElementById('sound1').play()"> Play</button>