时间到期时使用 Javascript 播放音频/声音不适用于 Android 和 IOS

Question

我有一个自定义的 countdowntimer 在 javascript 中显示小秒、秒和分钟。您可以在下面看到完整的代码，现在在我的 javascript 代码中，我可以像这样以两位数为这些变量赋值：

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

所以在分配上述值之后，我们可以看到它是 5 分钟。在浏览器中，它会像这样 05:00:00 显示。在我的html 中，我有三个按钮start、stop 和reset。当我按下开始时，计时器将开始用完。

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

问题：

现在所有这些都可以在桌面设备上正常运行，但在 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>

Javascript

        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。所以我使用 START 作为触发事件并播放了音频，但在播放之后，我像这样暂停了它：

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

这对我有用，当计时器到期时，音频确实在移动设备上播放。 :)