html <audio> 标签在 iPad 上播放之前的用户交互

Posted

技术标签:

【中文标题】html <audio> 标签在 iPad 上播放之前的用户交互【英文标题】:html <audio> tag play on iPad with a previous user interaction 【发布时间】:2012-08-17 01:56:14 【问题描述】:

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

我知道 iPad 仅通过用户交互播放视频和音频。

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

所以,我的问题是,是否有办法让我的用户交互“身份验证”在用户点击后几秒钟播放声音?

【问题讨论】:

使用 ajax 调用创建一个测试页面,在最后播放声音...在 ipad 上尝试一下,看看它是否有效...我只是无法从您的帖子中判断您是否知道它不起作用,或者你只是想知道 任何视频/音频都必须点击播放。这是不可能的。原因是苹果决定不浪费用户数据。对不起。 嘿,这是一个有趣的建议。我将超时设置为 1000 毫秒,效果很好。我把它撞到1001,它从来没有玩过。所以也许你在行动和玩耍之间还有一秒钟的余地 它变得更加奇怪了。如果我添加一个输入字段而不是硬编码时间,我可以使超时时间很长(我已经尝试了十秒):robotwoods.com/dev/misc/so_ipad_audio.html(它适用于 ipad,所以它只是触摸,而不是鼠标)......我会看看我能用 ajax 做什么 让我们continue this discussion in chat 【参考方案1】:

我不确定这是不是最好的解决方案,但它可以工作...当 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>

【讨论】:

以上是关于html <audio> 标签在 iPad 上播放之前的用户交互的主要内容,如果未能解决你的问题,请参考以下文章

HTML <audio> 标签的 canplaythrough 无法在移动设备上触发

Android 上的 HTML5 <audio> 标签

html <audio> 标签在 iPad 上播放之前的用户交互

如何在 iOS 上自动播放 HTML5 <video> 和 <audio> 标签?

移动浏览器中 html5 <audio> 标签的功能障碍

HTML5中 video和audio这两个标签是干嘛的,如何设置其属性?