Question

我正在尝试在iPad上的Safari中自动播放音频文件。如果我在Mac上使用Safari进入页面，那很好。在iPad上，自动播放不起作用。

Answer 1

我还想强调，你不能做到这一点的原因是苹果做出的商业决定，而不是技术决定。也就是说，Apple没有合理的技术理由来禁用iPod Touch上的网络应用程序的声音。这只是一个WiFi设备，而不是可能产生昂贵带宽费用的手机，因此该参数对该设备没有任何优点。他们可能会说他们正在帮助进行WiFi网络管理，但我的WiFi网络带宽问题是我关注的问题，而不是Apple的问题。

此外，如果他们真正关心的是防止不必要的，过度的带宽消耗，他们会提供一个设置，允许用户选择加入网络应用程序的声音。此外，他们还会通过其他方式限制网站使用相同的带宽。但是没有这样的限制。一个网站可以一遍又一遍地在后台下载大量文件，而苹果可能不在乎这个。最后，我相信这些声音无论如何都可以下载，所以没有任何带宽实际上得到了保存！ Apple没有允许它们在没有用户交互的情况下自动播放，使它们无法用于游戏，这当然是他们真正的意图。

Apple阻止了声音，因为他们开始注意到HTML5应用程序可以像本机应用程序一样强大，如果不是这样的话。如果你想在Web Apps中发声，那么你需要游说Apple停止像微软一样反竞争。这里没有可以修复的技术问题。

Answer 2

更新：这是一个黑客攻击，它在IOS 4.X及更高版本上不再有效。这个工作在IOS 3.2.X上。

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

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

复制＆amp;来自网站的粘贴代码：

<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上的代码。

Answer 3

由于各种商业原因，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（）命令，并在没有触摸事件的情况下控制音频。如果你可以完美地计时，只需在声音结束后立即进行暂停。然后下次再次播放时，它将循环回到开头。这不会解决Apple在这里所做的所有混乱，但这是一个解决方案。

Answer 4

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

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

Answer 5

我确认音频无法正常工作（至少在运行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

Answer 6

尝试在音频或视频标记上的.play（）方法之前调用.load（）方法...分别是HTMLAudioElement或HTMLVideoElement。这是它在我身上适用于iPad的唯一方式！

Answer 7

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

Answer 8

在我看来，这个问题的答案（至少现在）清楚地记录在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()">

Answer 9

在iOS4.2（开发版）下开发快速原型网络应用程序时，对此感到困惑。解决方案实际上非常简单。请注意，您似乎没有HTML页面中的标记，您实际上需要动态地将标记插入到文档中（请注意，此示例使用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进行任何棘手的操作来隐藏它/将其置于屏幕外。

这似乎完美无缺。

Answer 10

Apple完全不支持该标准，但有一种解决方法。他们的justification是蜂窝网络拥塞，可能是因为你将登陆播放随机音频的网页。当设备进入wifi时，这种行为不会改变，可能是为了保持一致性。顺便说一下，这些页面通常都是个坏主意。你不应该试图在每个网页上放置音轨。那是错的。：）

如果作为用户操作的结果启动，将播放

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

Answer 11

如果使用以下方法创建音频元素：

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（）似乎是一种自动触发声音的合适方法。

Answer 12

我的解决方案是从之前菜单中的真实触摸事件触发。当然，他们不会强迫您使用特定的玩家界面。就我的目的而言，这很有效。如果您没有现成的界面可供使用，那么您就会感到不安。也许你可以尝试倾斜事件或其他东西......

Answer 13

这似乎有效：

<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开始，这个不再适用。遗憾。

Answer 14

使用jQuery，在Ipad v.5.1.1上测试

$('video').get(0).play();

您必须在页面中追加/删除视频元素。

Answer 15

我通过为允许触发音频的所有事件附加一个事件处理程序来处理这个问题，这个事件处理器触发任何带有自动播放的html音频元素播放一次。

PersonCalender

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

15 个答案: