无需Service Workers，能否借助audio元素实现请求缓存？

完全可以借助audio元素实现音频缓存，具体分两种场景处理：

场景1：仅需复用音频（无需提取Blob） #

这种情况最直接，完全依赖浏览器和内存缓存，不需要用到fetch：

• 利用浏览器HTTP缓存
  当你创建audio元素并设置src后，浏览器会自动根据服务器返回的Cache-Control、Expires等响应头缓存音频文件。后续再创建指向同一URL的audio元素时，浏览器会直接读取缓存，无需重新发起请求。

• 内存缓存audio元素
  如果需要更主动的缓存控制，可以把加载完成的audio元素存在内存中，后续直接复用或克隆：

  // 全局缓存容器
  const audioCache = new Map();
  
  async function getCachedFLACAudio(url) {
    // 检查缓存是否存在
    if (audioCache.has(url)) {
      // 返回克隆的元素，避免原元素的播放状态被干扰
      return audioCache.get(url).cloneNode(true);
    }
  
    const audio = new Audio();
    audio.src = url;
  
    // 等待音频加载到可完整播放的状态
    await new Promise((resolve, reject) => {
      audio.addEventListener('canplaythrough', resolve);
      audio.addEventListener('error', err => reject(new Error(`加载失败: ${err.message}`)));
    });
  
    // 存入缓存
    audioCache.set(url, audio);
    return audio;
  }
  

  调用这个函数获取音频时，首次加载会走网络，后续直接从内存缓存拿，完全满足你的需求。

场景2：需要提取FLAC音频的Blob数据 #

如果必须拿到Blob（而不是仅复用音频），虽然无法完全脱离fetch，但可以通过流式fetch+MediaSource的组合，规避“必须等待请求完成才能拿Blob”的限制——边下载边收集数据，不用等整个请求结束：

async function cacheFLACAsBlob(url) {
  const bufferChunks = [];
  const mediaSource = new MediaSource();
  const audio = new Audio();
  audio.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', async () => {
    try {
      // 添加FLAC对应的SourceBuffer（注意MIME类型兼容性）
      const sourceBuffer = mediaSource.addSourceBuffer('audio/flac');
      const response = await fetch(url);
      const reader = response.body.getReader();

      // 流式读取响应数据
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        // 收集数据块
        bufferChunks.push(value);
        // 将数据喂给MediaSource让audio可以播放
        await new Promise(resolve => {
          sourceBuffer.appendBuffer(value);
          sourceBuffer.addEventListener('updateend', resolve, { once: true });
        });
      }

      // 合并所有数据块为Blob
      const flacBlob = new Blob(bufferChunks, { type: 'audio/flac' });
      // 这里可以把flacBlob存入缓存，后续直接使用
      console.log('缓存完成的FLAC Blob:', flacBlob);
    } catch (err) {
      console.error('缓存失败:', err);
    }
  });

  // 触发加载流程
  await audio.play().catch(err => console.log('自动播放被阻止:', err));
  return bufferChunks;
}

这种方式下，你可以在下载过程中逐步获取数据块，不用等整个请求完成，同时audio也能正常播放音频。

注意事项 #

• FLAC格式兼容性：Chrome、Firefox、Edge等主流浏览器原生支持FLAC播放，但部分旧版浏览器可能需要额外处理，确认MIME类型使用audio/flac或audio/x-flac。
• 浏览器缓存限制：HTTP缓存受浏览器缓存策略和服务器响应头控制，若服务器设置了no-cache或max-age=0，则无法依赖浏览器缓存。
• 内存缓存注意：如果缓存大量音频，可能占用较多内存，建议根据实际需求设置缓存淘汰策略。

内容的提问来源于stack exchange，提问作者SeetheMoar