Html 使用 HTML5 在 iPad 上自动播放音频文件

Autoplay audio files on an iPad with HTML5

提问by milesmeow

I'm trying to get an audio file to autoplay in Safari on an iPad. If I go to the page using Safari on my Mac, it's fine. On the iPad, autoplay does not work.

我正在尝试让音频文件在 iPad 上的 Safari 中自动播放。如果我在 Mac 上使用 Safari 访问该页面，那就没问题了。在 iPad 上，自动播放不起作用。

采纳答案by Fa11enAngel

UPDATE:This is a hack and it's not working anymore on IOS 4.X and above. This one worked on IOS 3.2.X.

更新：这是一个 hack，它不再适用于 IOS 4.X 及更高版本。这个适用于 IOS 3.2.X。

It's not true. Apple doesn't want to autoplay video and audio on IPad because of the high amout of traffic you can use on mobile networks. I wouldn't use autoplay for online content. For Offline HTML sites it's a great feature and thats what I've used it for.

这不是真的。Apple 不想在 iPad 上自动播放视频和音频，因为您可以在移动网络上使用大量流量。我不会对在线内容使用自动播放。对于离线 HTML 站点，这是一个很棒的功能，这就是我使用它的目的。

Here is a "javascript fake click" solution: http://www.roblaplaca.com/examples/html5AutoPlay/

这是一个“javascript假点击”解决方案：http: //www.roblaplaca.com/examples/html5AutoPlay/

Copy & Pasted Code from the site:

从网站复制和粘贴代码：

<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> 

This is not my source. I've found this some time ago and tested the code on an IPad and IPhone with IOS 3.2.X.

这不是我的来源。我前段时间发现了这个，并在装有 IOS 3.2.X 的 iPad 和 iPhone 上测试了代码。

回答by Rick M

I would like to also emphasize that the reason you cannot do this is a business decision that Apple made, not a technical decision. To wit, there was no rational technical justification for Apple to disable sound from web apps on the iPod Touch. That is a WiFi device only, not a phone that may incur expensive bandwidth charges, so that argument has zero merit for that device. They may say they are helping with WiFi network management, but any issues with bandwidth on my WiFi network is my concern, not Apple's.

我还要强调，你不能这样做的原因是苹果做出的商业决策，而不是技术决策。也就是说，苹果在 iPod Touch 上禁用网络应用程序的声音没有合理的技术理由。那只是一个 WiFi 设备，而不是可能产生昂贵带宽费用的电话，因此该论点对该设备的价值为零。他们可能会说他们正在帮助管理 WiFi 网络，但我关心的 WiFi 网络带宽问题是我的问题，而不是 Apple 的问题。

Also, if what they really cared about was preventing unwanted, excessive bandwidth consumption, they would provide a setting to allow users to opt-in to web apps sounds. Also, they would do something to restrict web sites from consuming equivalent bandwidth by other means. But there are no such restrictions. A web site can download huge files in the background over and over and Apple could care less about that. And finally, I believe the sounds can be downloaded anyway, so NO BANDWIDTH IS ACTUALLY SAVED! Apple just does not allow them to play automatically without user interaction, making them unusable for games, which of course is their real intent.

此外，如果他们真正关心的是防止不必要的、过度的带宽消耗，他们会提供一个设置，允许用户选择加入网络应用程序的声音。此外，他们会采取措施限制网站通过其他方式消耗等效带宽。但是没有这样的限制。一个网站可以在后台一遍又一遍地下载大文件，而苹果公司可能不太关心这一点。最后，我相信无论如何都可以下载声音，因此实际上没有节省带宽！Apple 只是不允许它们在没有用户交互的情况下自动播放，使它们无法用于游戏，这当然是他们的真正意图。

Apple blocked sound because they started to notice that HTML5 apps can be just as capable as native apps, if not more so. If you want sound in Web Apps you need to lobby Apple to stop being anti-competitive like Microsoft. There is no technical problem that can be fixed here.

Apple 屏蔽了声音，因为他们开始注意到 HTML5 应用程序可以与原生应用程序一样强大，甚至更多。如果你想在 Web Apps 中使用声音，你需要游说苹果停止像微软那样反竞争。这里没有可以解决的技术问题。

回答by kaleazy

Apple annoyingly rejects many HTML5 web standards on their iOS devices, for a variety of business reasons. Ultimately, you can't pre-load or auto-play sound files before a touch event, it only plays one sound at a time, and it doesn't support Ogg/Vorbis. However, I did find one nifty workaround to let you have a little more control over the audio.

出于各种商业原因，Apple 恼人地拒绝了 iOS 设备上的许多 HTML5 Web 标准。最终，您不能在触摸事件之前预加载或自动播放声音文件，它一次只播放一种声音，并且不支持 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>

Basically, you start playing the audio file on the very first touch event, then you pause it immediately. Now, you can use the soundHandle.play() and soundHandle.pause() commands throughout your Javascript and control the audio without touch events. If you can time it perfectly, just have the pause come in right after the sound is over. Then next time you play it again, it will loop back to the beginning. This won't resolve all the mess Apple has made here, but it's one solution.

基本上，您在第一个触摸事件时开始播放音频文件，然后立即暂停它。现在，您可以在整个 Javascript 中使用 soundHandle.play() 和 soundHandle.pause() 命令，并在没有触摸事件的情况下控制音频。如果您可以完美计时，只需在声音结束后立即暂停。然后下次再次播放时，它将循环回到开头。这不会解决苹果在这里造成的所有混乱，但这是一种解决方案。

回答by David Gouldin

As of iOS 4.2.1, neither the fake click nor the .load() trick will work to autoplay audio on any iOS device. The only option I know of is to have the user actually perform a click action and begin playback in the click event handler withoutwrapping the .play() call in anything asynchronous (ajax, setTimeout, etc).

从 iOS 4.2.1 开始，无论是虚假点击还是 .load() 技巧都无法在任何 iOS 设备上自动播放音频。我知道的唯一选择是让用户实际执行单击操作并在单击事件处理程序中开始播放，而无需将 .play() 调用包装在任何异步（ajax、setTimeout 等）中。

Someone please tell me if I'm mistaken. I had working loopholes for both iPad and iPhone before the most recent update, and all of them look like they've been closed.

如果我弄错了，请有人告诉我。在最近的更新之前，我在 iPad 和 iPhone 上都有工作漏洞，而且所有漏洞看起来都已被关闭。

回答by Jacob Mouka

I confirm that the audio isn't working as described (at least on iPad running 4.3.5). The specific issue is the audio won't load in an asynchronous method (ajax, timer event, etc) but it will play if it was preloaded. The problem is the load has to be on a user-triggered event. So if you can have a button for the user to initiate the playing you can do something like:

我确认音频没有按描述工作（至少在运行 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;
}

Then to play it, eg in an ajax request, you can do

然后播放它，例如在 ajax 请求中，你可以这样做

function doSomething() {
    $.post('testReply.php',function(data){
        window.sounds['clap.mp3'].play();
    }); 
}

Not the greatest solution, but it may help, especially knowing the culprit is the load function in a non-user-triggered event.

不是最好的解决方案，但它可能会有所帮助，尤其是知道罪魁祸首是非用户触发事件中的加载函数。

Edit: I found Apple's explanation, and it affects iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

编辑：我找到了苹果的解释，它影响了 iOS 4+：http: //developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

回答by Brian Brown

Try calling the .load() method before the .play() method on the audio or video tag... which will be HTMLAudioElement or HTMLVideoElement respectively. That was the only way it would work on the iPad for me!

尝试在音频或视频标签上的 .play() 方法之前调用 .load() 方法......分别是 HTMLAudioElement 或 HTMLVideoElement 。对我来说，这是它在 iPad 上工作的唯一方式！

回答by Andrew

Autoplay doesn't work on the iPad or iPhone for either the video or the audio tags. This is a restriction set in place by Apple to save the users bandwidth.

对于视频或音频标签，自动播放在 iPad 或 iPhone 上不起作用。这是 Apple 为节省用户带宽而设置的限制。

回答by Adrian

It seems to me that the answer to this question is (at least now) clearly documented on the Safari HTML5 docs:

在我看来，这个问题的答案（至少现在）清楚地记录在Safari HTML5 文档中：

User Control of Downloads Over Cellular Networks

通过蜂窝网络下载的用户控制

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能使用蜂窝网络并按数据单位收费，预加载和自动播放被禁用。在用户启动之前不会加载任何数据。这意味着 JavaScript play() 和 load() 方法在用户启动播放之前也处于非活动状态，除非 play() 或 load() 方法由用户操作触发。换句话说，用户启动的播放按钮有效，但 onLoad="play()" 事件无效。

This plays the movie: <input type="button" value="Play" onClick="document.myMovie.play()">

这是播放电影： <input type="button" value="Play" onClick="document.myMovie.play()">

This does nothing on iOS: <body onLoad="document.myMovie.play()">

这在 iOS 上没有任何作用： <body onLoad="document.myMovie.play()">

回答by Jon Jardine

Have puzzled over this whilst developing a quick prototype web app under iOS4.2 (dev build). Solution is actually quite simple. Note that you can't seem to already have the tag in your HTML page, you actually need to insert the tag into the document dynamically (note this example uses Prototype 1.7 for some extra Javascript snazziness):

在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();

As you've not set a controller, there shouldn't be any need to do anything tricksy with CSS to hide it / position it off-screen.

由于您还没有设置控制器，因此不需要用 CSS 做任何棘手的事情来隐藏它/将其定位在屏幕外。

This seems to work perfectly.

这似乎完美地工作。

回答by bmidgley

Apple does not support the standard completely, but there is a workaround. Their justificationis cellular network congestion, maybe because you'll land on pages that play random audio. This behavior doesn't change when a device goes on wifi, maybe for consistency. By the way, those pages are usually a bad idea anyway. You should not be trying to put a soundtrack on every web page. That's just wrong. :)

Apple 不完全支持该标准，但有一个解决方法。他们的理由是蜂窝网络拥塞，也许是因为您将登陆播放随机音频的页面。当设备使用 wifi 时，这种行为不会改变，也许是为了一致性。顺便说一句，无论如何，这些页面通常是一个坏主意。您不应该尝试在每个网页上都放置配乐。那是错误的。:)

html5 audio will play if it is started as the result of a user action. Loading a page does not count. So you need to restructure your web app to be an all-in-one-page app. Instead of a link that opens a page that plays audio, you need that link to play it on the current page, without a page change. This "user interaction" rule applies to the html5 methods you can call on an audio or video element. The calls return without any effect if they are fired automatically on page load, but they work when called from event handlers.

如果作为用户操作的结果启动 html5 音频将播放。加载页面不算数。因此，您需要将您的 Web 应用程序重构为一个多合一页面的应用程序。您不需要打开播放音频的页面的链接，而是需要该链接在当前页面上播放它，而无需更改页面。此“用户交互”规则适用于您可以在音频或视频元素上调用的 html5 方法。如果调用在页面加载时自动触发，则返回没有任何影响，但在从事件处理程序调用时会起作用。