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


88

我正在尝试获取音频文件以在iPad上的Safari中自动播放。如果我在Mac上使用Safari浏览该页面,就可以了。在iPad上,自动播放不起作用。


1
这不是答案,而只是观察。当我将WireShark连接到iPad时,我注意到它无法自动播放,但无论如何仍会下载Wave文件。第一个HTTP Get仅询问文件的前2个字节,但iPad在其他一些Get请求中询问Wave文件的其余部分。甚至更奇怪的是,当您单击音频组件的“播放”按钮时,iPad再次重新加载Wave文件。
Javamann 2011年

Answers:


34

更新:这是一个hack,并且在IOS 4.X及更高版本上不再起作用。此版本适用于IOS3.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上测试了代码。


1
这是另一个解决方法:codeblog.co/getting-autoplay-working-on-ios我刚刚验证了它可以在装有iOS 3.2的iPad上使用。
Ciryon 2010年

49
不要浪费时间,因为它不再适用于iOS 4+
jcampbell1 2011年

104

我还要强调一点,您无法执行此操作的原因是Apple做出的商业决定,而不是技术决定。毫无疑问,Apple没有合理的技术理由来禁用iPod Touch上的Web应用程序的声音。那只是一个WiFi设备,而不是可能产生昂贵带宽费用的电话,因此该参数对该设备的价值为零。他们可能会说他们正在帮助WiFi网络管理,但是我的WiFi网络上的带宽问题是我所关心的,而不是Apple的问题。

而且,如果他们真正关心的是防止不必要的带宽消耗过多,那么他们将提供允许用户选择加入Web应用声音的设置。而且,他们将采取某些措施来限制网站通过其他方式消耗等效带宽。但是没有这样的限制。一个网站可以在一遍又一遍地在后台下载巨大的文件,而Apple对此不太在乎。最后,我相信声音还是可以下载的,所以没有实际保存带宽!苹果只是不允许它们在没有用户交互的情况下自动播放,这使它们无法用于游戏,这当然是他们的真实意图。

苹果之所以屏蔽声音,是因为他们开始注意到HTML5应用程序的功能与本机应用程序一样强大,甚至更多。如果要在Web Apps中发出声音,则需要游说Apple,以停止像Microsoft这样的反竞争。这里没有可以解决的技术问题。


Android是否不一样?
符文耶普森

1
@Rune Jeppesen不。我有一个PhoneGap / Cordova应用程序,它具有音频播放器,并且可以在Android上完美运行。我在StackOverflow中达到此主题的唯一原因是iOS对音频播放的限制。
Ulysses Alves

现在,适用于Android和台式机的Chrome的政策类似于iOS
Ore4444 '18年

28

由于各种商业原因,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>

基本上,您在第一次触摸事件时就开始播放音频文件,然后立即将其暂停。现在,您可以在整个Javascript中使用soundHandle.play()和soundHandle.pause()命令,并控制音频而不会发生触摸事件。如果您可以安排好时间,请在声音结束后立即暂停一下。然后,下次您再次播放它时,它将循环回到开头。这不能解决苹果在这里造成的所有混乱,但这是一种解决方案。


我还没有尝试过,但是如果它确实有效,那就太好了。
courtsimas 2012年

3
令人惊讶的是,更多的人对此不感兴趣。
aoeu256 2014年

这仍然有效吗?我似乎能够
使它

@MastaBaba 这应该是公认的答案。为什么?它没有回答问题,因为这是OP的要求:我正在尝试获取音频文件以在Safari中自动播放而此答案对自动播放没有帮助。
首次

23

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

如果我弄错了,请告诉我。在最近一次更新之前,我在iPad和iPhone上都存在漏洞,它们似乎都已被关闭。


5
我可以验证是否有代码可以自动播放音频,而无需用户干预iPad和iPod touch(4.2.1版)。我今天刚刚将iPad更新到4.2.1(在测试音频预加载器的过程中),并惊恐地看着它停止工作。
杰森·凯斯特

2
<video>4.2.1上,我已经验证,只要.load()thenet .play()出现在同步的 click / tap处理程序中,它就可以工作。否则,它将失败。
N Rohler

1
每个媒体元素进行用户交互之后,似乎可以对媒体(音频和视频)元素进行程序控制。也就是说,如果您有音频元素A和B,并且您在单击(或触摸)事件处理程序的范围内通过代码开始播放A,则它可以工作。但是,这并不能意味着你以后可以开始B的播放click事件处理程序的范围之外。将iOS中的媒体元素视为单例,并在一个实例上交换源,而不是将实例与源相乘。
蒂姆·埃里克森

9

我确认音频没有按所述方式工作(至少在运行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


这是金答案。您可以用多个声音填充声音对象。在ajax调用成功/错误案例后,您可以播放任何内容。适用于所有设备!大tnx !!!
安德里斯

7

尝试在音频或视频标签的.play()方法之前调用.load()方法,它们分别是HTMLAudioElement或HTMLVideoElement。那是它对我来说可以在iPad上运行的唯一方法!


根据Apple开发人员的文档,.load和.play都不会起作用,除非由用户触发。
Jeffrey Van Alstine '16

5

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


5

在我看来,(至少现在)这个问题的答案已经清楚地记录在Safari HTML5文档中

用户控制蜂窝网络上的下载

在iOS上的Safari(适用于包括iPad在内的所有设备)上的Safari中,用户可能位于蜂窝网络上,并按数据单元收费,因此禁用了预加载和自动播放功能。在用户启动数据之前,不会加载任何数据。这意味着,除非用户动作触发了play()或load()方法,否则在用户启动播放之前,JavaScript play()和load()方法也是无效的。换句话说,用户启动的“播放”按钮有效,但onLoad =“ play()”事件无效。

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

这在iOS上不起作用: <body onLoad="document.myMovie.play()">


2

在iOS4.2下开发快速原型Web应用程序(开发版)时对此感到困惑。解决方案实际上很简单。请注意,您的HTML页面中似乎尚未包含标签,实际上您需要将标签动态地插入文档中(请注意,此示例使用Prototype 1.7来增强Java脚本的吸引力):

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做任何棘手的操作即可将其隐藏/在屏幕外放置。

这似乎完美地工作。


2

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

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


1

我的解决方案是从上一个菜单中的实际触摸事件触发。当然,它们不会强迫您使用特定的播放器界面。就我而言,这很好。如果您没有现有的界面可以使用,那么您会感到困惑。也许您可以尝试倾斜事件之类的东西...


1

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

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()似乎是自动触发声音的合适方法。


我试过了,但似乎没有用。任何更新? sandbox.coolaj86.info/html5-audio-tag-ios4.html
coolaj86

0

与jQuery配合使用,并在Ipad v.5.1.1上进行了测试

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

您必须从页面添加/删除视频元素。


3
在iPad 1 iOS 5.1.1上无法使用...尽管在iPod 6.0和iPhone上可以使用
morgan_il 2012年

0

我通过为允许触发音频的所有事件附加一个事件处理程序来处理此问题,该事件处理程序将触发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');
            });
    });
}

0

这似乎可行:

<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开始,此功能不再有效。抱歉。


@NisseEngström对我来说,mp3文件也没有存档,因此,存档链接编辑非常无聊。
再见StackExchange

@FrankerZ:有一个mp3链接?我错过了。谢谢。
NisseEngström17年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.