1.前言h5有很多新特性，新标签，新规范等等，还在不断完善中。各大浏览器厂商都支持，支持也相当强大。作为前端程序员，我觉得还是需要积极去关注，勇敢去实践。接下来给大家分享一个h5特别好用的新特性（暂时不算特别新），可以很方便的监听任何app的返回键，包括安卓机中的物理返回键，满足进一步的需求在项目开发中。2、原因是我半年前接到pm的请求，用纯h5实现多音频播放、暂停、重播，把页面放到驾考本app里面，没有和客户端有任何交互。换句话说，它是一个具有Typeh5功能的混合开发。所以客户端相关的js不需要引用。那为什么不让客户端实现前端h5呢？更何况app里面的返回键还是原生的，在ios和安卓上双方的约定可能不太一样。这是我在写代码之前问的问题。pm小姐姐回我客户的时候还要发布和审核版本，太麻烦了。h5中的在线链接可以做到这一点。嗯，既然是这样，看来这个需求还是蛮简单的，虽然之前没有做过类似的需求。不管发生什么，撸起袖子开始填坑之旅吧。3.具体页面展示这是设计稿和定稿。用户可以点击任意图标播放音频，点击时图标会变化，再点击同一个图标暂停等。当播放第一段音频时，点击其他图标，第一段音频将自动暂停，依此类推。相信有做过类似需求的朋友应该很清楚产品要我们前端做什么。所以，这里会有几个坑，不仅仅是听App的返回键。我将从第一个开始。第一：播放音频时需要秒开，而不是等一秒甚至更久。由于一开始产品给我的是本地音频文件，所以当时并没有考虑在线音频文件（这样可能会加载的更快也可能会更慢），因为音频默认的加载方式是先下载，当音频准备好稍后播放。所以最终我采用了预加载的方式来提高加载效率，让用户感受到尽可能少的延迟。代码如下：就这样吧。但这只是规避了第一个陷阱。第二个坑可能叫做自主优化，就是播放进度条的显示和暂停。需求中没有播放进度条，但是在需求上线后和PM小姐姐沟通的过程中，对方对我的设计给予了肯定和好评。播放进度条的设计和加入更贴近原生App，用户体验更好。而在页面初始化的时候，菊花图的存在也是非常有意义的。自定义播放进度条，根据当前播放的音频时长变化。暂停时会暂停，重新初始化时会重新初始化。它很好地集成到页面中。希望这对你也有帮助。涉及的代码会专门用到canplay、timeupdate事件和load()函数。这里我个人是使用jq来实现的。二、DOM结构的渲染。不建议在页面上硬写，不到六个，勉强能写成这样。但是一旦数量增加，就非常不可取了。我一开始使用的是传统的字符串拼接实现，后来导师建议我使用模板引擎进行渲染，驾考书业务部默认的是artTemplate.js，最后我修改了。分为原生JS和jq两个版本。也可以自己研究——模板引擎和拼接字符串的优缺点。如果自己设计模板引擎，如何设计。4.接下来我将重点介绍我如何监控任何应用程序自带的返回按钮，以及Android手机中的物理返回按钮。那我为什么要监控呢？这里我要强调、强调、再强调。无论是微信、QQ、App，还是苹果手机上的浏览器，当涉及到音频或视频时，系统会在返回上一页时自动暂停当前播放，但并不是所有安卓手机都可以。所以我们必须自己定制显示器。很多朋友可能首先想到的是百度，然后答案无非就是pushHistory();window.addEventListener("popstate",function(e){alert("我监听了浏览器的后退按钮事件");//根据自己的需要实现自己的功能},false);functionpushHistory(){varstate={title:"title",url:"#"};window.history.pushState(state,"title","#");这看起来很熟悉吗？但是，关键需求并不能完美实现。这段代码有什么用，我当时绞尽脑汁。直到在一位好朋友的指导下，我复制了这段代码varhiddenProperty='hidden'indocument?“隐藏”：文档中的“webkitHidden”？“webkitHidden”：文档中的“mozHidden”？'mozHidden':null;varvisibilityChangeEvent=hiddenProperty.replace(/hidden/i,'visibilitychange');varonVisibilityChange=function(){if(document[hiddenProperty]){console.log('pageinactive');}else{console.log('pageactive')}}document.addEventListener(visibilityChangeEvent,onVisibilityChange);所有问题都解决了。我个人对这段代码原理的理解是通过判断用户是否在浏览当前页面来进行相关操作。这里是MDN相关链接：https://developer.mozilla.org...。所以最后我是这样处理的，代码截图如下：五、手机兼容性众所周知，目前的Android系统4.0等都是低端版本。大多数安卓手机都可以识别这个属性，但个人低端安卓手机无法识别，原因是navigator.userAgent的内核版本太低，现在很多chrome都是64+的，遇到这个问题就想办法兼容吧。综上所述，遇到这个问题不要太着急。一定要有解决方案，但不是一棒子打，而是要通过转换思维方式快速实现需求。希望这个功能可以帮到你。6.致谢与呼吁自从我在2018年3月发表了这篇文章，当时写得非常简洁，但还是收到了很多阅读。我很惊讶，谢谢你的认可。但直到今天，我发现很多知名微信公众号公众号和网站都转载了我的文章，其中有一些没有标明原文地址和作者，这让我感到惊讶和失望。所以最后还是希望大家能够互相尊重。最后，大家的劳动成果，谢谢大家。转载文章时，请注明真实原文地址和作者。这就是我这次要更新文章的原因。另外，现在不做常规业务开发，转做h5游戏开发，集游戏创意、美工、编码、测试于一体。欢迎同行朋友交流。
