2-3 音乐播放

<template>
  <div>
    <audio 
    @pause="onPause"
    @play="onPlay"
    ref="audio" 
    class="audio" :src="playUrl" controls autoplay loop>你的浏览器不支持audio标签</audio>
    <img :src="isPlay?require('@/assets/images/play.png'):require('@/assets/images/pause.png')" @click="toggle">
  </div>
</template>

<script>
export default {
  name: "Mv",
  data(){
    return {
      isPlay:false,
      playUrl:"http://m10.music.126.net/20191112163035/75b7eecc4d98e245c93645fd1810ba3d/ymusic/e54a/90bc/8f90/29b0d3a279414b2f9a1fd78c64a907cc.mp3"
    }
  },
  methods:{
    toggle(){
      return this.isPlay? this.pause():this.play()
    },
    play(){
      this.$refs.audio.play()
    },
    pause(){
      this.$refs.audio.pause()
    },
    // 当音频播放
    onPlay () {
      this.isPlay = true
      console.log(this.isPlay)
    },
    // 当音频暂停
    onPause () {
      this.isPlay = false
    }
  }
};
</script>