Javascript setTimeout 适用于桌面，而不适用于 android? [英] Javascript setTimeout works on desktop, not on android?

问题描述

我有一个函数，当用户点击开始时，它每 n 秒(基于网页输入)随机播放一个不同的音频文件.正如您所料，当他们点击停止时它会停止.

I have a function that plays an different audio file at random every n seconds (based on input from a web page) when the user hits start. As you would expect, it stops when they hit stop.

它在我的桌面上运行得很好(使用 chrome)，但我已经在两种不同的 android 设备(note 4 和 note 8)上尝试过它，但它只会在保释前播放一次音频.

It works fantastic on my desktop (using chrome), but I've tried it on two different android devices (note 4 and note 8) in chrome but it will only play the audio once before bailing.

工作流程:用户点击开始，调用函数startstop.如果是开始按钮，播放音频并创建 n 秒超时(加 2 以允许每个音频文件播放)

Workflow: User clicks start, the function startstop is called. If it's the start button, play the audio and create a timeout with n seconds (plus 2 to allow each audio file to play through)

如果是停止按钮，请清除超时，暂停任何音频，然后重置按钮以启动.

If it's the stop button, clear the timeout, pause any audio, and reset the button to start.

var audiofiles = ['audio/Are your fingers curved.mp3','audio/Curve fingers.mp3','audio/Curve them up.mp3','audio/Curve them.mp3','audio/Curve your fingers.mp3','audio/Curve.mp3']

var playSounds;
var audio;

function startstop()
{       
    var text = document.getElementById("StartStop").firstChild;
    if (text.innerHTML == 'Start')
    {
        if (!validateInputValue())
        {
            return;
        }
        playAudio();
        text.innerHTML = 'Stop';
    }
    else
    {   
        clearTimeout(playSounds);
        audio.pause();
        text.innerHTML = 'Start';
    }
}

function playAudio()
{
    var delta = document.getElementById("timeDelta").value;
    delta = parseInt(delta, 10) + 2; // add two since they're all about two seconds.  Easier than blocking when you play a file. 

    var fileToPlay = audiofiles[Math.round(Math.random() * (audiofiles.length - 1))];
    audio = new Audio(fileToPlay);
    audio.play();

    playSounds = setTimeout(playAudio, delta*1000);
}

function validateInputValue()
{
    document.getElementById("warning").innerHTML = "   ";

    //Get the value to evaluate
    delta = parseInt(document.getElementById("timeDelta").value, 10);

    if (delta < 0 || delta > 300)
    {
        document.getElementById("warning").innerHTML = "Please enter a number from 0 to 300";
        document.getElementById("timeDelta").value = 30;
        return false;
    }
    return true;
}

我觉得我正在服用疯狂的药丸.该网站已上线，可在 susannavalleau.com/fingers 上找到.这是一个愚蠢的网络应用程序，我正在为我的钢琴老师姐姐制作，以提醒她的学生弯曲手指.

I feel like I'm taking crazy pills. The website is live, and can be found at susannavalleau.com/fingers. It's a silly web-app I'm making for my sister who's a piano teacher to remind her students to curve their fingers.

推荐答案

该问题是由大多数移动浏览器引起的，这些浏览器会在没有用户交互的情况下阻止播放视频和声音(加载它们可能会导致用户，取决于他们的数据合同).

The issue is caused by most mobile browsers, which block videos and sounds from being played without user interaction (loading them may result in extra costs for the user, depending on their data contract).

所以你不能在 setTimeout 之后使用 new Audio().但是，在至少一次用户交互之后，您可以做的是替换音频元素的 src 并使其播放.好消息是:您确实需要至少进行一次用户交互.

So you can't use new Audio() after a setTimeout. What you can do, however, after at least one user interaction, is replace the src of an audio element and make it play. The good news is: you do require at least one user interaction already.

1. 第一步，在 HTML 中添加 元素:

1. First step, add an <audio> element in your HTML:

<audio id="sound"></audio>

2. 页面加载完 HTML 后，将该元素保存在 audio 变量中，并在代码末尾添加:

2. When the page is done loading the HTML, save that element in the audio variable, by adding this at the end of your code:

window.addEventListener('DOMContentLoaded', function(){
    audio = document.getElementById('sound');
});

3. 在您的 playAudio 函数中，不要使用 audio = new Audio()，这样做:

3. In your playAudio function, instead of using audio = new Audio(), do this:

audio.src = fileToPlay;

这篇关于Javascript setTimeout 适用于桌面，而不适用于 android?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！