嘿，这两个需求都是前端处理音频文件时的典型场景，我来给你拆解一下具体实现方案：

要把ArrayBuffer里的音频导出下载，核心是先把ArrayBuffer转换成浏览器能识别的Blob对象，再通过临时链接触发下载。这里有个现成的工具函数：

function downloadAudioFromArrayBuffer(arrayBuffer, filename = 'audio.mp3', mimeType = 'audio/mpeg') {
  // 把ArrayBuffer转成Blob——浏览器下载需要Blob/File类型的数据源
  const audioBlob = new Blob([arrayBuffer], { type: mimeType });
  // 生成临时下载URL
  const downloadUrl = URL.createObjectURL(audioBlob);
  
  // 创建隐藏的a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // 清理资源，避免内存泄漏
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
}

小提示： #

• 记得根据你的音频格式修改mimeType：MP3用audio/mpeg，WAV用audio/wav，OGG用audio/ogg。
• 一定要调用URL.revokeObjectURL释放临时URL，不然浏览器会一直占用内存。

当音频数据量很大（比如几十分钟甚至几小时的音频），把所有数据存在内存里很容易导致浏览器卡顿甚至崩溃。这时候用流式处理就很有必要，这里给你两种实用方案：

方案一：用ReadableStream流式构建Blob并下载 #

适合中等偏大的文件，不需要直接写入本地文件系统，最后统一下载：

async function streamDownloadLargeAudio(chunkGenerator, filename = 'large-audio.mp3', mimeType = 'audio/mpeg') {
  // 创建可读流，逐步接收TTS生成的音频分块
  const audioStream = new ReadableStream({
    async start(controller) {
      try {
        // chunkGenerator是异步生成器，负责逐个获取TTS的音频分块（ArrayBuffer）
        for await (const chunk of chunkGenerator) {
          // 把分块数据加入流
          controller.enqueue(new Uint8Array(chunk));
        }
        // 所有分块处理完成后关闭流
        controller.close();
      } catch (error) {
        controller.error(error);
      }
    }
  });

  // 把可读流转成Blob，再执行下载
  const audioBlob = await new Response(audioStream).blob();
  const downloadUrl = URL.createObjectURL(audioBlob);
  
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
}

// 示例：模拟TTS分块生成音频的异步生成器
async function* ttsChunkGenerator() {
  // 这里替换成你实际的TTS分块获取逻辑，比如调用后端接口逐块拉取
  for (let i = 0; i < 10; i++) {
    const chunk = await fetch(`/your-tts-api/chunk/${i}`).then(res => res.arrayBuffer());
    yield chunk;
  }
}

// 调用流式下载
streamDownloadLargeAudio(ttsChunkGenerator());

方案二：用FileSystemAccess API直接流式写入本地文件（推荐超大文件） #

如果是GB级别的超大音频，这个方案更合适——它能直接把分块数据实时写入本地文件，几乎不占用内存，不过需要用户授权：

async function streamWriteToLocalFile(chunkGenerator, filename = 'huge-audio.mp3', mimeType = 'audio/mpeg') {
  // 请求用户选择保存的文件
  const fileHandle = await window.showSaveFilePicker({
    suggestedName: filename,
    types: [{
      description: 'Audio File',
      accept: { [mimeType]: ['.mp3', '.wav'] }
    }]
  });

  // 创建可写流，准备写入文件
  const writableStream = await fileHandle.createWritable();

  try {
    // 逐个写入音频分块
    for await (const chunk of chunkGenerator) {
      await writableStream.write(new Uint8Array(chunk));
    }
    // 完成写入，关闭流
    await writableStream.close();
    console.log('超大音频已成功保存到本地！');
  } catch (error) {
    console.error('写入失败:', error);
    // 写入出错时终止流
    await writableStream.abort();
  }
}

// 调用流式写入本地文件
streamWriteToLocalFile(ttsChunkGenerator());

兼容性提示： #

FileSystemAccess API目前支持Chrome、Edge、Firefox 118+，Safari还在开发中。如果需要兼容旧浏览器，可以 fallback 到方案一。

关键注意点： #

• 确保TTS生成的分块数据符合音频格式的规范（比如MP3的帧结构），否则最后合成的音频会损坏。
• 流式处理时要做好错误捕获，避免中途出错导致文件损坏。

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