如何在JavaScript/HTML中预加载音频文件，断网后仍能播放？

嘿，我来帮你搞定这个预加载音频后断网还能播放的问题！

问题根源 #

你之前用new Audio()加src的方式，哪怕预加载完成，播放时浏览器还是会尝试重新请求原URL（受浏览器缓存策略影响），断网后自然就会报错。核心解决思路是：把音频文件完整缓存到本地（内存或浏览器缓存），播放时直接调用本地缓存的内容，而非依赖远程地址。

具体实现方案 #

1. 内存缓存方案：Blob + Object URL #

这个方案适合临时离线场景（比如当前会话内断网仍能播放），我们通过fetch拉取音频文件转成Blob，再生成本地可访问的Object URL，播放时直接用这个本地链接：

// 预加载音频并缓存的函数
async function preloadAudios(audioUrls) {
  const audioCache = {};
  
  for (const url of audioUrls) {
    try {
      // 拉取音频文件
      const response = await fetch(url);
      if (!response.ok) throw new Error(`请求音频失败: ${url}`);
      // 转成Blob格式
      const blob = await response.blob();
      // 创建浏览器本地的Object URL
      const objectUrl = URL.createObjectURL(blob);
      // 创建Audio实例并完成预加载
      const audio = new Audio(objectUrl);
      await audio.load();
      // 存入缓存对象
      audioCache[url] = { audio, objectUrl };
    } catch (err) {
      console.error(`预加载失败: ${err.message}`);
    }
  }
  
  return audioCache;
}

// 使用示例
const audioList = ['audio1.mp3', 'audio2.wav', 'audio3.ogg'];
let audioCache;

// 页面加载时启动预加载
preloadAudios(audioList).then(cache => {
  audioCache = cache;
  console.log('所有音频预加载完成！');
});

// 播放函数
function playTargetAudio(url) {
  if (audioCache[url]) {
    // 重置播放位置后直接播放缓存的实例
    audioCache[url].audio.currentTime = 0;
    audioCache[url].audio.play().catch(err => console.error('播放出错:', err));
  } else {
    console.log('该音频未完成预加载');
  }
}

// 页面卸载时释放Object URL，避免内存泄漏
window.addEventListener('unload', () => {
  if (audioCache) {
    Object.values(audioCache).forEach(item => {
      URL.revokeObjectURL(item.objectUrl);
    });
  }
});

2. 持久化缓存方案：Service Worker + Cache Storage #

如果需要更持久的离线支持（比如关闭浏览器再打开，断网时仍能播放），可以搭配Service Worker把音频缓存到浏览器的Cache Storage中：

第一步：编写Service Worker文件（sw.js）

self.addEventListener('fetch', (event) => {
  // 拦截音频请求
  if (event.request.destination === 'audio') {
    event.respondWith(
      // 优先从缓存读取，没有则请求网络并缓存
      caches.match(event.request).then(cachedRes => {
        return cachedRes || fetch(event.request).then(networkRes => {
          caches.open('audio-offline-cache').then(cache => {
            cache.put(event.request, networkRes.clone());
          });
          return networkRes;
        });
      })
    );
  }
});

第二步：在主页面注册Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(() => console.log('Service Worker 注册成功，支持持久化离线缓存'))
      .catch(err => console.error('Service Worker 注册失败:', err));
  });
}

这种方式下，只要用户之前加载过音频，哪怕关闭浏览器再打开，断网时也能从本地缓存读取。

总结 #

• 临时离线需求用Blob + Object URL，把音频缓存到内存，播放时直接调用本地实例，彻底避免远程请求。
• 持久化离线需求搭配Service Worker + Cache Storage，实现长期本地缓存。
• 记得清理Object URL和管理缓存，避免内存或存储泄漏。

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