setInterval и clearInterval внутри кнопки

Question

setInterval работает, звук запускается и не останавливается. clearInterval не делает - звук продолжается, навсегда. Я пробовал несколько разных способов, но безрезультатно. Совет, пожалуйста?

Спасибо!

<audio id="soundEffect" src="Whoosh.mp3"></audio> 
<button onclick="setInterval(function(){playAudio()}, 1000)">Start Audio</button> 
<button onclick="clearInterval(function(){playAudio()}">Stop Audio</button> 




<script type="text/javascript"> 

     function playAudio() { 
      document.getElementById("soundEffect").play(); 

     } 

</script> 

Answer 1

Вы можете только остановить интервал с идентификатором.

Попробуйте это:

<audio id="soundEffect" src="Whoosh.mp3"></audio> 
<button onclick="startLoop()">Start Audio</button> 
<button onclick="stopLoop()">Stop Audio</button> 




<script type="text/javascript"> 

     var intervalId; 

     function startLoop() { 
      intervalId = setInterval(playAudio, 1000); 
     } 

     function stopLoop() { 
      clearInterval(intervalId); 
     } 

     function playAudio() { 
      document.getElementById("soundEffect").play(); 

     } 

</script> 

Answer 2

Как об этом:

<audio id="soundEffect" src="Whoosh.mp3"></audio> 
<button onclick="startInterval()">Start Audio</button> 
<button onclick="stopInterval()">Stop Audio</button> 




<script type="text/javascript"> 
    var interval = ''; 
    function startInterval(){ 
     interval = setInterval(function(){playAudio()}, 1000); 
    } 

    function stopInterval(){ 
     clearInerval(interval); 
    } 

    function playAudio() { 
     document.getElementById("soundEffect").play(); 
    } 
</script>