Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景
Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音):
Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面可以实现在360极速浏览器中自动播放音频正常,但是在Chrome浏览器中,如果
没有任何事件触发的情况下不会自动播放。
为什么不能实现自动语音播报。
chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能。
严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频。
不光是这样,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,
使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException;
can-autoplay插件:
can-autoplay - npm
可以检测浏览器是否支持自动播放音频和视频。
注:
博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、插件安装
npm install can-autoplay
2、插件引入
import canAutoPlay from 'can-autoplay';
3、检测是否支持自动播放
canAutoPlay.audio().then(({ result }) => {//支持自动播放} else {}});
4、用法示例
//检测是否支持媒体自动播放canAutoPlay.audio().then(({ result }) => {//支持自动播放if (result === true) {this.speech.speak({ text: "叮叮当 叮叮当 响了响叮当" }).then(() => {});} else {this.$alert("检测到您的浏览器不支持媒体自动播放,是否同意播放音频","提示",{confirmButtonText: "确定",callback: (action) => {this.audio.play();},});}});
5、完整示例代码
<template></template>
<script>
import Speech from "speak-tts"; // es6
import canAutoPlay from 'can-autoplay';
export default {name: "audioAutoPlay",data() {return {speech: null,};},mounted() {//初始化speakTTS插件this.speechInit();//定时器模拟播报setInterval(() => {//检测是否支持媒体自动播放canAutoPlay.audio().then(({ result }) => {//支持自动播放if (result === true) {this.speech.speak({ text: "叮叮当 叮叮当 响了响叮当" }).then(() => {});} else {this.$alert("检测到您的浏览器不支持媒体自动播放,是否同意播放音频","提示",{confirmButtonText: "确定",callback: (action) => {this.audio.play();},});}});}, 5000);},methods: {//初始化speakTTS插件speechInit() {this.speech = new Speech();this.speech.setLanguage("zh-CN");this.speech.init().then(() => {});},},
};
</script><style scoped>
</style>
6、运行在谷歌浏览器中,如果刷新后没有任何交互事件则会提示,如果有则不提示
7、运行在360极速浏览器中刷新之后即使没有任何事件,也能支持自动播放,不会弹出提示。
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击相关推荐
- 在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步 用npm装这个几个包 "video.js": "^6.6.0&quo ...
- 在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先 下载并安装海康插件 webcontrol.exe 然后 直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
- vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法 配置和启用海康插件详情看本人博客 链接:https://blog.csdn.net/jinglianglove/article/de ...
- vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式 在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
- vue中使用mousewheel事件在火狐浏览器中不生效
vue中使用mousewheel事件在火狐浏览器中不执行 将mousewheel修改为wheel就可以了.
- 【H5】html5 video 在微信浏览器视频不能自动播放 !
html5 video在安卓微信浏览器视频不能自动播放 ! html5 video在安卓微信浏览器视频不能自动播放 ! html5 video在安卓微信浏览器视频不能自动播放 ! 注:重要的事情说三遍 ...
- html5 video微信浏览器视频不能自动播放
2019独角兽企业重金招聘Python工程师标准>>> html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的 ...
- ios微信下vue项目组件切换并自动播放音频的解决方案
最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种 ...
- 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught(in promise) DOMException
转载http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动 ...
最新文章
- putty串口打开没反应_如何使用树莓派快速搭建一个串口数据记录器?
- Sharepoint 2010 隐藏基本搜索中心搜索结果左侧的分类条件
- RTP格式图 NNEXB格式和RTP格式
- 第一个Android工程HelloAndroid
- Java并发编程实战————Semaphore信号量的使用浅析
- (Command Pattern)命令模式
- 对称加密算法在C#中的踩坑日常
- php mysql sum_thinkphp mysql语句 sum
- linux的网络配置有线线缆被拔出
- 扫描指定ip的指定端口,识别开放的端口所对应的服务
- 【转载】Matlab画图命令介绍
- 安卓蓝牙键盘按键映射_键盘按键映射器安卓版
- [转]防火墙、防病毒网关、IDS以及该类安全产品开发(文章汇总)
- 利用beego开发网站(一)
- 三个非负整数 马蹄集
- python-seleium实现珞珈在线网课辅助观看功能
- Python利用xpath和正则re爬取新浪新闻
- Android8.1 修改音量级别和默认音量
- 乒乓球发旋转球的关键是什么?
- maven系列:生命周期
热门文章
- ubuntu16.04安装UR3/UR5/UR10机械臂的ROS驱动并实现gazebo下Moveit运动规划仿真以及真实UR3机械臂的运动控制(2)
- Yes, Prime Minister 打表找规律-质数
- java excel导入去重_如何把日志导入到excel文档图文教程(含url去重)
- 组播应用场景_推介4K IP切换系统在5G媒体集成制作中的应用
- 2层框架结构柱子间距_框架结构的特点有哪些?框架结构是什么?
- vmware14/15 安装Ubuntu12.04 图文八步法
- 信号回勾产生的原因_电力电缆故障原因及常用检测方法
- python谷歌浏览器驱动安装失败_阿里云centos7.2下安装chrome浏览器+webdriver+selenium及常见设置-傻瓜教程...
- windows 下执行mysql脚本_Windows下批处理执行MySQL脚本文件
- windows环境搭建golang的gin框架简易教程