iOS下Audio自动播放(Autoplay)音乐

时间：2021-01-03 15:27:54

前几天做了一个H5活动页面，产品要求初始化播放音乐，因晓得H5 Audio标签支持Autoplay就没在意。 完了在手机上测试，发现手机上打开页面死活就是不会自动播放，点击播放按钮才可以播放，很是纠结。 然后网上查了下发现iOS上禁止了Audio的Autoplay属性，原因如下：

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.

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

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

详细查看Safari HTML5 Audio and Video Guide

借助Google翻译了解到：苹果为了用户着想，禁止了Autoplay和JS "onload" 加载播放。

官方禁用，和产品沟通了下，产品发了"友站"网页给我说是可以让我参考下，确实可以，但代码太多，弃之。

还是去http://search.yahoo.com找答案了，在IBM开发者找到了答案：

// run on page load

var audio = document.getElementById('audio');

jQuery.ajax({

url: 'ajax.js',

async: false,

success: function() {

audio.play(); // audio will play in iOS before 4.2.1

}

});

详细查看IBM开发者

但iOS4.2.1以后就失效了，现在都iOS8了，真是无语了，但也没找到其它方法，就死马当活马医试一下，结果，神奇的一幕出现了，打开竟然自动播放音乐了，哈哈哈...

不是说失效了么，这是为何呢？哦，刚才只是在微信里打开的，我再用Safari打开就不会自动播放音乐了，还好，我们H5活动仅限微信里面打开。

好了，不过Bug马上又来了，测试发现一台安卓机在微信里打开也不能自动播放，我拿来试了下，确实如此，然后打开"友站"的发现也是不能自动播放，产品确认了下，让参考"友站"的优化一下，就是触摸一下就会自动播放。

document.addEventListener('touchstart', function(){

    audio.play();

}, false);

这次是真的好了，除了那台Android5.x系统的手机，其它在微信打开都可以自动播放了。

总结一下吧：

移动端Audio Autoplay
  1. 苹果认为这是种不友好的行为
  2. 安卓同上
  3. 我同上

国内流量很贵的，哎哟我的钱啊。 我们通过"投机"绕过系统限制而达到了目的，这样真的好吗？

这样对用户的体验真的好吗？

我们真的值得这样做么？

相关文章