html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法...
一、vue中解决chrome浏览器自动播放音频
需求
有新订单的时候,页面自动语音提示和弹出提示框;
问题
chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException;
解决
在网上找了很多方法都不行,最后试出一种可行:语音播放显示出来才可以自动播放语音,如下图;
上代码:
//这里就是语音播放器,必须显示出来
//这里是调用语音播放
this.$refs.audio.currentTime = 0;
this.$refs.audio.play();
功能的全部代码:
mdi-account人工派单
//这里就是语音播放器,必须显示出来
//语音的路径(这样引入是方便打包上传,下面有介绍)
import sounds from '@/assets/sound/1.mp3';
export default {
data() {
return {
sound: sounds,
}
}
mounted() {
//这是列表的分页查询
this.getLinePageWithParams();
//这里因为后端没使用websocket,就1分钟循环调用一次;
this.timer = setInterval(() => {
this.newOreder();
}, 60000);
},
methods: {
newOreder() {
api.main.op_order_existNewOrder_get().then(res => {
if (res.data.success) {
//res.data.data后端返回的是否有新订单,有:true; 没有:false
if (res.data.data) {
this.$refs.audio.currentTime = 0;
this.$refs.audio.play();
// element ui 右上角提示窗
this.$notify({
title: '新订单',
message: '您有新的订单待处理',
});
this.getLinePageWithParams();
}
}
return res;
})
.catch(() => {});
},
}
二、MP3文件上传到线上,webpack打包丢失
去看webpack.config.js文件的配置,这里MP3会打包到media文件,但是没生成;
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
},
},
],
},
最后去看webpack官方文档,解决是要在使用语音的地方,当模块import引入,才会打包;
//语音的路径(当模块引入,webpack好将MP3打包)
import sounds from '@/assets/sound/1.mp3';
export default {
data() {
return {
sound: sounds,
}
}
最后就打包成功
最后看到一种,直接URL使用百度播报,我没试过o.o 他的微博:以下代码来自https://www.cnblogs.com/gfweb/p/11726365.html
1,在工具文件夹utils,创建一个js文件 (voicePrompt.js)
function voicePrompt (text){
new Audio('http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + text).play();
}
export {
voicePrompt
}
2在min.js
import * as voicePromptFun from './utils/voicePrompt'
Vue.prototype.voicePrompt = voicePromptFun.voicePrompt //语音提醒
3在其他页面调用
this.voicePrompt('皮卡丘');
到此这篇关于vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法的文章就介绍到这了,更多相关vue chrome浏览器自动播放音频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法...相关推荐
- vue中进入页面,自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
- vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题 参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
- vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题 参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
- 最详细的教程,教你如何彻底关闭Chrome浏览器自动更新
解决谷歌浏览器自动升级的问题,方法不是唯一,但是是最好的解决方式! 注:我们在选择自己需要的浏览器版本前[博主 在用的就是 78版本],需要先卸载 谷歌浏览器 安装包-谷歌浏览器各版本汇总-链接:提取 ...
- 在Ubuntu中安装Chrome浏览器
Chrome 简介 Google Chrome是由Google开发的一款设计简单.高效的Web浏览工具. Google Chrome的特点是简洁.快速.GoogleChrome支持多标签浏览,每个标签 ...
- 利用Chrome浏览器“自动下载”功能窃取Windows登录密码
本文讲的是利用Chrome浏览器"自动下载"功能窃取Windows登录密码,在过去的十几年中,除了IE以及Edge浏览器之外,其余还没有公开针对SMB认证攻击的方法.这篇文章介绍的 ...
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 一般的浏览器input和button的高度不一致问题...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- 禁止chrome浏览器自动填充表单的解决方案
禁止chrome浏览器自动填充表单的解决方案 参考文章: (1)禁止chrome浏览器自动填充表单的解决方案 (2)https://www.cnblogs.com/ld-swust/p/5801606 ...
- 解决Chrome无法自动同步书签
✈️解决Chrome无法自动同步书签
- chrome浏览器自动填充时背景色改变(-webkit-autofill)
出现的问题 在做一个表单时使用chrome浏览器输入表单内容,在第二次测试的时候出现了自动填充的选项,选择后发现输入框的样式不再是手动设置的样式 原手动填充效果如下: 选择自动填充后的样式: 此时观察 ...
最新文章
- HTML4.0标准语法--表格
- Bytom BIP-32协议和BIP-44协议解读
- HTTP Status 500 – Internal Server Error
- RTSP协议-中文定义
- webpack自定义loader并发布到npm
- Sql Server中三种字符串合并方法的性能比较
- 【Linux开发】linux设备驱动归纳总结(九):1.platform总线的设备和驱动
- linux下邮件查看命令
- 程序员面试金典 - 面试题 08.11. 硬币(背包DP)
- Python中赋值,深拷贝和浅拷贝
- php文件名解析漏洞 nginx,nginx服务器解析漏洞(一)
- 设置Android AI开发环境
- kali无法共享本机文件_MySQL服务端读取客户端文件漏洞的复现
- 从摩托罗拉、诺基亚再到航空领域应用,这款开源数据库的成功如何成就天才程序员?...
- Tarjan算法——强连通分量
- javaweb实现登陆,注册,修改密码,显示信息,修改个人信息功能
- 聊聊hikari连接池的isAllowPoolSuspension
- Ubuntu下安装最新的搜狗输入法
- Strongly Connected Tournament
- 个人学习笔记——庄懂的技术美术入门课(美术向)19