在 Javascript 中循环播放音频，直到警报解除

Question

我一直在做一些研究，但没有发现任何对 explain/lead 我在正确方向上有帮助的东西。这是我到目前为止所拥有的。它有效，但警报仅在预设时间内播放。我希望它一直播放，直到单击警报上的 "Ok" 按钮。谢谢

<script type="text/javascript">

setInterval(function(){   
var old_count=<?php echo $arr['counter'];?>;
var audio=document.getElementById('audiotag1');
    $.ajax({
        type : "POST",
        url : "dbcheck.php",
        timeout: 4000,
  
        success : function(data){
            if (data > old_count) {
                alert('New Hot Part Has Been Entered.');
  document.getElementById('audiotag1').play();
  old_count=data;
    
  window.setTimeout(function(){ 
         location.reload();
  }, 10000);
            }

        }
    });
 
},5000);

</script>

<audio id="audiotag1" src="alert.wav" preload="auto"></audio>

Answer 1

我尝试为您的问题创建一个静态版本 (html)。如果将音频的loop参数设置为true。即使打开警告框，音频也不会停止。我在下面粘贴了我的代码。如果我误解了你的问题，请告诉我。

<!DOCTYPE html>
<html>
<head>
<title>Audio Loop</title>
</head>

<body onload="onload()">
<input type="text" value="1"> </input>
<audio id="audiotag1" src="alert.wav" preload="auto" ></audio>
<input type="button" value="ok" onclick="stopAudio()"></input>
</body>
<script>


function onload(){
var old_count=document.getElementById('counter');
var audio=document.getElementById('audiotag1');
audio.loop=true;
audio.load();
audio.play()
}
function stopAudio(){
alert("Before Pause");
var audio=document.getElementById('audiotag1');
audio.pause();
}
</script></html>

Answer 2

当您使用标志进行音频循环并收听 audio 元素的 ended 事件时，很容易实现。

audio.addEventListener('ended', function(){
    if(loopAudio){
        audio.play();
    }
});
...
// where you trigger the alert.
loopAudio = true;
audio.play();        
alert('click ok to stop audio looping.');
loopAudio = false;
audio.pause(); // if you want
...

在 Javascript 中循环播放音频，直到警报解除

Loop Audio in Javascript Until Alert Dismissed

javascript

audio

Fiddle Demo