我正在尝试让一个音频文件在 iPad 上的 Safari 中自动播放。如果我在 Mac 上使用 Safari 访问该页面，那很好。在 iPad 上，自动播放不起作用。
【问题讨论】：
这似乎有效：
<html>
<title>
iPad Sound Test - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript">
window.onload = function() {
var audioPlayer = document.getElementById("audio");
audioPlayer.load();
audioPlayer.play();
};
</script>
</body>
</html>
在此处查看实际操作：http://www.johncoles.co.uk/ipad/test/1.html (Archived)
从 iOS 4.2 开始，这不再有效。抱歉。
【讨论】：
如果您使用以下方法创建音频元素：
var a = new Audio("my_audio_file.wav");
并通过以下方式添加suspend 事件监听器：
a.addEventListener("suspend", function () {console.log('suspended')}, false);
然后将文件加载到移动 Safari（iPad 或 iPhone）中，您会在开发者控制台中看到“已暂停”登录。根据 HTML5 规范，这意味着“用户代理当前有意不获取媒体数据，但没有下载整个媒体资源。”
调用后续的 a.load()，测试“canplay”事件，然后使用 a.play() 似乎是自动触发声音的合适方法。
【讨论】：
我通过将允许您触发音频的所有事件的事件处理程序附加到 body 元素来处理此问题，该处理程序会触发任何具有自动播放功能的 html 音频元素播放一次。
var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
$('body').on('touchstart click doubleclick keydown', function() {
$("audio[autoplay='autoplay']").each(
function(){
this.play();
this.removeAttribute('autoplay');
});
});
}
【讨论】：
更新：这是一个 hack，它不再适用于 IOS 4.X 及更高版本。这个在 IOS 3.2.X 上工作。
这不是真的。 Apple 不想在 iPad 上自动播放视频和音频，因为您可以在移动网络上使用大量流量。我不会对在线内容使用自动播放。对于离线 HTML 网站，这是一个很棒的功能，这就是我使用它的目的。
这是一个“javascript假点击”解决方案：http://www.roblaplaca.com/examples/html5AutoPlay/
从网站复制和粘贴代码：
<script type="text/javascript">
function fakeClick(fn) {
var $a = $('<a href="#" id="fakeClick"></a>');
$a.bind("click", function(e) {
e.preventDefault();
fn();
});
$("body").append($a);
var evt,
el = $("#fakeClick").get(0);
if (document.createEvent) {
evt = document.createEvent("MouseEvents");
if (evt.initMouseEvent) {
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
}
$(el).remove();
}
$(function() {
var video = $("#someVideo").get(0);
fakeClick(function() {
video.play();
});
});
</script>
这不是我的来源。我前段时间发现了这个，并在带有 IOS 3.2.X 的 iPad 和 iPhone 上测试了代码。
【讨论】：
使用 jQuery，在 Ipad v.5.1.1 上测试
$('video').get(0).play();
您必须从页面中附加/删除视频元素。
【讨论】：
出于各种商业原因，Apple 令人讨厌地拒绝在其 iOS 设备上使用许多 HTML5 网络标准。最终，您无法在触摸事件之前预加载或自动播放声音文件，它一次只播放一种声音，并且不支持 Ogg/Vorbis。不过，我确实找到了一个很好的解决方法，让您对音频有更多的控制权。
<audio id="soundHandle" style="display:none;"></audio>
<script type="text/javascript">
var soundHandle = document.getElementById('soundHandle');
$(document).ready(function() {
addEventListener('touchstart', function (e) {
soundHandle.src = 'audio.mp3';
soundHandle.loop = true;
soundHandle.play();
soundHandle.pause();
});
});
</script>
基本上，您在第一次触摸事件时开始播放音频文件，然后立即暂停。现在，您可以在整个 Javascript 中使用 soundHandle.play() 和 soundHandle.pause() 命令，并在没有触摸事件的情况下控制音频。如果你可以完美地计时，只需在声音结束后立即暂停。然后下次再次播放时，它会循环回到开头。这并不能解决苹果在这里造成的所有混乱，但它是一种解决方案。
【讨论】：
在我看来，这个问题的答案（至少现在）清楚地记录在Safari HTML5 docs：
用户通过蜂窝网络控制下载
在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能在蜂窝网络上并按数据单位收费，因此禁用了预加载和自动播放。在用户启动数据之前不会加载数据。这意味着 JavaScript play() 和 load() 方法在用户开始播放之前也是不活动的，除非用户操作触发了 play() 或 load() 方法。换句话说，用户启动的播放按钮有效，但 onLoad="play()" 事件无效。
这会播放电影：<input type="button" value="Play" onClick="document.myMovie.play()">
这在 iOS 上没有任何作用：<body onLoad="document.myMovie.play()">
【讨论】：
我确认音频没有按描述工作（至少在运行 4.3.5 的 iPad 上）。具体问题是音频不会以异步方法（ajax、计时器事件等）加载，但如果预先加载，它将播放。问题是负载必须在用户触发的事件上。因此，如果您可以为用户提供一个按钮来启动播放，您可以执行以下操作：
function initSounds() {
window.sounds = new Object();
var sound = new Audio('assets/sounds/clap.mp3');
sound.load();
window.sounds['clap.mp3'] = sound;
}
然后播放它，例如在 ajax 请求中，你可以这样做
function doSomething() {
$.post('testReply.php',function(data){
window.sounds['clap.mp3'].play();
});
}
不是最好的解决方案，但它可能会有所帮助，尤其是知道罪魁祸首是非用户触发事件中的加载函数。
编辑：我找到了 Apple 的解释，它影响 iOS 4+： http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
【讨论】：
我的解决方案是从先前菜单中的真实触摸事件触发。他们当然不会强迫您使用特定的播放器界面。就我的目的而言，这很好用。如果您没有要使用的现有界面，那您就大错特错了。也许你可以试试倾斜事件之类的......
【讨论】：
Apple 不完全支持该标准，但有一种解决方法。他们的justification 是蜂窝网络拥塞，可能是因为您将登陆播放随机音频的页面。当设备连接 wifi 时，这种行为不会改变，可能是为了保持一致性。顺便说一句，这些页面通常是个坏主意。您不应该尝试在每个网页上放置配乐。那是错误的。 :)
如果作为用户操作的结果开始播放html5 音频。加载页面不算数。因此，您需要将 Web 应用程序重组为一个多合一页面应用程序。您需要该链接在当前页面上播放它，而不是打开一个播放音频的页面的链接，而不需要更改页面。此“用户交互”规则适用于您可以在音频或视频元素上调用的 html5 方法。如果在页面加载时自动触发调用，则调用返回时不会产生任何影响，但在从事件处理程序调用时它们会起作用。
【讨论】：
我还想强调，您不能这样做的原因是 Apple 做出的商业决策，而不是技术决策。也就是说，苹果在 iPod Touch 上禁用网络应用程序的声音没有合理的技术理由。那只是一个 WiFi 设备，而不是可能会产生昂贵的带宽费用的电话，因此该论点对该设备的价值为零。他们可能会说他们正在帮助进行 WiFi 网络管理，但我的 WiFi 网络上的任何带宽问题都是我关心的，而不是 Apple 的。
此外，如果他们真正关心的是防止不必要的过度带宽消耗，他们会提供一个设置以允许用户选择加入网络应用程序的声音。此外，他们会采取措施限制网站通过其他方式消耗同等带宽。但是没有这样的限制。一个网站可以在后台一遍又一遍地下载巨大的文件，而苹果可能不太关心这一点。最后，我相信无论如何都可以下载声音，因此实际上没有保存任何带宽！ Apple 只是不允许它们在没有用户交互的情况下自动播放，这使得它们无法用于游戏，这当然是它们的真实意图。
Apple 屏蔽了声音，因为他们开始注意到 HTML5 应用程序可以与原生应用程序一样强大，甚至更多。如果您想在 Web 应用程序中使用声音，您需要游说 Apple 停止像 Microsoft 那样反竞争。这里没有可以解决的技术问题。
【讨论】：
在 iOS4.2（开发版）下开发快速原型 Web 应用程序时对此感到困惑。解决方案其实很简单。请注意，您的 HTML 页面中似乎还没有该标签，您实际上需要将标签动态插入到文档中（请注意，此示例使用 Prototype 1.7 来获得一些额外的 Javascript 时髦度）：
this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();
由于您尚未设置控制器，因此无需使用 CSS 进行任何棘手的操作来隐藏它/将其放置在屏幕外。
这似乎工作得很好。
【讨论】：
从 iOS 4.2.1 开始，假点击和 .load() 技巧都无法在任何 iOS 设备上自动播放音频。我知道的唯一选择是让用户实际执行单击操作并在单击事件处理程序中开始播放 将 .play() 调用包装在任何异步（ajax、setTimeout 等）中。
如果我弄错了，请告诉我。在最近一次更新之前，我在 iPad 和 iPhone 上都存在工作漏洞，而且所有这些漏洞看起来都已被关闭。
【讨论】：
<video> 上，我已经验证只要 .load() 然后 .play() 进入 同步 点击/点击处理程序，它就会工作。否则，它会失败。
尝试在音频或视频标签上的 .play() 方法之前调用 .load() 方法......这将分别是 HTMLAudioElement 或 HTMLVideoElement。对我来说，这是它在 iPad 上工作的唯一方式！
【讨论】：
在 iPad 或 iPhone 上，视频或音频标签的自动播放功能均无效。这是 Apple 为节省用户带宽而设置的限制。
【讨论】：