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 相关文章推荐
iframe父页面获取子页面参数的方法
Feb 21 Javascript
图解JavaScript中的this关键字
May 28 Javascript
js性能优化技巧
Nov 29 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 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性能的一些方法
2011/03/24 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
详解Python编程中包的概念与管理
2015/10/16 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python3生成手写体数字方法
2018/01/30 Python
python 实现兔子生兔子示例
2019/11/21 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
UDP协议功能
2013/01/06 面试题
师德个人剖析材料
2014/02/02 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
感恩教育月活动总结
2014/07/07 职场文书
大学副班长竞选稿
2015/11/21 职场文书
八年级物理教学反思
2016/02/19 职场文书