使用 XMLHttpRequest 本地缓存音乐和视频 解决播放地址超时过期问题

Question

理论上来说，这种方式的缓存可以缓存任意的文件，最近做的一个音乐播放器需要这样的功能，具体来说就是 MP3 的播放地址是有有效期的，大概 10 分钟左右，理论上来说浏览器应该会一直下载文件然后缓存起来，在实际的测试中发现，Google 浏览器并不是这样，因为播放地址是“加密”的，带有一个参数 key，所以这个文件不设置缓存，google 都是实时去请求数据。

实现方法

想到的一种方案就是将 MP3 文件直接下载到本地，然后转换成 blob 地址传给 audio 标签播放视频，这样虽然有一个加载的过程，但是也能解决播放地址超时问题。

let that = this;
let xhr = new XMLHttpRequest();
xhr.open('GET', this.mp3Src2, true);
xhr.responseType = 'blob';
xhr.addEventListener(
  'load',
  function () {
    if (xhr.status === 200) {
      that.isLoading = false;
      let blob = this.response;
      let url = window.URL.createObjectURL(blob);
      that.mp3Src = url;
    }
  },
  false
);
// 发送异步请求
xhr.onprogress = function (evt) {
  that.progress = Math.ceil((evt.loaded / evt.total) * 100);
};
xhr.send();

设置 responseType 为 blob，XMLHttpRequest 异步请求回来的数据就是 blob 对象，通过 window.URL.createObjectURL() 转换为 blob 的地址。

弊端

这样处理以后会有以下几个问题：

• 如果文件比较大，那么这个加载的过程会很长，因为必须当文件都加载完成以后才能转换出本地播放的地址
• 因为是 ajax 异步请求，所以服务器要设置跨域
• 因为浏览安全设置的问题，https 和 http 不能混用，简单来说，主站点如果是 https，资源站是 http 就不行

将文件存到 localStorage 中

var fileReader = new FileReader();
fileReader.onload = function (evt) {
  // 用 Data URI 的格式读取文件内容
  var result = evt.target.result;
  // 将图片的 src 指向 Data URI
  music.setAttribute("src", result);
  //保存到本地存储中
  try {
    localStorage.setItem("music", result);
  } catch (e) {
    console.log("Storage failed: " + e);
  }
};
// 以Data URI的形式加载blob
fileReader.readAsDataURL(blob);