JavaScript实现音频文件下载：a标签download属性与Blob方案对比

一、a 标签 download 属性方案：极简的原生流式转储

HTML5 为 <a> 标签引入了 download 属性。它的设计初衷是在用户点击超链接时，指示浏览器将其作为本地附件直接保存，而不是在标签页中打开播放，并且允许开发者通过该属性的值指定保存至本地的文件名。

1. 基础用法与动态触发

在静态页面中，可以直接声明带 download 的链接；而在实际的 JavaScript 交互（如点击下载按钮）中，通常动态创建虚拟节点并派发点击事件：

/**
 * 通过 a[download] 触发音频下载
 * @param {string} audioUrl 音频资源网络地址
 * @param {string} filename 本地保存文件名
 */
function downloadAudioByAnchor(audioUrl, filename) {
  const anchor = document.createElement('a');
  anchor.href = audioUrl;
  anchor.download = filename || 'audio.mp3';
  
  // 保持兼容性：部分浏览器要求节点必须挂载至 DOM 才能触发 click
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
}

2. 核心优势：无内存损耗的底层流式下发

采用 a[download] 时，JavaScript 引擎仅负责派发一个点击导航指令。随后，浏览器底层的网络栈与下载管理器直接接管整个数据流。音频数据从远端服务器拉取后，以数据块（Chunk）的形式直接写入用户本地磁盘，全程完全不经过 JavaScript 运行时堆内存（V8 Heap）。因此，无论音频文件是 5MB 还是 500MB，页面内存曲线始终保持平稳。

二、Blob 方案：前端完全可控的内存流管道

为了突破跨域文件名重命名的限制，或支持动态合成的音频数据（如 Web Audio API 合成、录音 MediaRecorder 生成、TTS 接口返回），业界普遍采用 Fetch + Blob + 对象 URL 方案。

1. 原理拆解：将跨域资源转化为同源临时指针

Blob 方案的核心逻辑在于“化被动为主动”：首先通过 fetch() 发起网络请求拿到音频的原始二进制数据（ArrayBuffer 或 Blob 对象）；接着调用 URL.createObjectURL(blob) 在浏览器内部生成一个以 blob:http://当前域名/uuid 为形式的内部引用。

由于生成的 blob: 协议 URL 与当前网页拥有完全一致的源（Origin），再次将其赋给 <a download> 时，浏览器判定其为 100% 同源资源，此时 download 属性的重命名能力即可无视远端限制正常生效。

2. 生产环境健壮代码实现

以下是支持异步鉴权、自定义请求头、加载异常捕获以及内存延迟释放的完整实现：

/**
 * 基于 Blob 管道实现音频高保真下载
 * @param {string} audioUrl 音频地址（需支持 CORS）
 * @param {string} customFilename 自定义落地文件名
 * @param {string} authToken 可选鉴权 Token
 */
async function downloadAudioByBlob(audioUrl, customFilename, authToken) {
  try {
    const headers = new Headers();
    if (authToken) {
      headers.append('Authorization', `Bearer ${authToken}`);
    }

    // 1. 发起网络请求获取二进制响应
    const response = await fetch(audioUrl, {
      method: 'GET',
      headers: headers,
      mode: 'cors'
    });

    if (!response.ok) {
      throw new Error(`音频拉取失败: HTTP ${response.status} ${response.statusText}`);
    }

    // 2. 将响应主体转换为 Blob 二进制实体
    const blob = await response.blob();

    // 3. 为内存数据分配同源的虚拟指针 URL
    const objectUrl = window.URL.createObjectURL(blob);

    // 4. 构造锚点触发系统下载对话框
    const anchor = document.createElement('a');
    anchor.href = objectUrl;
    anchor.download = customFilename || 'downloaded-audio.mp3';
    anchor.style.display = 'none';

    document.body.appendChild(anchor);
    anchor.click();

    // 5. 生命周期管理：延迟撤销 Object URL
    // 注意：Safari 在同步 revoke 时可能会导致下载未被拉起就取消，因此建议延迟 1 秒释放
    setTimeout(() => {
      document.body.removeChild(anchor);
      window.URL.revokeObjectURL(objectUrl);
    }, 1000);

  } catch (error) {
    console.error('音频下载失败:', error);
    throw error;
  }
}

3. 支持实时进度追踪的进阶版本

由于原生 a[download] 无法向前端暴露任何下载进度事件，若音频文件较大，界面会出现长时间“毫无反应”的假死感。Blob 方案可以通过消费 response.body.getReader() 的 ReadableStream，精确计算下载百分比并更新 UI：

/**
 * 带进度回调的流式 Blob 下载
 */
async function downloadAudioWithProgress(audioUrl, filename, onProgress) {
  const response = await fetch(audioUrl, { mode: 'cors' });
  const contentLength = Number(response.headers.get('content-length'));
  
  if (!response.body) throw new Error('ReadableStream 不受支持');
  
  const reader = response.body.getReader();
  let receivedLength = 0;
  const chunks = [];

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    chunks.push(value);
    receivedLength += value.length;

    if (contentLength && typeof onProgress === 'function') {
      const percent = Math.round((receivedLength / contentLength) * 100);
      onProgress(percent, receivedLength, contentLength);
    }
  }

  const blob = new Blob(chunks, { type: 'audio/mpeg' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

三、核心维度横向技术对比

为了清晰呈现两者的本质差异，我们从数据流向、内存占用、鉴权控制等核心维度进行横向拆解：

四、工程选型指南与避坑建议

在实际项目架构中，不能盲目崇拜 Blob 的灵活性，也不能一味为了省事使用 a[download]。建议依据以下决策路径进行技术选型：

1. 优先使用 a 标签 download 的场景

• 同源静态资源或托管在自有 CDN：只要能够配置 CDN 或服务端输出响应头 Content-Disposition: attachment; filename="audio.mp3"，原生 a 标签具有无可比拟的性能优势。
• 长音频与无损母带音频（体积 > 50MB）：对于几十分钟的有声书播客或 24-bit 96kHz FLAC/WAV 母带文件，严禁使用 Blob 方案拉到内存中，否则在 iOS Safari 或低端 Android 设备上极易触发渲染进程直接被操作系统杀死的现象。

2. 必须使用 Blob 方案的场景

• 音频需要客户端鉴权：例如需要验证用户的 JWT，通过 Authorization: Bearer <token> 拦截未授权访问的付费音频接口。
• 前端动态生成音频：例如用户在网页端通过麦克风录制音频后导出为 WAV 文件，或者基于 Web Audio API 实时渲染出的音频片段。
• 跨域且必须指定规范文件名：音频存放在第三方云存储（如 AWS S3、阿里云 OSS），由于签名策略或通用配置无法为每个用户动态修改响应头中的 filename，此时必须使用 Blob 方案在前端进行重命名。