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 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
兼职业务员岗位职责
2014/01/01 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
2014年检验员工作总结
2014/11/19 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python