点击图标播放音频

Posted 2021-11-22 单身girl

<audio id="music" :src= "geturl+callDetails.fileUrl" />
 <img v-if="!callDetails.fileUrl" class="no-play" :src="noPlayImg" alt="">
 <img v-else class="playimg" :src="play" alt="" @click="onPlay()">
js部分
  import playImg from '@/assets/play.png'
  import stopImg from '@/assets/full.png'
  import downImg from '@/assets/down.png'
 //要导入图片不然切换无效
  export default {
    name: 'detail',
    props: {
      callDetails: Object
    },
    data() {
      return {
        visible: true,
        geturl: process.env.VUE_APP_CALL_EXPORT,  // 代理
        play: playImg,
        stopPlay: stopImg,
        down: downImg
      }
    },
    methods: {
      onPlay() {
        if (this.callDetails.recordInfo.fileUrl) {
          const audios = document.getElementById('music')
          // 获取到img标签
          const playimg = document.querySelector('.playimg')
          // 判断音频是否停止
          if (audios.paused) {
            // 如果已停止则播放音频并更换图标
            playimg.src = this.play

            audios.play()
          } else {
            // 如果已停止重新加载音频并关闭音频和更换图标
            playimg.src = this.stopPlay

            audios.pause()

            audios.load()
          }
           audios.addEventListener('ended', () => {
            playimg.src = this.play
          }, false)
        }
      },
      reset() {
        this.visible = false
        document.getElementById('music').load()
        document.querySelector('.playimg').src = this.play
      }
      }