2016-04-28 34 views
2

我有随机每隔n秒(根据输入来自网页),当用户点击开始扮演着不同的音频文件的功能。正如你所期望的那样,当它们停止时它会停止。Javascript的setTimeout工作在桌面上,而不是在Android?

它(使用Chrome)作品在我的桌面上梦幻般的,但我已经试过了两个不同的Android设备(注4和注8)在Chrome,但它只会想逃之前播放音频一次。

工作流程:用户点击启动,该功能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找到。这是一个愚蠢的web应用程序我正在做我姐姐谁是一个钢琴老师提醒她的学生曲线自己的手指。

回答

3

这个问题是由大多数移动浏览器造成的,它阻止视频和声音在没有用户交互的情况下播放(根据他们的数据合同,加载它们可能导致用户的额外费用)

所以你不能一个setTimeout后使用new Audio()。你能做什么,但是,至少一个用户交互之后,是替代音频元素的src,使其发挥。好消息是:您至少需要一次用户交互。

第一步,在你的HTML添加<audio>元素:

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

2.当页面加载完成的HTML,保存该元素在audio变量,加入这个在你的代码的末尾:

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

在你playAudio功能,替代使用audio = new Audio(),请这样做:

audio.src = fileToPlay; 
相关问题