前几天做了一个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. Transactional Replication2：在Subscriber中，主键列是只读的

    在使用Transactional Replication时,Subscriber 被认为是“Read-Only”的 , All data at the Subscriber is “read-only ...

  2. 外接程序“VMDebugger”未能加载或者导致了异常。是否希望移除该外接程序？

    收工~

  3. SQL Server 2014新特性探秘(1)-内存数据库

    简介    SQL Server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了.去年我再西雅图参加SQL PASS Summit 2012的开幕式时,微软就宣布 ...

  4. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  5. Building third-party products of OpenCascade

    Building third-party products of OpenCascade eryar@163.com Available distributives of third-party pr ...

  6. 【原创】.NET平台机器学习组件-Infer.NET连载(二)贝叶斯分类器

                本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 微软Infer.NET机器学习组件文章目录:http:/ ...

  7. .NET足球赛事资料数据库平台SmartLottery开源发布——全球足球联赛应有尽有

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 前2个月,我的系列文 ...

  8. 如何用Node编写命令行工具

    0. 命令行工具 当全局安装模块之后,我们可以在控制台下执行指定的命令来运行操作,如果npm一样.我把这样的模块称之为命令行工具模块(如理解有偏颇,欢迎指正) 1.用Node编写命令行工具 在Node ...

  9. AngularJS之高级Route【三】（八）

    前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...

  10. 关于在Linux64位下安装xampp

    网上关于这个主题的内容比较少,所以就写一下按装后的心得.之前一直在windows下用xampp,想在Linux下也体验一把,可是自己的Linux装的是64位的在XAMPP的官网上http://www. ...