HTML5 音频：检测何时需要实际点击才能播放音频答案

【问题标题】：HTML5 Audio: Detecting when an actual click is required to play audioHTML5 音频：检测何时需要实际点击才能播放音频
【发布时间】：2013-04-26 16:28:02
【问题描述】：

我正在使用 jQuery，我注意到当我制作它以便单击链接会导致音频播放时，它在 iPad 上运行良好。据我了解，仅允许播放音频，因为用户明确点击了某些东西。但是，如果我这样做是为了单击链接导致某些内容淡入，然后 fadeIn 回调播放音频，除非您再次点击链接（在元素具有已经淡出）。这是一个例子：

http://jsfiddle.net/3sg2v/

请注意，在桌面浏览器中，您只需单击一次链接即可播放音频。

我发现 iPad 并不是唯一具有这种行为方式的设备。我在运行 Android 4.1.2 的摩托罗拉 Xoom 上试用了上述示例，并在普通浏览器和 Chrome 18.0.1025469 中得到了相同的行为。但是，它可以在我的 Motorola Droid 2 上运行，在普通浏览器和 Firefox 20.0.1 中运行 Android 2.3.4（只需点击链接即可播放音频）。

我的问题是检测这种行为的最优雅的方法是什么？

【问题讨论】：

为什么不在fadeIn 回调之外直接调用$('#audio_test')[0].play();？
@idbehold 这只是一个简单的例子，但如果我想在播放音频之前做几件不同的事情，但我不知道这些事情需要多长时间，那我该怎么办？
嗯，不支持 jq 回调的平板电脑...您尝试过使用纯 JavaScript 吗？
@MikeHometchko 平板电脑确实支持 jQuery 回调。问题是某些设备（如 iPad）的设置是只有在用户启动音频时才能播放音频。 Safari HTML5 音频和视频指南有一个名为“iOS-Specific Considerations”的部分。其中有一个名为 User Control of Downloads Over Cellular Networks 的小节，对其进行了更多解释。
可能是由于提供者数据限制过分造成的限制。我想说如果不编写 NaCl 应用程序而不是依赖 http 协议，您可能无法绕过它。但是，我相信音频文件会在页面加载时缓存，不是吗？如果是这样，您单击它时没有下载任何内容。嗯

标签： jquery html html5-audio

【解决方案1】：

这似乎有效 (jsFiddle demo)：

test_audio_played = false;

$('<audio>').on('play', function() {
    test_audio_played = true;
})[0].play();

setTimeout(function() {
    alert(test_audio_played);
}, 1);

运行 Android 2.3.4 的桌面浏览器和我的 Motorola Droid 2 都按预期显示“真”，而 iPad 和运行 Android 4.1.2 的摩托罗拉 Xoom 按预期显示“假”。

【讨论】：