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

相关文章

  • 运行npm run dev报错的原因及解决

    运行npm run dev报错的原因及解决

    刚刚创建好vue项目的时候,运行 npm run dev 会报错,下面这篇文章主要给大家介绍了关于运行npm run dev报错的原因及解决方法,需要的朋友可以参考下
    2022-10-10
  • vue中使用keep-alive动态删除已缓存组件方式

    vue中使用keep-alive动态删除已缓存组件方式

    这篇文章主要介绍了vue中使用keep-alive动态删除已缓存组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue时间选择控件的使用方式

    vue时间选择控件的使用方式

    这篇文章主要介绍了vue时间选择控件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 如何实现vue加载指令 v-loading

    如何实现vue加载指令 v-loading

    在日常的开发中,加载效果是非常常见的,但是怎么才能方便的使用,本文介绍如何实现vue加载指令 v-loading,感兴趣的朋友一起看看吧
    2024-01-01
  • 详解新手使用vue-router传参时注意事项

    详解新手使用vue-router传参时注意事项

    这篇文章主要介绍了详解新手使用vue-router传参时注意事项,详细的介绍了几种常见错误,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • VUE前端如何处理后端接口返回的图片详解

    VUE前端如何处理后端接口返回的图片详解

    在现代Web开发中,前端应用经常需要从后端接口获取图片数据,下面这篇文章主要介绍了VUE前端如何处理后端接口返回的图片的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • Vue实现自定义字段导出EXCEL的示例代码

    Vue实现自定义字段导出EXCEL的示例代码

    这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue el-table组件如何实现将日期格式化

    Vue el-table组件如何实现将日期格式化

    这篇文章主要介绍了Vue el-table组件如何实现将日期格式化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 使用element-ui设置table组件宽度(width)为百分比

    使用element-ui设置table组件宽度(width)为百分比

    这篇文章主要介绍了使用element-ui设置table组件宽度(width)为百分比方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决

    SyntaxError: /xx.vue: Unexpected token, expected “,“错误解

    这篇文章主要为大家介绍了SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论