ボタンをクリックすると、音楽とともにタイマーを作る

Question

このボタンをクリックするとタイマーを開始したいと思います。私は、ページが読み込まれるときに始まる1トンのタイマーを見つけました。しかし、ボタンがクリックされたときに始まるものはありません。さらに複雑なことは、音が始まると同時に開始する必要があるということです。どんな助けでも大歓迎です。あなたが操作できjavascriptの

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

Answer 1

を使用して、このような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>