在时间到期时使用Javascript播放音频/声音在Android和IOS上不起作用

Question

我在javascript中有一个定制的countdowntimer，它显示迷你秒，秒和分钟。您可以在下面看到完整的代码，现在在我的 javascript 代码中，我可以为这些变量分配两位数的值，如下所示：

var minutes = 05;
var seconds = 00;
var tens    = 00;

因此，在分配上述值后，我们可以看到它是 5 分钟。在浏览器中，它将像05：00：00一样显示。在我的html中，我有三个按钮开始，停止和重置。当我按下开始时，计时器将开始耗尽.

现在在我的javascript中，我创建了变量var sound并将我的音频文件分配给它。现在在我的 javascript 代码末尾有一个function countDownTimer { }，它正在为计时器做所有工作，在该函数中，第一个 if 语句是我如何知道计时器已过期。在这个 if 语句中，我只是像这样播放声音sound.play();

PROBLEM ：

现在所有这些都在桌面上工作正常，但在 Android 和 iOS 等移动设备上，当计时器过期时，我听不到声音.

关于如何在 Android 和 iOS 上的计时器过期时播放声音的任何想法将不胜感激。谢谢！

我的完整HTML和Javascript在下面。

.HTML

<div class="countDown">
<p class="audtitle">Count Down</p>
<div class="countdownwrapper">
<p><span id="minutes">00</span><span class="separator">:</span><span id="seconds">00</span><span class="separator">:</span><span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
</div>

爪哇语

window.onload = function () {
var minutes = 00;
var seconds = 05; 
var tens = 00;
var sound = new Audio('anysoundlink.mp3');
var mins = minutes;
var secs = seconds;
var mili = tens;
var appendMinutes = document.getElementById("minutes")
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("seconds")
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
appendMinutes.innerHTML = (minutes < 10) ? "0" + minutes : minutes;
appendTens.innerHTML = (tens < 10) ? "0" + tens : tens;
appendSeconds.innerHTML = (seconds < 10) ? "0" + seconds : seconds;
var Interval;
buttonStart.addEventListener("click", function(){
clearInterval(Interval);
if(minutes != 0 || seconds != 0 || tens != 0) {
Interval = setInterval(countDownTimer, 10);
}
});
buttonStop.addEventListener("click", function(){
clearInterval(Interval);
});
buttonReset.addEventListener("click", function(){
clearInterval(Interval);
minutes = mins;
seconds = secs;
tens = mili;
appendMinutes.innerHTML = (minutes < 10) ? "0" + minutes : minutes;
appendTens.innerHTML = (tens < 10) ? "0" + tens : tens;
appendSeconds.innerHTML = (seconds < 10) ? "0" + seconds : seconds;
});
function countDownTimer () {
if((minutes < 1) && (seconds == 0 || seconds == -1) && (tens < 2)) {
sound.play();
clearInterval(Interval);
minutes = "00";
seconds = "00";
tens = "00";
appendMinutes.innerHTML = minutes;
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
return 0; 
}
if(tens > 0) {
tens--;
}
if(tens < 10) {
appendTens.innerHTML = "0" + tens;
}
if (tens > 9) {
appendTens.innerHTML = tens;
}
if(seconds == 0 && tens == 1) {
seconds = 60;
if(minutes > 0) {
minutes--;
appendMinutes.innerHTML = minutes;
}
}
if(tens <= 0) {
tens = 100;
if(seconds > 0) {
seconds--;
appendSeconds.innerHTML = seconds;
}
}
if(seconds < 10) {
if(seconds > -1) {
appendSeconds.innerHTML = "0" + seconds;
}
}
if(seconds > 9) {
appendSeconds.innerHTML = seconds;
}
if(seconds != -1 && seconds == 0 && minutes == 0) {
tens == 100;
seconds--;
}
if(seconds <= 0 && seconds != -1) {
if(seconds != 0) {
seconds = 59;
if(minutes > 0) {
minutes--;
appendMinutes.innerHTML = minutes;
}
} else {
appendSeconds.innerHTML = '00';
}
}
if(minutes < 10) {
appendMinutes.innerHTML = "0" + minutes;
}
}
}

Answer 1

希望这会有所帮助。使用这个：

sound.reload();

后：

sound.play();

Answer 2

我很清楚音频只能由移动设备上的用户触发事件播放。在我的情况下，用户必须按下一个按钮才能播放音频，即开始。所以我使用 START 作为触发事件并播放音频，但在播放后，我像这样暂停了它：

buttonStart.addEventListener("click", function(){
sound.play();
sound.pause();
});

这对我来说起到了作用，当计时器过期时，音频确实在移动设备上播放。 :)