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注解
随机推荐
- js数据类型及方法
数据类型及方法 数据类型 number 不区分整数和浮点数 string 字符串 boolean true / false 布尔 object null 数组 function 函数 undefine ...
- RPC框架实现(一) Protobuf的rpc实现
概述 RPC框架是云端服务基础框架之一,负责云端服务模块之间的项目调用,类似于本地的函数调用一样方便.常见的RPC框架配带的功能有: 编解码协议.比如protobuf.thrift等等. 服务发现.指 ...
- iOS 性能优化点
用 ARC 管理内存 在正确的地方使用 reuseIdentifier 尽量把 views 设置为完全不透明 如果你有透明的 Views 你应该设置它们的 opaque(不透明)属性为 YES.例如一 ...
- 大流量大负载的Kafka集群优化实战
前言背景 算法优化改版有大需求要上线,在线特征dump数据逐步放量,最终达到现有Kafka集群5倍的流量,预计峰值达到万兆网卡80%左右(集群有几十个节点,网卡峰值流出流量800MB左右/sec.写入 ...
- 利用Python批量重命名文件夹下文件
#!/usr/bin/python # -*- coding: UTF-8 -*- # -*- coding:utf8 -*- import os from string import digits ...
- Cows POJ - 2481 (树状数组 + 单点更新 + 区间查询)
Cows 思路:我们可以按照每个范围的S从小到大排序,相同的S按E从大到小排序,这样的好处是当前范围的S一定大于等于之前范围的S(即当前的范围可能被之前范围的包围),那么我们只需要统计之前的范围E比当 ...
- E1. String Coloring (easy version)(贪心)
E1. String Coloring (easy version) time limit per test 1 second memory limit per test 256 megabytes ...
- 《mysql 必知必会》 速查指南
目录 增 添加一整行 插入多行 删 删除指定行 删除所有行 改 查 简单检索 结果筛选 结果排序 结果过滤 创建字段 处理函数 数据分组 其他高级用法 文章内容均出自 <MySQL 必知必会&g ...
- Jenkins Pipeline 持续集成
Jenkins Pipeline 持续集成 Pipeline Script 执行流程 在使用Pipeline之前请确保Jenkins是2.x版本以上,并且安装了Pipeline插件. Jenkins提 ...
- 对EL自己以及对于param、header、cookie的相关应用的相关知识点的复习
EL表达式语言是一种可以计算和输出的java对象的简单语言. 列入请求语句为下面的方式:request.setAttribute("username","zhangsan ...