最近遇到一個需求，當監控的指標出現異常的時候，發起語音提示。

    前端用的是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：

<!-- 告警音 -->
    <audio id="audio" src="/static/audio/130808.wav"/>
 

tips:

src中是語音資源路徑，你可以放在前端專案中的靜態資原始檔夾裡面，引入就可以。