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

您只能以ID停止间隔。

尝试这个：

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