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

2024-02-17 11:01:54

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

需求

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

问题

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

解决

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

上代码：

//这里就是语音播放器，必须显示出来
<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打包丢失

去看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,
　　}
　}

最后就打包成功

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

用VueJS写一个Chrome浏览器插件的实现方法

浏览器基本已经天下大统了,放眼望去都是Chromium的天下.那么,能写一个浏览器插件也算是一种回报率不错的技能. 基本知识浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研究浏览器本身的代码.你可以用HTML,CSS和JavaScript创建新的扩展程序,如果你曾经写过网页,那么写一个插件是非常轻松的事情. 常见的插件一般就是地址栏后面的一个图标,点击后给你当前网页提供各种功能,或者在你点击网页右键时弹出额外的菜单. 程序目录结构最简单的扩展程序只需要3个文件,或者
使用Vue开发自己的Chrome扩展程序过程详解

前言浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序.它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等. 好消息是浏览器扩展并不难写.可以用你已经熟悉的 Web 技术(HTML.CSS 和 JavaScript)创建 -- 就像普通网页一样.但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方. 在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展.这个扩展程序的 JavaScript 部分,我
解决ios微信下vue项目组件切换并自动播放音频问题

最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg
详解vue-cli3开发Chrome插件实践

之前找了不少如何开发谷歌插件的文章,结果发现都是些很基础的内容,并没有写到如何快速编译打包插件.我就在想为什么不能通过webpack来打包插件呢?如果通过webpack编译的话,就能使开发过程变得更舒服,使文件结构趋向模块化,并且打包的时候直接编译压缩代码.后来发现了 vue-cli-plugin-chrome-ext 插件,通过这个插件能很方便地用 vue-cli3 来开发谷歌插件,并能直接引用各种UI框架跟npm插件. tip:如果你没接触过谷歌插件开发的话建议先看看基础文档: Chrome
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

前言公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的. 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是'卡'.点不动.点了没反应. 再大致介绍下项目环境: chrome 44(打包到用户客户端内) Vue 2.6.10 左侧列表布局列表的每个绿色方框是一个vue组件,名叫ListItem,列表的组件叫List 代码类似这样 // List.vue <template> <div class="
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

一.vue中解决chrome浏览器自动播放音频需求有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决
JavaScript中解决多浏览器兼容性23个问题的快速解决方法

一.document.formName.item("itemName") 问题问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa
vue中解决微信html5原生ios虚拟键返回不刷新问题

问题描述: 做微信h5页面时,经过了微信授权才跳转到一级默认路由home.vue中,因此在home页面时在IOS中底部会出现虚拟的返回键,安卓上不会出现.且在IOS点击返回时会跳转到home空白页面不重新加载,但是在安卓机上点击返回键会重新加载. 实现功能: 解决IOS问题(在home页面点返回时路由还是在home页面,并完成重新加载) 分析: 需要在进入页面时加入监听,并在页面离开时移除监听.因为home页面是个滚动列表,所以我采用了keep-alive路由缓存,所以不能在created()和
基于vue中解决v-for使用报红并出现警告的问题

代码报红对于追求优美代码的强迫症患者来说看着很不舒服,报红如下: 控制台中也会有: (Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址

使用Windows命令行cmd可以指定浏览器打开网址.在node.js中使用start即可: 比如分别用Chrome和IE打开网址 start chrome http://www.google.cn start iexplore http://www.google.cn 但是当用户没有安装Chrome时使用start则会报错,并会弹出错误对话框: [Window Title] chrome [Content] Windows 找不到文件 'chrome'.请确定文件名是否正确后,再试一次. 如果
在vue中解决提示警告 for循环报错的方法

警告 1.出现这个警告问题的时候我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 2.在build文件下的webpack.base.conf.js文件中, 将 ...(config.dev.useEslint ? [createLintingRule()] : []),注释掉, const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: 'esl
vue中解决拖拽改变存在iframe的div大小时卡顿问题

写在最前针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题,比如这样,右侧div中使用了一个iframe组件,导致实际操作中出现两个问题,一个是拖不动,另外一个是无法根据鼠标移动,快速响应,甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题.如果去除右侧iframe框架,则没有问题. 有iframe情况无iframe情况问题原因&am
VUE中setTimeout和setInterval自动销毁案例

在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉. 正常代码如下: beforeDestroy() { this._timer && clearTimeout(this._timer); } 但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗? 当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.set
关于vue3 解决getCurrentInstance 打包后线上环境报错问题

getCurrentInstance getCurrentInstance 支持访问内部组件实例. WARNING getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中.强烈反对在应用的代码中使用 getCurrentInstance.请不要把它当作在组合式 API 中获取 this 的替代方案来使用. import { getCurrentInstance } from 'vue' const MyComponent = { setup() { const intern

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

相关推荐

随机推荐