<template>
  <el-button :type="type" :icon="icon" @click="getPlayAudio" />
</template>

<script>
const audio = new Audio()
export default {
  props: {
    src: String
  },
  data() {
    return {
      type: 'text',
      icon: 'el-icon-video-play'
    }
  },
  methods: {
    getPlayAudio() {
      if (!this.src) {
        this.$message.error('没有找到可播放的资源')
      } else {
        if (this.type === 'text') {
          audio.src = this.src
          this.type = 'delete'
          this.icon = 'el-icon-video-pause'
          audio.play()
        } else {
          this.type = 'text'
          this.icon = 'el-icon-video-play'
          audio.pause()
        }
      }
    }
  }
}
</script>