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

标签 javascript android html ios

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

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

所以在分配以上值后,我们可以看到它是 5 分钟。在浏览器中它会像这样显示 05:00:00。在我的 html 中,我有三个按钮 startstopreset。当我按下开始时,计时器将开始计时。

现在我在我的 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;
                }
            }
        }

最佳答案

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

sound.reload();

之后:

sound.play();

关于javascript - 时间到期时使用 Javascript 播放音频/声音在 Android 和 IOS 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45747427/

相关文章:

javascript - JavaScript .prototype 是如何工作的?

java - 下载数据时 UI-Thread 似乎滞后

android - Google map 未在 Firebase 测试实验室中显示

jquery - iFrame Overlay mousemove 事件适用于 Chrome 但不适用于 Internet Explorer

javascript - MDN 上的 polyfill/shim 实现有多可靠

javascript - React 状态管理解决方案与 props

php - 查询;单击以显示 html 内容和倒计时,然后显示其他内容

android - 覆盖静音模式和/或媒体音量

html - 具有侧div高度的可滚动div

html - 我无法让背景图像显示在 Internet Explorer 上