使用audio标签遇到的两个问题及解决方案

时间 2019-11-07

标签使用 audio 标签遇到两个问题解决方案繁體版

原文原文链接

<audio>标签是 HTML 5 的新标签。<audio>标签订义声音，好比音乐各其它音频流javascript

公司的项目须要使用这个标签。在使用的过程当中遇到了两个问题：一个是部分手机浏览器没法实现自动播放（一样也没法使用js控制实现自动播放），还有一个是部分浏览器audio标签没法正常响应ended(播放结束)事件，没法获取audio标签的duration属性的值。这里分享一下个人处理方法，但愿可以帮助到一样遇到相似问题的同窗html

一、部分手机浏览器没法实现自动播放

这个现象产生的缘由是：部分浏览器考虑了安全问题（偷跑流量），因此必须用户交互后才能播放。html5

知道了缘由那么天然就很好处理了。对于这个问题，网上大多处理方式都是先监听用户的DOM操做，若是事件响应了音频尚未播放，则播放音频。java

而咱们这边的业务需求，须要一开始就获取自动播放的权限（音频是咱们应用的一个关键功能），因此咱们的处理方式是页面开始就引导用户点击。 git

用户点击“开始导游”才能进入内容页面github

这里，用户点击以后才能使用咱们服务。用户点击以后，咱们也就获取到了js控制自动播放的权限了。后端

若是大家的业务需求没法使用以上方式在一开始就让用户点击、获取播放权限，并且音频并不是页面加载完就必须播放（例如背景音乐之类的）。那么能够先判断一下当前浏览器是否支持自动播放，若是支持则页面加载完当即播放音频，若是不支持则监听用户的DOM操做再播放音频。浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audioPlugin Demo</title>
</head>
<body>
    <script type="text/javascript" src="src/audioPlayPlugin.js"></script>
    <script>
            var bgAudio=new audioController();
            bgAudio.supportAutoPlay({
                src:"file/test1.mp3",
                support:playAudio,//支持自动播放，则当即播放音频
                nonsupport:function(){ //不支持自动播放，监听到用户点击以后播放音频
                    document.addEventListener("click",playAudio)
                }
            })
            function playAudio(){
                bgAudio.play("file/test1.mp3");
                document.removeEventListener("click",playAudio); //移除音频自动播放的事件监听
            }
    </script>
</body>
</html>

这里我写一个audioPlayPlugin.js,对audio标签的经常使用操做进行了一些简单的封装。github地址,coding地址安全

二、部分浏览器audio标签不正常响应ended(播放结束)事件，没法获取audio标签的duration属性的值

由于业务需求，我必须监听音频的各类状态（播放中timeupdate、暂停pause、播放结束ended、缓冲waiting）等，可是在部分手机浏览器（例如MIUI的系统浏览器）中监听不了ended事件。也没法获取audio标签的duration属性的值（若是可以获取duration属性的值，就能够经过监听timeupdate事件，判断currrentTime和duration是否相等来模拟ended事件）。测试

起初看到文章说是 Response Headers的content-type属性值为audio/x-mpeg致使的（浏览器不支持x-mpeg模式），把值设置为audio/mpeg便可。然而，找到后端说了这事儿，他弄了半天把content-type属性值设为audio/mpeg，然而问题并无解决。

最后我作了一个测试，同一个音频直接放在网站目录下用相对路径就能够正常监听ended事件，也能正常获取duration属性值。生产环境咱们的文件是在阿里云上，使用绝对路径。对比了一下headers信息，发现惟一不一样的地方就是Status Code不一样。能正常监听的Status Code是206，不正常的是200。206是分段加载，具体各类status code能够戳这里。

次日，后端主动问我那个问题解决了没。我就说了个人发现，最后后端将音频文件的返回方式调整为206后，问题成功解决。

总结一下：发生这个问题的缘由是音频类型文件请求的响应方式不对。其实默认的响应方式就是206，只是咱们后端在设置文件响应方式的默认配置时，直接copy了一些配置文件，其实并不知道他修改了音频文件的响应方式。

以上是我使用<audio>标签时遇到的两个问题，和个人解决方案。但愿可以帮助到各位同窗。