前几天做了一个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. 【解决】Word 在试图打开文件时遇到错误 请尝试下列方法：* xxx * xxx * xxx

    有好几种情况,我先说我的这个情况 1.word设置不当导致 看图: 然后就能打开了~ 2.word格式问题,比如原来是doc,被人手动改成docx~~~ 解决方法:改回来 3.word版本不兼容,比如 ...

  2. 【.NET深呼吸】线程信号量（Semaphore）

    Semaphore类可以控制某个资源允许访问的线程数,Semaphore有命名式的,也有不命名的:如果不考虑跨进程工作,一般在代码中使用不命名方式即可. 信号量有点类似于等待句柄,某个线程如果调用了W ...

  3. ClickOnce部署（4）：下载多个安装包

    有时候,我们可能会一次性发布多个安装包,当然在网页上多加几个链接让用户逐个安装也是可取的.不过,也可以弄得更方便些,即用户先安装一个,作为一个"引导程序",然后通过这个程序去下载安 ...

  4. 深入学习jQuery元素过滤

    × 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...

  5. Form authentication（表单认证）问题

    前言 最近在做ASP.NET MVC中表单认证时出了一些问题,特此记录. 问题 进行表单认证时,在 PostAuthenticateRequest 事件中从Cookie值中解密票据.如下: prote ...

  6. （转）使用minicpan创建本地CPAN

    在临时的办公场所网络不畅,有时不能下载cpan上的软件包,所有只能自建一个cpan. 这里使用了工具'minicpan',简单地说:就是把互联网上的CPAN搬到自己的电脑里,它的最初想法来自Randa ...

  7. 【jQuery小实例】---3 凤凰网首页图片动态效果

    ---本系列文章所用使用js均可在本博客文件中找到 本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图 ...

  8. Hive启动报错： Found class jline.Terminal, but interface was expected

    报错: [ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassC ...

  9. 解决CHROME中画布中无法显示图片的方法

    最终效果图如下 我按照W3SCHOOL里面的方法,代码如下 <!DOCTYPE html> <html> <body> <script type=" ...

  10. mysql转换类型

    今天遇到一个问题,那就是当时一个项目设计表的时候,把时间以20160101123596这样的形式,以varchar存到了数据库里. 今天要写一条sql,查询一个报表,条件就是要过滤这个时间,但是var ...