摘要：第二天，后端主动问我那个问题解决了没。我就说了我的发现，最后后端将音频文件的返回方式调整为后，问题成功解决。总结一下发生这个问题的原因是音频类型文件请求的响应方式不对。以上是我使用标签时遇到的两个问题，和我的解决方案。
公司的项目需要使用这个标签。在使用的过程中遇到了两个问题：一个是部分手机浏览器无法实现自动播放（同样也无法使用js控制实现自动播放），还有一个是部分浏览器audio标签无法正常响应ended(播放结束)事件，无法获取audio标签的duration属性的值。这里分享一下我的处理方法，希望能够帮助到同样遇到类似问题的同学
1、部分手机浏览器无法实现自动播放这个现象产生的原因是：部分浏览器考虑了安全问题（偷跑流量），所以必须用户交互后才能播放。
知道了原因那么自然就很好处理了。对于这个问题，网上大多处理方式都是先监听用户的DOM操作，如果事件响应了音频还没有播放，则播放音频。
而我们这边的业务需求，需要一开始就获取自动播放的权限（音频是我们应用的一个关键功能），所以我们的处理方式是页面开始就引导用户点击。
用户点击“开始导游”才能进入内容页面
这里，用户点击之后才能使用我们服务。用户点击之后，我们也就获取到了js控制自动播放的权限了。
如果你们的业务需求无法使用以上方式在一开始就让用户点击、获取播放权限，而且音频并非页面加载完就必须播放（例如背景音乐之类的）。那么可以先判断一下当前浏览器是否支持自动播放，如果支持则页面加载完立即播放音频，如果不支持则监听用户的DOM操作再播放音频。
audioPlugin Demo
这里我写一个audioPlayPlugin.js,对audio标签的常用操作进行了一些简单的封装。github地址,coding地址
2、部分浏览器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了一些配置文件，其实并不知道他修改了音频文件的响应方式。
以上是我使用
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82507.html
摘要：第二天，后端主动问我那个问题解决了没。我就说了我的发现，最后后端将音频文件的返回方式调整为后，问题成功解决。总结一下发生这个问题的原因是音频类型文件请求的响应方式不对。以上是我使用标签时遇到的两个问题，和我的解决方案。 标签是 HTML 5 的新标签。标签定义声音，比如音乐各其它音频流 公司的项目需要使用这个标签。在使用的过程中遇到了两个问题：一个是部分手机浏览器无法实现自动播放（...
摘要：由于苹果的限制必须配合微信接口做处理。中已修复标签的设置，会影响二维码识别我试出来的微信客户端内，如果页面链接中含有未转码的特殊字符，可能会导致二维码无法识别以上如果遇到新的问题会继续更新 缓存控制 http接口数据缓存 一直在做spa，应用内的页面切换没有接口数据缓存的问题，而从应用内切换到外部再回来的话，如果接口地址参数都不变，那么之前请求过的接口，会使用上一次请求拿到的数据，抓包...
摘要：编码结束后，调用函数，来销毁和编码器。调用函数对参数中的格式音频数据帧进行解码，参数中存放解码后的音频数据帧。调用函数来销毁和解码器说重点当做即时通信产品，像微信这种的手机端，它们接受到很有可能就是协议压缩后的音频文件。 showImg(https://segmentfault.com/img/bVbtzkh?w=1024&h=682); 这么牛逼的轮子，肯定要美图镇楼 Speex是一...
摘要：编码结束后，调用函数，来销毁和编码器。调用函数对参数中的格式音频数据帧进行解码，参数中存放解码后的音频数据帧。调用函数来销毁和解码器说重点当做即时通信产品，像微信这种的手机端，它们接受到很有可能就是协议压缩后的音频文件。 showImg(https://segmentfault.com/img/bVbtzkh?w=1024&h=682); 这么牛逼的轮子，肯定要美图镇楼 Speex是一...
阅读 663·2021-09-30 09:47
阅读 3125·2021-09-28 09:35
阅读 2068·2021-09-24 10:31
阅读 3625·2021-09-22 15:16
阅读 3190·2021-09-22 10:02
阅读 833·2021-09-22 10:02
阅读 1590·2021-09-08 09:36
阅读 1858·2019-08-30 14:18
