Vue front-end implements voice prompt function

    I recently encountered a requirement to initiate a voice prompt when the monitored indicators are abnormal.

    The front end uses elementUI + VUEjs, and the back end uses springboot + mybatis. The idea of ​​implementation is that the front end monitors a certain indicator, and when the indicator changes, the voice prompt function is called. code show as below:

    data data:

data () {
      return {
        showDetail: false,
        height: 1,
        // 1 unavailable 0 normal 2 in operation and maintenance
        result: [],
        tableData: [],
        // apply the number of exceptions
        errCount: 0
      }

     monitor:

  // Monitor exception changes, voice broadcast
    watch: {
      'errCount': function () {
        this.aplayAudio ()
      }
    }

    The method of voice broadcast:

// voice playback
      applyAudio () {
        const audio = document.getElementById('audio')
        audio.play()
      }

    An audio needs to be defined on the page:

<!-- Alert Tone-->
    <audio id="audio" src="/static/audio/130808.wav"/>

tips:

src is the voice resource path, you can put it in the static resource folder in the front-end project and import it.