点击图标播放音频

Posted 2022-12-08 单身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