vue中使用二进制下载来播放音频

什么是二进制流文件？

二进制文件是一种计算机文件格式，它的数据以二进制形式存储，与文本文件不同。二进制文件可以包含任意类型的数据，例如图像、音频、视频、可执行文件、压缩文件等，而文本文件则仅仅包含 ASCII 码或其他编码的字符数据。

二进制流常见的 Blob、ArrayBuffer、File、FileReader 和 FormData

Blob是JS的一个内置对象 通常用于处理大量的二进制数据，可以读取写入操作文件、音视频等二进制数据流。Blob表示了一段不可变的二进制数据。

如何在vue中使用？

这里我先封装了一个下载的方法 加上了请求头认证，认证通过之后才允许下载（可根据项目实际情况决定是否添加认证请求头）。

// 定义一个导出的函数 download，接受两个参数：option 和 callBack
export function download(option, callBack) {
    // 创建一个新的 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();

    // 使用 GET 方法打开一个请求到 option.url
    xhr.open('get', option.url);

    // 设置认证信息，包括用户名和密码(根据项目实际情况决定要不要加认证)
    var userName = 'administrator';
    var passwd = 'zzbsj@120';
    var authorization = userName + ':' + passwd;

    // 使用 Base64 编码认证信息
    var authorizationBase64 = base64.encode(authorization);

    // 设置请求的 Authorization 头，使用 Basic 认证方案和 Base64 编码的认证信息
    xhr.setRequestHeader("Authorization", "Basic " + authorizationBase64);

    // 设置响应类型为 blob，这意味着响应数据将被处理为 Blob 对象
    xhr.responseType = 'blob';

    // 发送请求
    xhr.send();

    // 当请求完成加载时触发的事件处理函数
    xhr.onload = function () {
        // 检查响应状态码，如果请求成功（200）或（304），则调用 callBack 函数
        if (this.status === 200 || this.status === 304) {
            // 将响应数据作为参数传递给 callBack 函数
            callBack(this.response);
        }
    };
}

封装好之后就可以在项目中使用了

<template>
  <div class="about">
    <h1>二进制下载播放音频</h1>
    <audio :src="url" controls></audio>
  </div>
</template>

<script>

import axios from '../utils/serve'
import { download } from "../utils/download"
export default {
  data() {
    return {
      url: null,
    }
  },
  mounted() {
    this.getCallLogList()
  },
  methods: {
    getCallLogList() {
      let url = `http://192.168.2.61:8766/server/y-phone-info/getPhoneInfoByParam/1/10`
      let params = {
        dtpBeginDate: '2023-05-01 12:00:00',
        dtpEndDate: '2024-06-03 12:00:00',
      }
      // 请求录音路径
      axios.post(url, { ...params }).then(res => {
        console.log(res);
        if (res.data.data.records.length > 0) {
          // 由于这个录音路径比较特殊 所以需要提前处理一下
          res.data.data.records = res.data.data.records.map((obj) => {
            if (obj.recordFile) {
              obj.recordFile = 'http://192.168.2.51:8086/pbxrecord/000EA93E0CB8' + '/' + obj.recordFile
            }
            return obj;
          })

          if (res.data.data.records[0].recordFile) {
            // 获取到音频路径之后 用download方法二进制下载
            // 传入一个对象，其中包含下载 URL，以及一个回调函数，它在下载完成后被调用
            download({ url: res.data.data.records[0].recordFile }, (data) => {
              // 下载完成后，回调函数接收到了响应数据 data

              // 使用响应数据创建一个新的 Blob 对象，指定 MIME 类型为 'audio/wav'
              let blob = new Blob([data], {
                type: 'audio/wav'//类型
              })

              this.url = URL.createObjectURL(blob) // 创建一个临时的 URL 对象，该对象可用于访问 Blob 数据
              console.log('原始的', res.data.data.records[0].recordFile);
              console.log('下载后', this.url);
            })
          }
        }
      }).catch(err => {
        console.log(err);
      })
    },
  }
}
</script>

运行过后打印结果如下：原始的音频链接和二进制下载之后的链接