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

 更新时间:2022年04月20日 09:34:15   作者:北海冥鱼未眠  
本文主要介绍了vue中添加语音播报功能的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

相关文章

  • 基于Vue3实现数字华容道游戏的示例代码

    基于Vue3实现数字华容道游戏的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue编写一个数字华容道游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中4个自定义指令讲解及实例用法

    vue中4个自定义指令讲解及实例用法

    在本篇文章里小编给大家整理了一篇关于vue中4个自定义指令讲解及实例用法,有兴趣的朋友们可以跟着学习下。
    2021-12-12
  • 详解如何在vue项目中使用layui框架及采坑

    详解如何在vue项目中使用layui框架及采坑

    这篇文章主要介绍了vue使用layui框架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue Cli 环境删除与重装教程 - 版本文档

    vue Cli 环境删除与重装教程 - 版本文档

    这篇文章主要介绍了vue Cli 环境删除与重装教程 - 版本文档,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

    对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

    今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue简单实现转盘抽奖

    vue简单实现转盘抽奖

    这篇文章主要为大家详细介绍了vue简单实现转盘抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • vue项目中如何配置env环境的实现

    vue项目中如何配置env环境的实现

    本文主要介绍了vue项目中如何配置env环境的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue实现购物车计算总价功能

    Vue实现购物车计算总价功能

    这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue基于两个计算属性实现选中和全选功能示例

    vue基于两个计算属性实现选中和全选功能示例

    这篇文章主要介绍了vue基于两个计算属性实现选中和全选功能,结合实例形式分析了vue计算属性get及set操作页面元素实现选中与全选功能相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 浅谈VUE监听窗口变化事件的问题

    浅谈VUE监听窗口变化事件的问题

    下面小编就为大家分享一篇浅谈VUE监听窗口变化事件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论