Vue ＜audio＞语音播报

Dom:

<span @click="handlePlayAudio">
            <img
              :src="
                isPlay
                  ? 'https://static.xfanread.com/readingDay2020/quickspot/bf@2x.png'
                  : 'https://static.xfanread.com/readingDay2020/quickspot/jy@2x.png'
              "
            /> 
            <audio
              ref="audio"
              :src="questionAudio"
              @ended="audioEnd"
            ></audio>
</span>

data:

isPlay:true ,//是否播放
questionAudio:'https://tylgd.oss-cn-beijing.aliyuncs.com/%E9%99%88%E6%A5%9A%E7%94%9F%20-%20%E6%9C%89%E6%B2%A1%E6%9C%89%E4%BA%BA%E5%91%8A%E8%AF%89%E4%BD%A0.mp3',
        

方法：

 // 点击喇叭图标, 开始播放音频
      handlePlayAudio() {
        this.$refs.audio.play() // 这里使用了audio的原生开始播放事件,同样不加on, 并使用ref获取dom
        //this.isPlay = true
      },
      // 音频停止后, 把喇叭置灰
      audioEnd() {
        // console.log(1111)
        //this.isPlay = false
      },

audioEnd():音频停止后, 把喇叭置灰