由于 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. Django之WSGI浅谈

    一.什么是Web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统. 浏览器与服务器之间发起HTTP请求: 1.浏览器发送一 ...

  2. 使用office打印到文件功能进行打印测试

     大家在日常的支持工作中常会遇到各种打印问题,所以进行一些打印测试也在所难免.但是每次跑来跑去浪费了宝贵的时间,打印又浪费了纸张资源.我们也会想到安装虚拟打印机,但因为没有合适的软件,结果是我们只 ...

  3. Listview点击已读使用getBadgeView标示

    重:每个ListItem是属于ListItem自己的,不能够放到ViewHolder中,而是数据源每项的. @Override public View getView(int position, Vi ...

  4. React +Redux+ Ant Design + echarts 项目实践

    项目框架 采用React.js作为项目的框架 采用redux作为数据管理的框架 采用antd作为项目的UI组件 采用echarts完成项目中折线图的绘制 个人项目工作流程总结 拿到UI高保真图片之后先 ...

  5. 的确，Java存在缺陷。但是……

    [编者按]本文作者为资深码农 Tim Spann,主要讲述 Java 让人无法抗拒的众多优点以及一些些缺陷.本文系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文. 早在90年代中期,笔者 ...

  6. 12.Spring——Web MVC框架

    1.Spring Web MVC 框架 2.Spring MVC Hello World 例子 1.Spring Web MVC 框架 Spring web         MVC 框架提供了模型-视 ...

  7. 使用Axure设计中，大型的后台系统原型总结

    使用Axure设计中,大型的后台系统原型总结 2018年4月16日luodonggan 在产品原型设计中,经常会涉及到后台系统原型的设计,如何设计出更规范标准的后台系统原型,是很多产品同行们都会遇到的 ...

  8. 如何快速开发一个支持高效、高并发的分布式ID生成器

    ID生成器是指能产生不重复ID服务的程序,在后台开发过程中,尤其是分布式服务.微服务程序开发过程中,经常会用到,例如,为用户的每个请求产生一个唯一ID.为每个消息产生一个ID等等,ID生成器也是进行无 ...

  9. word问题

  10. ARC中block块作为属性的使用笔记

    ARC中block块作为属性的使用笔记 block较难理解,根据在内存中的分布情况就分为3种类型,根据使用的情形又分为很多很多种.虽然用起来容易,但使用不当会造成内存泄露,虽然都是这么说,但你真的研究 ...