html <audio>标签在iPad上播放并具有先前的用户交互</audio>

时间:2012-08-17 01:56:15

标签: jquery ipad html5 audio

我有一个只在Ajax请求返回数据时播放的音频标记。

我知道iPad只能通过用户互动播放视频和音频。

但我的Ajax请求是在用户点击按钮时发出的。所以,我有一个用户互动。

所以,我的问题是,如果有一种方法可以保持我的用户交互“身份验证”,以便在用户点击后几秒钟播放声音?

1 个答案:

答案 0 :(得分:0)

我不确定这是最好的解决方案,但它有效......当AJAX开始时,我开始循环等待它完成。当它发生时,循环会发出声音。我注意到它不能一直工作,我想如果音频还没有加载,它会崩溃(我没有得到任何错误,但如果我在页面加载后等待几秒钟,它似乎没关系)

编辑:虽然这适用于我(iPad2 [iOS 5.1.1]),但它不适用于OP(iPad1 [iOS4])。其他人可以分享他们的结果吗? link(加载后等待几秒钟)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPad Audio</title>
</head>

<body>
<audio id="noise"><source src="beep.mp3" type="audio/mp3" /></audio>
<button onclick="begin_test();">Go</button>
</body>
<script>
var snd=document.getElementsByTagName("audio")[0];
snd.load();
var shouldPlay=false;

function begin_test(){
    shouldPlay=false;
    play();
    var xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
    xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            shouldPlay=true;
          }
        } 
        xmlhttp.open("GET","levels.txt",true);
        xmlhttp.send();
}

function play(){
    if (shouldPlay){
        snd.play();
        shouldPlay=false;
    }
    else{
        setTimeout(play,10);
    }
}
</script>
</html>