返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/146588.html(转载时请注明来源链接)

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

猜你喜欢
  • vue中添加语音播报功能的实现
    1:首先把我们的静态资源文件加入到前端工程项目当中 我这里mp3文件就是要播报的语言文件 2: 页面中加入标签 <!-- src 后面的链接是我保存在static文件下的一段...
    99+
    2024-04-02
  • C#实现语音播报功能
    本文实例为大家分享了C#实现语音播报功能的具体代码,供大家参考,具体内容如下 环境: window10vs2019 16.5.5.netframework4.5 一、关于语音播报 语...
    99+
    2024-04-02
  • 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+
    2024-04-02
  • 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+
    2024-04-02
  • SpringBoot+Vue实现数据添加功能
    一、添加代码生成器 用来自动为数据库映射类建立:mapper、service、controller 注:代码生成器的写法,参考官方文档:https://mp.baomidou.co...
    99+
    2024-04-02
  • 用Python实现语音播报
    以下内容为带着儿子一起学Python的实现记录,为自己保存下来,也希望对其他学习者有用!1. 确保已经安装python,本例使用python,操作系统为:Windows 10 专业版;2. 设置环境变量,设置两个path路径。E:\Pyt...
    99+
    2023-01-31
    语音 Python
  • java实现录音播放功能
    本文实例为大家分享了java实现录音播放的具体代码,供大家参考,具体内容如下 需求: 1.实现可以从麦克风进行录音 2.可以停止录音 3.实现播放录音内容 4.并将所录的mp3文件全...
    99+
    2022-11-13
    java 录音 播放
  • vue后台管理添加多语言功能的实现示例
    目录1.首先是main.js页面做配置2.配置相应路径下的语言包,在这儿只显示部分代码,需要什么在这儿添加什么即可3.页面中使用,不同的地方使用,写法略有不同在这家公司一个项目, 需...
    99+
    2024-04-02
  • C语言使用mciSendString实现播放音乐功能
    目录使用 mciSendString 播放音乐使用 mciSendCommand 播放音乐解决某些 MP3 无法播放的问题使用 PlaySound 函数播放音乐使用 mciSendS...
    99+
    2023-02-14
    C语言mciSendString播放音乐 C语言 播放音乐 C语言mciSendString
  • vue实现文字转语音功能详解
    目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例 首先new一个SpeechSynthesisUttera...
    99+
    2024-04-02
  • 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中利用node实现音频录制播放功能
    本篇文章给大家分享的是有关怎么在Vue中利用node实现音频录制播放功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。vue部分:安装recorderxcnpm in...
    99+
    2023-06-14
  • android语音即时通讯之录音、播放功能实现代码
    在android中,实现录音与语音播放的功能算是比较简单的,但是作为参考,还是很有必要将语音相关的知识做一个简要的记录。首先,在android中,支持录音支持两种方式。主要包括:字节流模式和文件流模式。用文件流模式进行录音操作比较简单,而且...
    99+
    2023-05-30
    android 语音 通讯
  • vue加载视频流,实现直播功能的过程
    目录前言一、视频流是什么?二、vue加载rtmp视频流1.方法一:video.js2.方法二:ckplayer三、vue加载hls视频流1.index.html中2.video-pl...
    99+
    2024-04-02
  • 怎么使用Vue实现添加好友功能
    这篇文章主要介绍了怎么使用Vue实现添加好友功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用Vue实现添加好友功能文章都会有所收获,下面我们一起来看看吧。一、前置知识在开始介绍添加好友功能之前,我们需...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作