由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio.

这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.
但 iOS 9 出现后, 发现这个方案"失效"了.

没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件.

对于能够自动播放时事件的顺序如下
loadstart -> loadedmetadata -> loadeddata -> canplay -> play -> playing

对于不能自动播放时触发的事件因系统版本不同而不同
* iPhone5 iOS 7.0.6 loadstart
* iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay

最终发现相比原来的 hack 方案, 对于 iOS 9 还需要额外的 load 一下, 否则直接 play 不能让 audio 开始播放.
    audioEl.load(); // iOS 9
    audioEl.play(); // iOS 7/8 仅需要 play 一下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Fake auto play html audio in iOS Safari the right way</title>

</head>

<body>

    <h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1>

    <p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p>

    <br>

    <br>

    <br>

    <audio id="bgmusic" autoplay preload loop controls></audio>

    <script>

    (function() {

        function log(info) {

            console.log(info);

            // alert(info);

        }

        function forceSafariPlayAudio() {

            audioEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效

            audioEl.play(); // iOS 7/8 仅需要 play 一下

        }

        var audioEl = document.getElementById('bgmusic');

        // 可以自动播放时正确的事件顺序是

        // loadstart

        // loadedmetadata

        // loadeddata

        // canplay

        // play

        // playing

        //

        // 不能自动播放时触发的事件是

        // iPhone5  iOS 7.0.6 loadstart

        // iPhone6s iOS 9.1   loadstart -> loadedmetadata -> loadeddata -> canplay

        audioEl.addEventListener('loadstart', function() {

            log('loadstart');

        }, false);

        audioEl.addEventListener('loadeddata', function() {

            log('loadeddata');

        }, false);

        audioEl.addEventListener('loadedmetadata', function() {

            log('loadedmetadata');

        }, false);

        audioEl.addEventListener('canplay', function() {

            log('canplay');

        }, false);

        audioEl.addEventListener('play', function() {

            log('play');

            // 当 audio 能够播放后, 移除这个事件

            window.removeEventListener('touchstart', forceSafariPlayAudio, false);

        }, false);

        audioEl.addEventListener('playing', function() {

            log('playing');

        }, false);

        audioEl.addEventListener('pause', function() {

            log('pause');

        }, false);

        // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,

        // 因此我们通过一个用户交互事件来主动 play 一下 audio.

        window.addEventListener('touchstart', forceSafariPlayAudio, false);

        audioEl.src = 'http://www.w3school.com.cn/i/song.mp3';

    })();

    </script>

</body>

</html>

关于html5 audio 标签在ios系统上不能正常自动播放的解决办法的更多相关文章

  1. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  2. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

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

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

  4. HTML5 <Audio/>标签Api整理（二）

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  5. runloop是iOS系统上的actor模式

    runloop是iOS系统上的actor模式(单线程派发的)

  6. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  7. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  8. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  9. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

随机推荐

  1. AJAX异步的 JavaScript

    什么是AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. ...

  2. axios上传图片(及vue上传图片到七牛)）

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...

  3. pom.xml 如果使用 mvn exec:exec 命令运行项目

    pom.xml 如果使用 mvn exec:exec 命令运行项目,红色字体要与groupid相同 <project xmlns="http://maven.apache.org/PO ...

  4. 2java.lang.NoClassDefFoundError异常

    1.错误信息 2.错误分析: JVM读到程序的第三行,会在当前路径 "D:\java" 下寻找com.yangquan.aolun这个包路径下的Cat类,但当前路径下根本就没有co ...

  5. Django Redis验证码 密码 session 实例

    1.settings CACHES = { "default": { "BACKEND": "django_redis.cache.RedisCach ...

  6. [翻译] 扩张卷积 (Dilated Convolution)

    英文原文: Dilated Convolution 简单来说,扩张卷积只是运用卷积到一个指定间隔的输入．按照这个定义,给定我们的输入是一个2维图片,扩张率 k=1 是通常的卷积,k=2 的意思是每个输 ...

  7. 关于Entity Framework更新的几种方式以及可能遇到的问题（附加类型“Model”的实体失败，因为相同类型的其他实体已具有相同的主键值）在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值，则可能会发生上述行为

    在日常使用Entity Framework中,数据更新通常会用到.下面就简单封装了一个DBContext类 public partial class EFContext<T> : DbCo ...

  8. ARC下block使用情况

    ARC与MRC的block有着一些区别,笔记整理ARC的block,仅仅是自己参考的笔记,详情请参考 http://www.cnbluebox.com/?p=255 在开始之前,请新建一个Model类 ...

  9. 定制选择范围的按钮RangeButton

    定制选择范围的按钮RangeButton 效果: 源码: RangeButton.h 与 RangeButton.m // // RangeButton.h // PulsingView // // ...

  10. nodepad++添加新主题

    https://www.cnblogs.com/d0main/p/6915460.html