由于 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. grafana 安装- 曲线图展示每秒新增数据量

    下载: https://dl.grafana.com/oss/release/grafana-5.4.2.windows-amd64.zip 解压就能用 添加数据源 添加查询条件 sql 模式编写查询 ...

  2. vue项目中引入bootstrap

    (1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ...

  3. 依赖注入（一）构造函数注入（PHP）

    构造函数注入(constructor injection)是依赖注入最常见的形式之一. 由名称可以看出,该技术需要我们把所有依赖显示的体现在构造函数中. 好了,直接上代码: <?php /** ...

  4. zabbix系列之三——安装报错

    1Zabbix_server启动失败 1.1查看日志:vi /var/log/zabbix/zabbix_server.log zabbix_server [23500]: cannot open l ...

  5. leetCode题解之Array Partition I

    1.题目描述 2.分析 按照题目要求,主要就是对数组进行排序 3.代码 int arrayPairSum(vector<int>& nums) { ; sort( nums.beg ...

  6. Eigen 学习之块操作

    Eigen 为 Matrix .Array 和  Vector提供了块操作方法.块区域可以被用作 左值 和 右值.在Eigen中最常用的块操作函数是 .block() . block() 方法的定义如 ...

  7. 2.CSS使用基础(1)

    目录 一.css颜色的四种表示法 二.使用css 4种方式 三.css注释: 四.CSS Id 和 Class选择器 五.多重样式优先级顺序 六.CSS Backgrounds(背景) 七.CSS T ...

  8. HDFS pipeline写 -- datanode

    站在DataNode的视角,看看pipeline写的流程,本文不分析客户端部分,从客户端写数据之前拿到了3个可写的block位置说起. 每个datanode会创建一个线程DataXceiverServ ...

  9. SQL SERVER Management Studio编写SQL时没有智能提示的解决方式

    1. 检查设置里是否启用智能感知(Intellisence),可以在“工具”→“选项”里设置 2. 如果启用后还是无效,可以新建一个查询窗口查询,输入关键词的前面几个字母看是否有提示(或者使用Ctrl ...

  10. 【Pygame】 简易五子棋

    import pygame import sys import time import random pygame.init() screen_size = (800,560) WIDTH = 720 ...