vue前端实现语音提示功能

最近遇到一个需求，当监控的指标出现异常的时候，发起语音提示。

前端用的是elementUI + VUEjs，后台用springboot + mybatis。实现的思路是，前端监听某一个指标，当该指标发生变化的时候，调用语音提示功能。代码如下：

data数据：

data () {return {showDetail: false,height: 1,// 1 不可用 0 正常 2运维中result: [],tableData: [],// 应用异常数量errCount: 0}

监听：

  // 监听异常发生变化，语音播报watch: {'errCount': function () {this.aplayAudio()}}

语音播报的方法：

// 语音播放aplayAudio () {const audio = document.getElementById('audio')audio.play()}

页面上需要定义一个audio：

<!-- 告警音 --><audio id="audio" src="/static/audio/130808.wav"/>

tips:

src中是语音资源路径，你可以放在前端项目中的静态资源文件夹里面，引入就可以。

vue前端实现语音提示功能相关推荐

为自己的软件添加语音提示功能
公司的项目,要求为软件添加语音提示功能. 主要有两个思路: 1.直接播放语音文件,如*.mp3或*.wav 2.将输入的字符串转为语音文件上一家公司做过播放语音文件,但将输入的字符串转换为语音文件感 ...
vue+科大讯飞实现语音听写功能
最近公司需求语音转文字功能,对接了科大讯飞中的语音听写功能,因为官方文档中没有vue的demo.踩了几个坑,把踩的坑记录一波坑一: WebSocket connection to 'wss://ia ...
智能手表语音提示功能芯片选型？NV340D 8脚语音芯片
近年来,智能可穿戴设备逐渐受到消费者的追捧,其中就包括功能多样.佩戴方便的智能手表.智能手表除了有指示时间的功能之外,一般还具有提醒.导航.校准.监测.交互等其中一种或者多种功能. 智能手表实现语音提 ...
C#使用System.Speech制作语音提示功能
转载自:C#语音提示 c#实现语音阅读以及文本转语音文件是基于c#的一个类库(SpeechSynthesizer )实现的,使用该类必须要添加引用using System.Speech.Synthes ...
前端实现语音播报功能
近期接到需求,内容页中的文字要实现语音播报功能,语音生成已经存入数据库 var myAudio = new Audio(); //arr 中存放的是音频数据,数组的大小是不确定的 var arr = ...
vue内引入语音播报功能
为什么80%的码农都做不了架构师?>>> 在vue项目中引入语音播报,使用的科大讯飞语音接入, 具体思路为每次接收到语音信息后存入一个数组,然后监听这个数组,开始冲第一个索引播 ...
奥的斯服务器显示spb,奥的斯ACD4电梯自动复位救援与语音提示功能设置操作
如果奥的斯ACD4电梯在采购配置时需要增加复位救援功能,奥的斯电梯工厂将会增加此功能的部件APRS(AdditionalPositionReferenceSystem)系统. 一.此功能的操作特征是: ...
vue实现自动语音播报功能，未解决。（已用js解决20220210）
这个放不出来 <template><div><i @click="reader" class="el-icon-microphone&quo ...
八楼电梯的c语言程序,本科毕业设计—电梯自动语音提示系统.doc
电梯自动语音提示系统院系:信息科学与工程学院专业班:电子科学与技术1102班姓名: 学号: 指导教师: 2015年5月电梯自动语音提示系统 The Elevator Automati ...
智能密码锁语音提示芯片选型？
智能门锁是指区别于传统机械锁的基础上改进的,在用户安全性.识别.管理性方面更加智能化简便化的锁具. 在智能锁操作过程中,拥有语音提示功能可对老年人与儿童,带来极大的便利,智能门锁的安全性比传统的钥匙, ...

vue前端实现语音提示功能

tips:

vue前端实现语音提示功能相关推荐

最新文章

热门文章