audio的自动播放报错解决
使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图
查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动播放,必须由用户交互后才能触发
当用户点击网页后,点击任何位置都行,andio就能自动播报了,然后我就想了个方案,设置个按钮,让按钮自动点击,然后触发audio,然而发现这种作弊方案,仍旧不行
后来各种找方法,标签加muted属性仍于事无补,到最后也只有没有办法的办法
由于play()方法是一个promise,监听它的成功和失败状态,如果失败,那就提醒用户进行交互,设置一个激活按钮,点击后就能触发了
- <template>
- <el-button class="autoPlay" type="text" v-if="isShow" @click="autoPlay">激活</el-button>
- <!-- audio宽度设0,让其隐藏 -->
- <audio muted controls ref="audio" :src="audioSrc" style="width: 0px;"></audio>
- </template>
- import newOrder from '@/assets/audio/new_order.mp3'
- export default {
- data () {
- return {
- audioSrc: newOrder,
- isShow: false
- }
- },
- created() {
- this.open()
- },
- methods: {
- open() {
- const myAudio = document.getElementsByTagName('audio')[0]
- if (myAudio.canPlayType) {
- this.autoPlay()
- } else {
- this.$message({
- type: 'error',
- message: '您的浏览器不支持语音播报'
- })
- }
- },
- // 自动播放
- autoPlay() {
- this.$refs.audio.play().then(() => {
- this.isShow = false
- }).catch(() => {
- this.$message({
- type: 'error',
- message: '语音播报失效,点击右上角"激活"按钮'
- })
- this.isShow = true
- })
- }
- }
- }
audio的自动播放报错解决的更多相关文章
- 100%解决ios上audio不能自动播放的问题
由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...
- redis运用连接池报错解决
redis使用连接池报错解决redis使用十几小时就一直报异常 redis.clients.jedis.exceptions.JedisConnectionException: Could not g ...
- vue 项目 npm install 报错解决
node-sass 安装报错解决办法 2017年04月15日 14:34:25 阅读数:20189 E:\kibana>npm install node-sass > node-sass@ ...
- 摇一摇—微信7.0.8版本audio无法自动播放问题
近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...
- Qt类声明中Q_OBJECT的作用与报错解决
2017-06-22 周四 大雨 北京 院里 新建作图类,继承自QCUstomPlot类 因为需要同时作8张图,都要单坐标缩放的功能,因此想干脆新建一个类,继承自QCUstomPlot,把需要的功能都 ...
- sphinx :undefined reference to `libiconv' 报错解决办法
sphinx :undefined reference to `libiconv' 报错解决办法 2013-11-30 21:45:39 安装sphinx时不停报错...郁闷在make时报错,错误 ...
- linux下启动dbca或netmgr类的图形界面报错解决
linux下启动dbca或netmgr类的图形界面报错解决 Xlib: connection to ":0.0" refused by server Xlib: No pro ...
- CentOS 6.5 Maven 编译 Apache Tez 0.8.3 踩坑/报错解决记录
最近准备学习使用Tez,因此从官网下载了最新的Tez 0.8.3源码,按照安装教程编译使用.平时使用的集群环境是离线的,本打算这一次也进行离线编译,无奈一编译就开始报缺少jar包的错,即使手动下载ja ...
- spring boot jpa 使用update 报错解决办法
在spring boot jpa 中自定义sql,执行update操作报错解决办法: 在@Query(...)上添加 @Modifying@Transactional注解
随机推荐
- Hive学习笔记七
目录 函数 一.系统自带函数 二.自定义函数 三.自定义UDF函数开发案例 压缩和存储 一.Hadoop源码编译支持Snappy压缩 1.资源准备 2.jar包安装 3.编译源码 二.Hadoop压缩 ...
- JVM tomcat 性能调优
1,新建web 测试项目并且发布到Tomcat,访问路径:http://127.0.0.1:8080/JvmWeb/index @WebServlet("/index") publ ...
- iOS 图片的解压缩
一.图片加载的工作流 概括来说,从磁盘中加载一张图片,并将它显示到屏幕上,中间的主要工作流如下: 假设我们使用 +imageWithContentsOfFile: 方法从磁盘中加载一张图片,此时的图片 ...
- npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test_vue_0613@1.0.0 dev: 错误的解决方法
错误原因在于由于文件 node_modules 太大,在项目上传时有些人会删掉 导致我们下载的项目中缺少这个文件 在尝试把自己项目的 node_modules文件夹直接复制过去之后发现问题还没有得到解 ...
- PTA数据结构与算法题目集(中文) 7-27
PTA数据结构与算法题目集(中文) 7-27 7-27 家谱处理 (30 分) 人类学研究对于家族很感兴趣,于是研究人员搜集了一些家族的家谱进行研究.实验中,使用计算机处理家谱.为了实现这个目的 ...
- 定位 iframe
定位iframe # 1.有id,并且唯一,直接写id driver.switch_to_frame("x-URS-iframe") driver.switch_to.frame( ...
- 如何关闭Springboot应用服务
背景 以往的单机应用会采用kill方式关闭应用服务,但是这种关闭应用的方式在springboot中会让当前应用将所有处理中的请求丢弃,返回失败响应.我们在处理重要业务逻辑要极力避免的这种响应失败在,所 ...
- Flutter 实现网易云音乐字幕
老孟导读:没有接触过音乐字幕方面知识的话,会对字幕的实现比较迷茫,什么时候转到下一句?看了这篇文章,你就会明白字幕so easy. 先来一张效果图: 字幕格式 目前市面上有很多种字幕格式,比如srt, ...
- 答好友困惑:Java零基础如何入门,不知道怎么学,迷茫ING
作者:程序员小跃 几个星期之前,我在知乎上看到一个提问,说是:对于完全没有经验零基础自身的数学底子也很弱学习Java应该怎么学习呢?想着类似的问题我也有过回答,并且反馈还是蛮好的,就参考之前的思路回答 ...
- Git应用详解第六讲:Git协作与Git pull常见问题
前言 前情提要:Git应用详解第五讲:远程仓库Github与Git图形化界面 git除了可以很好地管理个人项目外,最大的一个用处就是实现团队协作开发.况且,linus大神开发git的初衷就是为了维护L ...