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：

tips:

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