vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法


Posted in Javascript onOctober 09, 2020

一、vue中解决chrome浏览器自动播放音频

需求

有新订单的时候,页面自动语音提示和弹出提示框;

问题

chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException;

解决

在网上找了很多方法都不行,最后试出一种可行:语音播放显示出来才可以自动播放语音,如下图;

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

上代码:

//这里就是语音播放器,必须显示出来
<audio controls="controls" :src="sound" ref="audio"></audio>
//这里是调用语音播放
this.$refs.audio.currentTime = 0;
this.$refs.audio.play();

功能的全部代码:

<div>
 <v-btn color="lime lighten-1" @click="handleDispatch" small><v-icon left>mdi-account</v-icon>人工派单 </v-btn>
 //这里就是语音播放器,必须显示出来
 <audio controls="controls" :src="sound" ref="audio"></audio>
</div>

<script>
//语音的路径(这样引入是方便打包上传,下面有介绍)
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打包丢失

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

去看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引入,才会打包;

<script>
//语音的路径(当模块引入,webpack好将MP3打包)
import sounds from '@/assets/sound/1.mp3';
export default {
 data() {
 return {
 sound: sounds,
}
 }

最后就打包成功

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

最后看到一种,直接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浏览器自动播放音频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
基于datagrid框架的查询
Apr 08 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
vue实现选中效果
Oct 07 #Javascript
electron踩坑之dialog中的callback解决
Oct 06 #Javascript
electron踩坑之remote of undefined的解决
Oct 06 #Javascript
9个JavaScript日常开发小技巧
Oct 06 #Javascript
详解ES6中class的实现原理
Oct 03 #Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 #Javascript
vue 虚拟DOM的原理
Oct 03 #Javascript
You might like
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
php文件上传的两种实现方法
2016/04/04 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
总结python中pass的作用
2019/02/27 Python
Python for i in range ()用法详解
2020/09/18 Python
Python安装whl文件过程图解
2020/02/18 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
关于圣诞节的广播稿
2014/01/26 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
走群众路线剖析材料
2014/10/09 职场文书
岳庙导游词
2015/02/04 职场文书
厉行节约工作总结
2015/08/12 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫