vue中添加语音播报功能的实现

2024-11-30 23:27:11

1：首先把我们的静态资源文件加入到前端工程项目当中

我这里mp3文件就是要播报的语言文件

2：页面中加入标签

<!-- src 后面的链接是我保存在static文件下的一段报警声 -->
<audio v-show="false" id="audioSuccessIn" src="/static/successIn.mp3"/>
<audio v-show="false" id="audioFalseIn" src="/static/falseIn.mp3"/>
<audio v-show="false" id="audioSuccessOut" src="/static/successOut.mp3"/>
<audio v-show="false" id="audioFalseOut" src="/static/falseOut.mp3"/>

3：在相应的方法的后面调用我们的函数即可

在method里面对应的方法里面进行调用即可。

goodsDetailInOutSave(this.json)
            .then(res => {
              this.detailFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '商品出入库成功！'
                })
                if(this.inOrOut===1){
                    this.playaudio('audioSuccessIn')
                }else if(this.inOrOut===2){
                  this.playaudio('audioSuccessOut')
                }

              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
                if(this.inOrOut===1){
                    this.playaudio('audioFalseIn')
                }else if(this.inOrOut===2){
                  this.playaudio('audioFalseOut')
                }

              }
            })
            .catch(err => {
              // this.goodsNumEditVisible = false
              this.loading = false
              this.$message.error('商品出入库失败，请稍后再试！')
            })
    },

到此这篇关于vue中添加语音播报功能的实现的文章就介绍到这了,更多相关vue 添加语音播报内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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

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

这里我完全依照百度提供的语音合成api来做:https://ai.baidu.com/docs#/TTS-Online-Node-SDK/top 直接去看node.js SDK. 1.换取access_token: 参考:https://ai.baidu.com/docs#/TTS-API/top,在这里用浏览器换取token 2.下载sdk依赖: npm install baidu-aip-sdk 完整代码(非原创,参考了一个demo,但是很久以前写的找不到了): btts(text) { c
vue项目或网页上实现文字转换成语音播放功能

一.在网页上实现文字转换成语音方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为可以听得懂的.流利的口语输出的技术. 1. 使用百度的接口: http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字 2.参数说明: lan=zh:语言是中文,如果改为lan=en,则语言是英文. ie=UTF-8:文字格式. spd=2:语速,可以是1-9的数字,数
Vue3+TS实现语音播放组件的示例代码

目录第一步:点击拖拽进度条第二步:操作媒体音频第三步:进度条和播放进度关联完整代码该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js.react.vue2等都可以轻松实现所涉及到重要点有以下几个: (1)进度条的实现:拖拽进度条.点击进度条 (2)操作audio语音播放:通过js操作audio媒体 (3)播放进度与进度条紧密关联:播放的进度改变时,进度条也随之改变:进度条改变时,播放的进度也随之改变效果图: 开始我们的设计吧
vue调用语音播放的方法

本文实例为大家分享了vue调用语音播放的具体代码,供大家参考,具体内容如下功能展示输入文字点击播放调用语音直接上代码 <template> <div>  <div> <input type="text" id="ttsText"> <input type="button" id="tts_btn" @click="
VUE 文字转语音播放的实现示例

目录一.技术:Web Speech API 二.语音合成及发音接口三.vue项目案例一.技术:Web Speech API Web Speech API使您能够将语音数据合并到 Web 应用程序中. Web Speech API 有两个部分:SpeechSynthesis 语音合成 (文本到语音 TTS)和 SpeechRecognition 语音识别(异步语音识别). 二.语音合成及发音接口 SpeechSynthesis:语音合成服务的控制器接口,可用于获取设备上可用的
vue中添加语音播报功能的实现

1:首先把我们的静态资源文件加入到前端工程项目当中我这里mp3文件就是要播报的语言文件 2: 页面中加入标签  <audio v-show="false" id="audioSuccessIn" src="/static/successIn.mp3"/> <audio v-show="false" id="au
Vue中添加手机验证码组件功能操作方法

什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在完善个人信息页面(vue)中添加手机验证码组件,当用户点击手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>
vue中添加与删除关键字搜索功能

具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
C#实现语音播报功能

本文实例为大家分享了C#实现语音播报功能的具体代码,供大家参考,具体内容如下环境: window10vs2019 16.5.5.netframework4.5 一.关于语音播报语音播报的功能属于操作系统自带的.win7和win10都自带,部分win7阉割版系统没有这项功能会导致运行报错: 检索 COM 类工厂中 CLSID 为 {D9F6EE60-58C9-458B-88E1-2F908FD7F87C} 的组件失败,原因是出现以下错误: 80040154 没有注册类 (异常来自 HRESUL
为textView添加语音输入功能的实例代码(集成讯飞语音识别)

非常感谢大家利用自己宝贵的时间来阅读我的文章 , 今天给大家带来的是一个集成讯飞语音识别功能的小demo,为textview添加一个语音输入的功能,相信在这个智能化趋势的大环境的下,很多人能用得到这个功能.如果需要的话希望能帮到你 , 当然, 有任何不妥的地方欢迎指正. 先上demo --->XunFeiDemo 效果展示: 功能实现,sdk中提供了两种方式,一种是带界面的语音识别,有一个识别语音的动画的界面效果.另一种是无界面的.我这里使用的是带界面的,不带界面的自己可以去看一下,大同小异
vue中实现回车键登录功能

created() { let that = this; document.onkeypress = function(e) { var keycode = document.all ? event.keyCode : e.which; if (keycode == 13) { that.login();// 登录方法名 return false; } }; } 以上的代码,在这几天测试发现有一个问题,在登录进系统之后,从首页切换到其他界面,点击回车,会导致界面调整到首页! 要实现: 只在Log
Android标题栏中添加返回按钮功能

标题栏中的返回按钮在实际使用中用的比较多,今天就来讲讲我在项目开发中的使用经历,话不多说,还是直接上源码,上源码是最给力的. 一. 编写自定义类 public class CustomTitle { private static Activity mActivity; public static void getCustomTitle(Activity activity, String title) { mActivity = activity; mActivity.requestWindowF
python实现应用程序在右键菜单中添加打开方式功能

最近项目组开发的一个小工具想要在右键菜单中添加打开方式,以有道云笔记为例进行了需求拆解和代码编写 1.需求拆解: 如何实现手动添加右键菜单的打开方式: Step1:打开注册表编辑器,Win+R->输入 "regedit" Step2:在HKEY_CLASSES_ROOT/*/shell (或者HKEY_LOCAL_MACHINE/SOFTWARE/Classes/*/shell ,两个目录是一样的) 添加一个key:YNote,然后在该项中新建项command,然后再编辑字符串,
vue中添加mp3音频文件的方法

有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法: 方法一.将音频文件放置在static目录中,然后进行调用,如下所示 <audio class="success" src="/static/audios/do_wrong.mp3"> </audio> 以上这种方式就能够解决这个问题了. 方法二.给项目配置mp3格式的解析器 1.在webpack.base
vue中实现高德定位功能

一.获取key及在index.htm中引入首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script> 二.在配置文件中进行相应配置根据vue脚手架的不用需要在不同的文件

vue中添加语音播报功能的实现

相关推荐

随机推荐