前几天做了一个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. 我同上

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

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

我们真的值得这样做么？

iOS下Audio自动播放(Autoplay)音乐的更多相关文章

  1. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  2. 解决在ios下不能自动播放音频的问题

    在ios下面是不允许自动播放音频这个操作的,不过我们可以使用微信提供的sdk来做到自动播放音乐的功能 wx.ready(()=>{}) 引入微信的sdk,之后在回调函数里面执行主动触发背景音乐播 ...

  3. 解决ios下audio不能正常播放的问题

    解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...

  4. ios设置音乐audio自动播放

    因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...

  5. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

  6. iOS背景音乐不自动播放

    iOS 内置浏览器safari不允许自动播放音乐.我们需要通过WeixinJSBridgeReady()函数实现自动触发 document.addEventListener("WeixinJ ...

  7. 移动端audio自动播放问题

    中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网 ...

  8. H5页面解决IOS进入不自动播放问题（微信内）

    废话少说,直接上代码. 主要还是调用微信的jdk做兼容处理.,安卓可自动播放. ($(function(){ $(function(){ /* ** 复选框*/ $('.ul-radio').on(' ...

  9. 微信audio自动播放（ios播放问题）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. AngularJS表单验证实现方法详解

    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

  2. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  3. 【开源】OSharp框架解说系列（3）：扩展方法

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  4. Web APi入门之移除XML格式（一）

    前言 回头想来,没想到自己却坚持下来了,EntityFramework系列终于全部完成了,给自己点个赞先.本系列将着手于Web API,关于一些基础的介绍及定义就不再叙述,请参考园友们文章,非常详细, ...

  5. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  6. 深入理解 OWIN 中的 Host 和 Server

    The Open Web Interface for .NET (OWIN),注意单词为大写,之前好像都写成了 Owin,但用于项目的时候,可以写成:Microsoft.Owin.*. OWIN 体系 ...

  7. [OpenCV] Background subtraction

    不错的草稿.但进一步处理是必然的,也是难点所在. http://docs.opencv.org/master/d1/dc5/tutorial_background_subtraction.html#g ...

  8. C++ 使用 opencv 库时 Point 在已经引入了 core.hpp 的情况下仍无法识别的可能原因

    引入了 core.hpp 是不够的.请加上 using namespace cv;

  9. WebService入门案例

    关于WebService的作用和好处,大家应该都了解.但如何在Asp.Net中添加Web Service等问题一直是新手朋友的一大难题.鉴于网上没有一个像样的实际案例,特将课程设计中运用到的WebSe ...

  10. Winform在线更新

    引言 2015年第一篇,Winform在线更新,算是重操旧业吧,09年刚到北京时一直做硬件联动编程,所以大多数时间都在搞Winform, 但是从来没做过在线更新这个功能,前几天参与部门另一个项目,上来 ...