页面初始化喇叭是置灰的,用户点击喇叭之后, 音频开始,喇叭变绿; 音频停止,喇叭置灰

<template>
	<div>
		<span class="lb-ico" @click="handlePlayAudio">
		  // 这里用isPlay 来控制切换灰色喇叭图标和绿色喇叭图标
		        <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="resData.questionAudio"
		          @ended="audioEnd"
		        ></audio>
		        // 这里用到了audio的结束事件,原生是onended, vue中使用不加on
		      </span>
	     </div>
     </template>

<script>
export default {
	data() {
		isPlay: false, // 是否播放
		resData: {
		questionAudio:'https://static.xfanread.com/annualReview/annualReview2019.mp3', // 音频
	},
	methods: {
	   // 点击喇叭图标, 开始播放音频
		handlePlayAudio() {
	      // console.log(111)
	      this.$refs.audio.play() // 这里使用了audio的原生开始播放事件,同样不加on, 并使用ref获取dom
	      this.isPlay = true
	    },
	    // 音频停止后, 把喇叭置灰
	    audioEnd() {
	      // console.log(1111)
	      this.isPlay = false
	    },
	}
}
</script>

**完事~~~~, 虽然比较简单, 但是由于是第一次使用,所以记录一下 ps: 头发不能白白牺牲 !!! **