由于 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. YII中利用urlManager将URL改写成restful风格

    这里主要涉及url显示样式 1.打开config文件夹下面的mian.php   2.修改内容   如把地址http://www.test.com/index.php?r=site/page/sid/ ...

  2. 【HTML&CSS】搜狐页面代码编写

    <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"& ...

  3. css类选择器类名覆盖优先级

    code <style> .a{ background: red; } .b{ background: yellow; } </style> <div class=&qu ...

  4. JavaWeb学习—思维导图

  5. OpenGL学习--07--模型加载(obj)

    1.tutorial07.cpp // Include standard headers #include <stdio.h> #include <stdlib.h> #inc ...

  6. 润乾V4的最小化部署方式

     在接触到的很多项目实际应用中,部署润乾V4都是使用润乾V4设计器自带的WEB发布向导,直接生成webRoot目录,然后将该目录下的所有文件COPY到项目目录下,然后修改web.xml文件和rep ...

  7. Condition使用

    面试题:写一个固定容量同步容器,拥有put和get方法,以及getCount方法,    能够支持2个生产者线程以及10个消费者线程的阻塞调用 有两种方法 1.使用wait和notify/notify ...

  8. PAT乙级01

    1001 害死人不偿命的(3n+1)猜想 (15)(15 分) 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反 ...

  9. sql 日期类型可以使用大于、小于号直接进行比较运算

    select * from emp where hiredate > '1982-1-1';  -- mysqlselect * from emp where hiredate > to_ ...

  10. Python 执行主程序

    主程序里的代码包含的东西比较多, 如果在程序的.py文件里执行还要再调一遍方法, 但通常这个调用在测试完结后是要删掉的. 那么问题来了, 如果把这个代码直接发给别人, 执行时要再加上调用, 这个就很烦 ...