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

mil*_*eow 87 iphone audio html5 ipad

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

小智 104

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

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

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


Fa1*_*gel 34

更新:这是一个黑客攻击,它不再适用于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> 
Run Code Online (Sandbox Code Playgroud)

这不是我的来源.我前段时间发现了这个,用IOS 3.2.X测试了IPad和IPhone上的代码.

  • 不要浪费你的时间,因为它不再适用于iOS 4+ (49认同)

kal*_*azy 28

出于各种商业原因,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>
Run Code Online (Sandbox Code Playgroud)

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

  • 感到惊讶的是,更多的人对此并不感兴趣. (3认同)

Dav*_*din 23

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

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

  • 我可以验证我的代码是否可以自动播放音频而无需用户干预iPad和iPod touch,4.2.1之前.我今天刚刚将我的iPad更新到4.2.1(在测试我的音频预载器的过程中),并且惊恐地看着它只是停止工作. (5认同)
  • 在`<video>`4.2.1中,我已经验证只要`.load()`然后`.play()`进入**同步**点击/点击处理程序,它就可以了.否则,它失败了. (2认同)

Jac*_*uka 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;
}
Run Code Online (Sandbox Code Playgroud)

然后播放它,例如在ajax请求中,你可以做到

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

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

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


小智 7

尝试在音频或视频标记上的.play()方法之前调用.load()方法...分别是HTMLAudioElement或HTMLVideoElement.这是它在iPad上为我工作的唯一方式!


And*_*rew 5

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


Adr*_*ian 5

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

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

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