버튼을 클릭 할 때 음악과 함께 타이머를 만듭니다.

Question

이 버튼을 클릭하면 타이머를 시작하고 싶습니다. 나는 페이지가로드 될 때 시작되는 타이머 톤을 발견했다. 그러나 버튼을 클릭 할 때 시작되는 것은 없습니다. 추가적인 합병증은 사운드가 시작될 때 동시에 시작해야한다는 것입니다. 어떤 도움이라도 대단히 감사하겠습니다. 당신이 조작 할 수있는 자바 스크립트

<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>