Vue+ElementUI: 手把手教你做一个audio组件，audio的播放与下载

audio组件：播放功能
先看效果图：

功能：可进行播放，暂停，刷新，调节播放速度，滚动条拖拽
代码

父组件代码:试听

listenClick(row) {
      this.downloadFlag = true;
      this.$refs.audio.audioVisible = true;
      this.$refs.audio.customerName = row.customerName;
      axios
        .get(
          `${this.targetUrl}/outbound/voice/records?customerName=${row.customerName}&filePath=${row.filePath}`,
          {
            responseType: "blob",
          }
        )
        .then((res) => {
          if (Object.keys(res.headers).includes("content-length")) {
            var sblod = new Blob([res.data]);  // res.data为返回得二进制流
            if (window.URL) {
            // 将返回得二进制流转换成aduio可播放的格式
              this.$refs.audio.audioSrc = window.URL.createObjectURL(sblod);
            } else {
              this.$refs.audio.audioSrc = sblod;
            }
          } else {
            this.$message.info("录音正在路上，稍后再试");
          }
        });
    },

其他的下载音频可以参考：js下载文件、音频、视频的方式 vue
audio音频下载

 downloadAudioFile(row) {
      this.downloadFlag = false;
       axios.get( `${this.targetUrl}/outbound/voice/records?customerName=${row.customerName}&filePath=${row.filePath}`,{
        responseType: "blob",
      }).then((res) => {
        console.log(res.headers)
        if(Object.keys(res.headers).includes('content-length')){
         var audioSrc = `${this.targetUrl}/outbound/voice/records?customerName=${row.customerName}&filePath=${row.filePath}`;
         window.location.href = audioSrc;
        }else{
          this.$message.info('录音正在路上，稍后再试');
        }
      });
    },  
    //  window.location.href = audioSrc直接就可以下载音频了，但是因为接口限制，接口返回可能返回JSON字符串报错，直接用window.location.href打开会直接跳到JSON字符串报错页面，所以这边第一次调加了个判断，判断有没有音频或者是损坏，调了两次接口，具体看需求