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 相关文章推荐
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
详谈javascript异步编程
Feb 21 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js+html实现点名系统功能
Nov 05 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数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
php获取excel文件数据
2017/04/21 PHP
php工具型代码之印章抠图
2018/07/18 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
window下eclipse安装python插件教程
2017/04/24 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python单元测试与测试用例简析
2019/11/09 Python
python zip()函数的使用示例
2020/09/23 Python
学生上课说话检讨书
2014/10/25 职场文书
论语读书笔记
2015/06/26 职场文书
小学数学教学随笔
2015/08/14 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫