html5-audio标签不能自动播放的坑！！！

应用是运行在公众号上的，一直在google浏览器调试，做播放audio时一开始出现了一个报错

Uncaught (in promise) DOMException

百度搜了下是google浏览器的问题，就一时不着急没处理他，后面这个问题提上了日程，真是整整浪费了一天时间来改这个问题！！！

先简单说下一些我收集整理到的一些原因和处理方式，我也用过部分（如下）

部分浏览器、微信浏览器、ios自带的浏览器不允许你自动播放audio，即使你通过生命周期代码触发play等事件都是不允许的，必须要你进行和浏览器进行事件互动，人为的点击，触摸等操作才能播放。经调研得知：最开始移动端浏览器是完全禁止音视频自动播放的，考虑到了手机的带宽以及对电池的消耗。但是后来又改了，因为浏览器厂商发现网页开发人员可能会使用其他替代方案，而播放性能消耗更为糟糕，所以这样对用户反而是不利的。因此浏览器厂商放开了对多媒体自动播放的限制，只要具备以下条件就能自动播放：

1，没音频轨道，或者设置了 muted 属性
2，在视图里面是可见的，要插入到 DOM 里面并且不是 display: none 或者 visibility: hidden 的，没有滑出可视区域
换句话说，只要你不开声音扰民，且对用户可见，就让你自动播放，不需要你去使用 GIF 的方法进行 hack。这种实现主要对于视频的，自动播放但是却是静音的，需要你点击喇叭才能有声音，这对于音频答题就跟没说一样。

后面我通过查找发现了一个能够代替audio的，叫 AudioContext 但是！！！！虽然能代替，但是也有一些弊端，audiocontext需要用到文件流来实现播放，但是一些音频文件为了防止被其他地方请求下载是不做跨域处理的，所以不同域名的不能跨域请求，再就是这个AudioContext是跟手机静音有关系的，对比了下竞品，抱着我们也不能比他们差的心态，果断放弃了。

下面说一下绕了一圈坑后是如何填坑的：

抓了下竞品的接口，他们他们首次加载的时候有一个.mp3的请求，我们模仿着这么做了，app-create的时候也播放了一个有效但没声音的MP3文件，后面再次无交互执行播放audio时竟然还无效，瞬间又陷入沉思。

因为自动播放是从a页面到b页面后b页面请求接口成功后自动播放，我就想着在a页面请求数据，把数据带到b页面，因为a页面有点击操作，在这个点击操作中进行音频播放，但是也无效，当时以为是vue路由的原因，后面证实也不是。

有时候这个思路就是会陷入一个死循环中，跳不出来，后面可能一下子开窍了，我直接把没有声音的播放操作移到了a页面点击处，之前的操作不变，这样子就好了，其实好的莫名其妙！

而且我发现audio只要成功播放过一次，后面你不交互调用播放方法，也会自动播放，这也是让我不明白的地方

html5-audio标签不能自动播放的坑！！！相关推荐

使用html5 video标签不自动播放视频问题（静音播放）
谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放.但是问题是没有声音. ...
linux java amr转mp3_本工具用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放...
音频转码工具本工具主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放. 支持 Linux/Windows/Mac 平台因为是基于 JAVE 项目 ...
java amr音频转码_jave: 音频转码工具，主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放...
音频转码工具本工具主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放. 支持 Linux/Windows/Mac 平台因为是基于 JAVE 项目 ...
HTML5 audio 标签播放事件流程
此代码包括了html5 audio 标签整个播放流程. 你可以暂停,调整音量,拖动进度条观察一下 var audio = new Audio(); document.body.appendChi ...
HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...
Javascript控制html5 Audio标签
Javascript控制html5 Audio标签 9 Replies 在上一篇文章:Html5 audio标签(属性)的使用详解中已经把关于audio标签的如何使用以及支持属性说清楚了.这里写篇文章 ...
HTML5 audio 标签-在html中定义声音的标签
2019独角兽企业重金招聘Python工程师标准>>> 本文来源 169it HTML 5 <audio> 标签定义和用法 <audio> 标签定义声音,比如 ...
HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
HTML5 Audio/标签Api整理（二）
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...

html5-audio标签不能自动播放的坑！！！

html5-audio标签不能自动播放的坑！！！相关推荐

最新文章

热门文章