使用HTML5在iPad上自动播放audio文件
我试图让audio文件在iPad上的Safari中自动播放。 如果我在我的Mac上使用Safari访问该页面，那很好。 在iPad上，自动播放不起作用。
更新：这是一个黑客，它不再工作在IOS 4.X及以上。 这个在IOS 3.2.X上工作。
这不是真的。 苹果公司不想在iPad上自动播放video和audio，因为可以在移动networking上使用大量的stream量。 我不会使用自动播放在线内容。 对于脱机HTML网站这是一个伟大的function，那就是我用它。
这是一个“javascript假的点击”解决scheme： 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> 这不是我的来源。 我已经find了这个前一段时间，并testing了与IOS 3.2.X IPad和iPhone上的代码。
我还要强调，你做不到的原因是苹果做出的一个商业决定，而不是技术决定。 换句话说，Apple没有合理的技术理由来禁用iPod Touch上的networking应用程序的声音。 这是一个WiFi设备，而不是一个手机，可能会导致昂贵的带宽费用，所以这个论点没有什么价值的设备。 他们可能会说他们正在帮助进行WiFinetworkingpipe理，但任何带宽问题都是我关心的，而不是苹果公司的问题。
另外，如果他们真正关心的是防止不必要的，过度的带宽消耗，他们会提供一个设置，允许用户selectjoinnetworking应用程序的声音。 另外，他们还会采取其他措施来限制网站消费等效带宽。 但是没有这样的限制。 一个网站可以一遍又一遍地在后台下载大文件，而苹果公司可能不在乎这一点。 最后，我相信无论如何都可以下载声音，所以没有任何带宽被实际保存！ 苹果公司不允许他们在没有用户交互的情况下自动播放，使他们无法用于游戏，这当然是他们的真正意图。
苹果阻止了声音，因为他们开始注意到，HTML5应用程序可以像原生应用程序一样有能力，如果不是更多的话。 如果你想要在Web应用程序中声音，你需要游说苹果停止像微软那样的反竞争。 没有技术问题可以在这里解决。
由于各种商业原因，苹果恼火地拒绝他们的iOS设备上的许多HTML5networking标准。 最终，您不能在触摸事件之前预加载或自动播放声音文件，它一次只播放一个声音，并且不支持Ogg / Vorbis。 不过，我确实find了一个漂亮的解决方法，让您对audio有更多的控制。
<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>
基本上，你开始播放audio文件的第一个触摸事件，然后你暂停它。 现在，您可以在整个Javascript中使用soundHandle.play（）和soundHandle.pause（）命令，并控制audio而不触摸事件。 如果你可以完美的时间，声音结束后立即进入暂停。 然后再次播放时，它将循环回到开头。 这不能解决苹果在这里所做的一切，但这是一个解决scheme。
从iOS 4.2.1开始，虚假点击和.load（）技巧都不能在任何iOS设备上自动播放audio。 我知道的唯一select是让用户实际执行一个点击操作，并在click事件处理程序中开始播放， 而不用以任何asynchronous方式（ajax，setTimeout等）包装.play（）调用。
有人请告诉我，如果我错了。 在最近的更新之前，我曾经在iPad和iPhone上都有漏洞，而且他们看起来都已经closures了。
我确认audio不像描述的那样工作（至less在运行4.3.5的iPad上）。 具体的问题是audio不会在asynchronous方法（ajax，timer event等）中加载，但是如果它被预加载的话它将会播放。 问题是负载必须在用户触发的事件上。 所以如果你可以有一个button让用户开始播放，你可以做如下的事情：
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(); }); }
不是最好的解决scheme，但它可能会有所帮助，尤其是了解罪魁祸首是非用户触发事件中的加载function。
编辑：我发现苹果的解释，并影响iOS 4 +： http : //developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
尝试在audio或video标签上的.play（）方法之前调用.load（）方法…将分别为HTMLAudioElement或HTMLVideoElement。 这是唯一能在iPad上运行的方式！
在iPad或iPhone上，video或audio标签的自动播放function无法使用。 这是苹果为了节省用户带宽而制定的限制。
在我看来，这个问题的答案（至less现在）在Safari HTML5文档中有明确的logging：
用户通过蜂窝networking控制下载
在iOS上的Safari（包括iPad在内的所有设备上），用户可能位于蜂窝networking中并按数据单元收费时，将禁用预加载和自动播放。 直到用户启动它才会加载数据。 这意味着除非用户操作触发play（）或load（）方法，否则JavaScript play（）和load（）方法在用户启动播放之前也处于非活动状态。 换句话说，用户启动的“播放”button可以工作，但onLoad =“play（）”事件不会。
这将播放电影： <input type="button" value="Play" onClick="document.myMovie.play()">
这在iOS上什么也不做： <body onLoad="document.myMovie.play()">
在开发iOS4.2（开发版本）下的快速原型Web应用程序时感到困惑。 解决scheme其实很简单。 请注意，您似乎无法在HTML页面中使用该标签，但实际上您需要dynamic地将标签插入到文档中（请注意，此示例使用Prototype 1.7来处理一些额外的Javascript snazziness）：
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来做任何棘手的事情来隐藏它或者把它放在屏幕外。
这似乎是完美的。
苹果公司完全不支持该标准，但有一个解决方法。 他们的理由是蜂窝networking拥塞，也许是因为你会登陆播放随机audio的页面。 这种行为不会改变，当一个设备上的无线networking，也许为了一致性。 顺便说一句，这些网页通常是一个坏主意。 你不应该试图把每个网页上的音轨。 这是错的。 🙂
如果由于用户操作而启动，则会播放html5audio。 加载页面不算。 所以你需要重构你的networking应用程序，成为一个全function于一身的应用程序。 除了打开播放audio的页面的链接之外，您还需要该链接在当前页面上播放，而无需更改页面。 这个“用户交互”规则适用于您可以在audio或video元素上调用的html5方法。 如果这些调用在页面加载时自动触发，则这些调用没有任何效果，但在从事件处理程序调用时会起作用。
我的解决scheme是从事先菜单中的真实触摸事件触发的。 当然，他们并不强迫你使用特定的播放器界面。 对我而言，这个效果很好。 如果你没有一个现有的界面来使用，afaik你错了。 也许你可以尝试倾斜事件或…
如果您使用以下方式创buildaudio元素：
var a = new Audio("my_audio_file.wav");
并通过以下方式添加一个suspend事件监听器：
a.addEventListener("suspend", function () {console.log('suspended')}, false);
然后将文件加载到移动Safari（iPad或iPhone）中，您将看到“暂停”login到开发者控制台。 根据HTML5规范，这意味着“用户代理故意不当前获取媒体数据，但没有下载整个媒体资源”。
调用后续的a.load（），testing“canplay”事件，然后使用a.play（）看起来像是一种自动触发声音的合适方法。
使用jQuery，在Ipad v.5.1.1上testing
$('video').get(0).play();
您必须追加/删除页面上的video元素。
我通过为允许触发audio的所有事件附加一个事件处理程序来处理此事件，该事件处理程序通过自动播放触发任何htmlaudio元素来播放一次。
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'); }); }); }
这似乎工作：
<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（存档）
从iOS 4.2开始，这不再起作用。 抱歉。
