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注解
随机推荐
- 初学jQuery使用方法
jQuery引用 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></scri ...
- MATLAB 概率论题
1. 用模拟仿真的方法求解 clc clear tic n=0; N=100000; for ii=1:N b='MAXAM'; %字符串格式 a=randperm(5); % b=[b(a(1)), ...
- 用c#每日更换“必应背景图片”为“桌面壁纸”
必应每天都会更换背景图片,都非常漂亮,有的时候还十分惊艳,同时还会根据每个地区的特色不同应用不同的图片. 下面用c#抓取必应每天的背景图片,并实现桌面壁纸的每天自动切换 实现思路 1.通过获取&quo ...
- Unix 下 使用 RVM 管理 Ruby 和 gem
转载:http://www.ibm.com/developerworks/cn/aix/library/au-aix-manage-ruby/ 尽管 Internet Relay Chat.论坛和 ...
- Node教程——Node+MongoDB案例实现用户信息的增删改查
想要获取源代码的同学可以留言,我不做git上传了,案例太简单 没必要 综合演练 用户信息的增删改查 需求:你需要实现这样的结果 点击添加可以添加用户,点击删除可以删除点击修改可以修改 代码分析: 1. ...
- springboot + aop + Lua分布式限流的最佳实践
整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 一.什么是限流?为什么要限流? 不知道大家有没有做过帝都的地铁, ...
- stm32:#ifndef/#define/#endif使用
参考:https://blog.csdn.net/abc5382334/article/details/18052757/ 比如:存在a.h文件#include "c.h"而此时b ...
- Azure多因素认证
什么是多重身份验证? 双重验证是需要多种验证方法的身份验证方法,可为用户登录和事务额外提供一层重要的安全保障. 它的工作原理是需要以下两种或多种验证方法: 用户知道的某样东西(通常为密码) 用户具有的 ...
- python--爬虫(XPath与BeautifulSoup4)
获取页面内容除使用正则意外,还可以使用XPath,其原理是将html代码转换为xml格式,然后使用XPath查找html节点或元素. 选取节点 XPath使用路径表达式来选取XML文档中的节点或节点集 ...
- js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用
主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...