自己封装的音频播放暂停和下载组件

<template>
  <div style="display:flex;align-items: center;margin-bottom:2px">
    <audio
      ref="audio"
      class="dn"
      :src="realUrl"

      preload="none"
      @play="onPlay"
      @pause="onPause"
    ></audio>

    <i
      style="font-size:20px"
      type="text"
      :class="audio.playing?'el-icon-video-pause  zanting':'el-icon-video-play'"
      @click="startPlayOrPause"></i>
    <!-- <el-button
      type="text"
      :class="audio.playing?'zanting':'bofang'"
      @click="startPlayOrPause">
      {{ audio.playing | transPlayPause }}
    </el-button> -->

    <el-button
      type="text"
      style="margin-left:5px"
      @click="download(realUrl)"
    >
      下载
    </el-button>
  </div>
</template>

<script>
// 下载音频
import { saveAs } from 'file-saver';

import { makeAudioUrl,getAudioUrl } from '@/services';
export default {
  name: 'VueAudio',
  filters: {

    transPlayPause(value) {
      return value ? '暂停' : '播放'
    },

  },
  props: {
    theUrl: {
      type: String,
      default: '',
    },
    auidoName:{
      type: String,
      default: '',
    }

  },
  data() {
    return {
      realUrl: '',
      
      audio: {
        playing: false,
        speed: 1,
        preload: 'auto'
      },
      // theSize:0
      // downloading:false

    }
  },
  methods: {


    startPlayOrPause() {
      return this.audio.playing ? this.pausePlay() : this.startPlay()
    },
    // 开始播放
    async startPlay() {

      let res=await makeAudioUrl(this.theUrl)

      this.realUrl=getAudioUrl(res.data)


      console.log('生成的绝对地址是',this.realUrl);

      // this.realUrl=res.data.data
      // 10MB=10485760
      // if(res.headers['content-length']>52428800){

      //   // this.$confirm('音频太大，要下载很久，才能播放，是否继续?', '提示', {
      //   //   confirmButtonText: '确定',
      //   //   cancelButtonText: '取消',
      //   //   type: 'warning'
      //   // }).then(() => {
      //   //   this.$refs.audio.play()
      //   // }).catch(() => {
      //   //   return  false
      //   // });
      //   this.$alert('音频太大，请至服务器下载后播放', '提示', {
      //     confirmButtonText: '确定',
      //     // cancelButtonText: '取消',
      //     type: 'warning'
      //   })
      // }else{
      //   this.$refs.audio.play()
      // }
      this.$refs.audio.play()




    },
    // 暂停
    pausePlay() {
      this.$refs.audio.pause()
    },
    // 当音频暂停
    onPause () {
      this.audio.playing = false
    },

    // 当音频开始播放
    onPlay (res) {


      this.audio.playing = true
      let target = res.target
      let audios = document.getElementsByTagName('audio');

      // 只播放一个
      [...audios].forEach((item) => {
        if(item !== target){
          item.pause()
        }
      })
    },
    async download(url){
      console.log('点击了下载');

      // request({
      //   url: this.theUrl,
      //   // url: '/moss/semantic/query',
      //   method: 'head',
      // }).then(res=>
      // {
      //   // 10MB=10485760
      //   // 50MB=52428800
      //   if(res.headers['content-length']>52428800){

      //     this.$alert('音频太大，请至服务器下载', '提示', {
      //       confirmButtonText: '确定',
      //       // cancelButtonText: '取消',
      //       type: 'warning'
      //     })
      //   }else{
      //     saveAs(url, this.auidoName+'.mp3');
      //   }

      // })

      let res=await makeAudioUrl(this.theUrl)

      this.realUrl=getAudioUrl(res.data)


      console.log('this.audioName',this.auidoName);
      // 由于下载地址中，带了其他参数，无法重命名文件，所以不使用savas了
      // download标签，也无法重命名
      // 使用bolb方式实现，实现重命名
      // saveAs(this.realUrl,this.auidoName+'.wav');
      // this.downloadFile(this.realUrl,this.auidoName+'.wav')
      this.blobDownloadFile(this.realUrl,this.auidoName+'.wav')





    }
    ,
    // downloadFile(url, name) {
    //   const link = document.createElement('a');
    //   link.download = name;
    //   link.href = url;
    //   link.click();
    // }

    blobDownloadFile(fileUrl,fileName){
      const xhr = new XMLHttpRequest();
      xhr.open('GET',fileUrl,true);
      xhr.responseType='bolb';
      xhr.onload = function (){
        if(xhr.status===200){
          var a = document.createElement('a');



          // a.href = window.URL.createObjectURL(xhr.response);
          let binaryData = [];
          binaryData.push(xhr.response);
          a.href = window.URL.createObjectURL(new Blob(binaryData));
          a.download = fileName;//文件名
          a.click();
        }
      }
      xhr.send();
    }



  },

}
</script>

<style  scoped>
.zanting{
  color: red;
}

</style>