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

 更新时间:2020-10-10 04:02:12   作者:佚名   我要评论(0)

一、vue中解决chrome浏览器自动播放音频
需求
有新订单的时候,页面自动语音提示和弹出提示框;
问题
chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自

一、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浏览器自动播放音频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
  • 使用Vue开发自己的Chrome扩展程序过程详解
  • 详解vue-cli3开发Chrome插件实践
  • 用VueJS写一个Chrome浏览器插件的实现方法
  • 解决ios微信下vue项目组件切换并自动播放音频问题

相关文章

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

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

    一、vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框; 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自
    2020-10-10
  • 浅析Python requests 模块

    浅析Python requests 模块

    Python requests 模块   requests 模块是我们使用的 python爬虫 模块 可以完成市场进80%的爬虫需求。 安装 pip install requests 使用 requests模块代码编写的
    2020-10-10
  • JAVA解决在@autowired,@Resource注入为null的情况

    JAVA解决在@autowired,@Resource注入为null的情况

    使用SpringMVC或者SSH过程中,有时可能会遇到这么一个问题。就是在一个普通的JAVA类(不是controller也不是action类)中无法注入在spring配置文件中配置的bean。 比
    2020-10-10
  • 简单了解Python hashlib模块

    简单了解Python hashlib模块

    一.hashlib模块 用于加密相关的操作,3.x里代替了md5模块和sha模块,主要提供 :SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法。 1.使用hashlib模块进行MD5加密。
    2020-10-10
  • Python尾递归优化实现代码及原理详解

    Python尾递归优化实现代码及原理详解

    在传统的递归中,典型的模式是,你执行第一个递归调用,然后接着调用下一个递归来计算结果。这种方式中途你是得不到计算结果,知道所有的递归调用都返回。 这样虽然
    2020-10-10
  • Java两种方式实现动态代理

    Java两种方式实现动态代理

    一、JDK动态代理 Java 在 java.lang.reflect 包中有自己的代理支持,该类(Proxy.java)用于动态生成代理类,只需传入目标接口、目标接口的类加载器以及 Invocation
    2020-10-10
  • Python判断变量是否是None写法代码实例

    Python判断变量是否是None写法代码实例

    代码中经常会有变量是否为None的判断,有三种主要的写法: 第一种是`if x is None`; 第二种是 `if not x:`; 第三种是`if not x is None`(这句这样理解更
    2020-10-10
  • java 枚举enum的用法(与在switch中的用法)

    java 枚举enum的用法(与在switch中的用法)

    实际开发中,很多人可能很少用枚举类型。更多的可能使用常量的方式代替。但枚举比起常量来说,含义更清晰,更容易理解,结构上也更加紧密。看其他人的博文都很详细,
    2020-10-10
  • Python批量获取并保存手机号归属地和运营商的示例

    Python批量获取并保存手机号归属地和运营商的示例

    从Excel读取一组手机号码,批量查询该手机号码的运营商和归属地,并将其追加到该记录的末尾。 import requests import json import xlrd from xlutils.copy impor
    2020-10-10
  • Python特殊属性property原理及使用方法解析

    Python特殊属性property原理及使用方法解析

    1 什么是特性property property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值 import math class Circle: def __init__(self,radius): #圆的半径
    2020-10-10

最新评论