audio标签使用blob类型播放

文件使用blob播放

需求背景：

在后台返回的二进制数据类型中我们会发现缺少数据类型，再我们不知道数据类型的情况下，这个时候就会使用到blob

什么是blob

参考 https://juejin.cn/post/6844903880774385671

音频播放转换

	/**
     * desc: base64对象转blob文件对象
     * @param base64  ：数据的base64对象
     * @param fileType  ：文件类型 mp3等;
     * @returns {Blob}：Blob文件对象
     */
    base64ToBlob(base64, fileType) {
      //先验证是否已经有了类型，如果没有就转换，有的话就不管
      let splitArr = base64.split(',');
      let matchArray = splitArr[0].match(/:(.*?);/);//获取data:fileType;base64中得fileType
      if (matchArray[1] == "") {//假如不存在的话
        let typeHeader = 'data:audio/' + fileType + ';base64,'; // 定义base64 头部文件类型
        let audioSrc = typeHeader + splitArr[1]; // 拼接最终的base64
        let arr = audioSrc.split(',');
        let array = arr[0].match(/:(.*?);/);
        let mime = (array && array.length > 1 ? array[1] : type) || type;
        // 去掉url的头，并转化为byte
        let bytes = atob(arr[1])
        // 处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        let temp = new Blob([ab], {
          type: mime
        });
        fileName = window.URL.createObjectURL(temp);
      }else {
        fileName = base64;
      }
    }

垃圾回收

在前面什么是blob中有一段话：

需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL方法，就会得到一个不一样的Blob URL。这个URL的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个Blob URL就失效。

通过URL.revokeObjectURL(objectURL) 可以释放 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了,允许平台在合适的时机进行垃圾收集。

所以需要我们在合适的情况下进行垃圾删除

window.URL.revokeObjectURL(fileName);