Javascript setTimeout可在台式机上运行，​​而不能在android上运行？

Question

我有一个函数，当用户点击开始时，每n秒（基于来自网页的输入）随机播放一个不同的音频文件。 就像您期望的那样，当他们按下Stop时，它就会停止。

它在我的桌面（使用chrome）上效果很好，但是我已经在chrome的两个不同的android设备（note 4和note 8）上尝试过了，但是在打包之前只能播放一次音频。

工作流程：用户单击开始，将调用功能startstop。 如果是“开始”按钮，则播放音频并创建n秒的超时（加上2以允许每个音频文件播放）

如果是停止按钮，请清除超时，暂停所有音频，然后将按钮重置为开始。

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上找到。 这是我为姐姐（姐姐是钢琴老师）制作的一个愚蠢的网络应用，目的是提醒她的学生弯曲手指。

Answer 1

此问题是由大多数移动浏览器引起的，这些浏览器会在没有用户交互的情况下阻止播放视频和声音（加载它们可能会导致用户产生额外的费用，具体取决于他们的数据合同） 。

因此，在setTimeout之后不能使用new Audio() 。 但是，在至少一次用户交互之后，您可以做的是替换音频元素的src并使其播放。 好消息是：您确实已经需要至少一个用户交互。

1.第一步，在HTML中添加<audio>元素：

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

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

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

3.在您的playAudio函数中，不要使用audio = new Audio()做到这一点：

audio.src = fileToPlay;