广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中添加语音播报功能的实现
  • 814
分享到

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

2024-04-02 19:04:59 814人浏览 薄情痞子
摘要

1:首先把我们的静态资源文件加入到前端工程项目当中 我这里mp3文件就是要播报的语言文件 2: 页面中加入标签 <!-- src 后面的链接是我保存在static文件下的一段

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 添加语音播报内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue中添加语音播报功能的实现

本文链接: https://www.lsjlt.com/news/146588.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中添加语音播报功能的实现
    1:首先把我们的静态资源文件加入到前端工程项目当中 我这里mp3文件就是要播报的语言文件 2: 页面中加入标签 <!-- src 后面的链接是我保存在static文件下的一段...
    99+
    2022-11-13
  • C#实现语音播报功能
    本文实例为大家分享了C#实现语音播报功能的具体代码,供大家参考,具体内容如下 环境: window10vs2019 16.5.5.netframework4.5 一、关于语音播报 语...
    99+
    2022-11-13
  • C#如何实现语音播报功能
    这篇文章主要介绍“C#如何实现语音播报功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“C#如何实现语音播报功能”文章能帮助大家解决问题。环境:window10vs2019 16.5.5.netfr...
    99+
    2023-06-29
  • Python3.7+Yolo3实现识别语音播报功能
    一、利用Python调用系统win10的文字转语音 首先下载需要用到的库:pip install pyttsx3 -i https://mirrors.aliyun.com/pypi...
    99+
    2022-11-12
  • Vue如何实现语音播报
    这篇文章主要介绍“Vue如何实现语音播报”,在日常操作中,相信很多人在Vue如何实现语音播报问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue如何实现语音播报”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-04
  • WordPress中添加语音搜索功能的实现方法
    本文实例讲述了WordPress中添加语音搜索功能的实现方法。分享给大家供大家参考。具体分析如下: WordPress可以增加一个语音搜索功能,但是此功能暂时只能Chrome浏览器上使用,因为必须使用x-webkit-s...
    99+
    2022-06-12
    WordPress 添加 语音搜索 功能 实现方法
  • Python3.7 + Yolo3怎么实现识别语音播报功能
    这篇文章将为大家详细讲解有关Python3.7 + Yolo3怎么实现识别语音播报功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、利用Python调用系统win10...
    99+
    2023-06-22
  • Android语音播放功能怎么实现
    Android平台上可以使用MediaPlayer或者SoundPool来实现语音播放功能。 使用MediaPlayer实现语音播...
    99+
    2023-10-22
    Android
  • Vue+node实现音频录制播放功能
    实现效果: 主要实现代码逻辑部分,具体页面结构就不一一介绍了。 vue部分: 安装recorderx cnpm install recorderx --save 或者 ...
    99+
    2022-11-11
  • SpringBoot+Vue实现数据添加功能
    一、添加代码生成器 用来自动为数据库映射类建立:mapper、service、controller 注:代码生成器的写法,参考官方文档:https://mp.baomidou.co...
    99+
    2022-11-11
  • vue后台管理添加多语言功能的实现示例
    目录1.首先是main.js页面做配置2.配置相应路径下的语言包,在这儿只显示部分代码,需要什么在这儿添加什么即可3.页面中使用,不同的地方使用,写法略有不同在这家公司一个项目, 需...
    99+
    2022-11-12
  • C语言使用mciSendString实现播放音乐功能
    目录使用 mciSendString 播放音乐使用 mciSendCommand 播放音乐解决某些 MP3 无法播放的问题使用 PlaySound 函数播放音乐使用 mciSendS...
    99+
    2023-02-14
    C语言mciSendString播放音乐 C语言 播放音乐 C语言mciSendString
  • Android编程如何实现短信收发及语音播报提示功能
    这篇文章给大家分享的是有关Android编程如何实现短信收发及语音播报提示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:发送短信功能界面public class SmsActiv...
    99+
    2023-05-30
    android
  • android语音即时通讯之录音、播放功能实现代码
    在android中,实现录音与语音播放的功能算是比较简单的,但是作为参考,还是很有必要将语音相关的知识做一个简要的记录。首先,在android中,支持录音支持两种方式。主要包括:字节流模式和文件流模式。用文件流模式进行录音操作比较简单,而且...
    99+
    2023-05-30
    android 语音 通讯
  • 步骤详解Vue怎么实现语音播报(附代码)
    Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)场景speak-tts插件https://www.npmjs.com/package/speak-tts(学习视频分享:vue视频教程) 实现点击按钮触发语音...
    99+
    2022-11-22
    speak-tts插件 Vue
  • vue实现文字转语音功能详解
    目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例 首先new一个SpeechSynthesisUttera...
    99+
    2022-11-13
  • Vue简化用户查询/添加功能的实现
    目录1. 查询功能1.1 Vue核心对象:1.2 brand.html:1.3 selectAllServlet(无变化):2. 添加功能2.1 addBrandhtml:2.2 V...
    99+
    2023-01-29
    Vue用户查询 Vue用户添加
  • vue加载视频流,实现直播功能的过程
    目录前言一、视频流是什么?二、vue加载rtmp视频流1.方法一:video.js2.方法二:ckplayer三、vue加载hls视频流1.index.html中2.video-pl...
    99+
    2022-11-13
  • 怎么使用Vue实现添加好友功能
    这篇文章主要介绍了怎么使用Vue实现添加好友功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用Vue实现添加好友功能文章都会有所收获,下面我们一起来看看吧。一、前置知识在开始介绍添加好友功能之前,我们需...
    99+
    2023-07-06
  • VUE文字转语音播放的实现示例
    目录一、技术:Web Speech API二、语音合成及发音接口三、vue项目案例一、技术:Web Speech API Web Speech API​​ 使您能够将语音数据合并到 ...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作