如何用JavaScript基于CSV/JSON数据和现有音频生成目标音频文件

核心结论 #

该需求完全可以通过原生Web Audio API实现，无需引入第三方依赖，也不需要实时录制音频，离线渲染速度远快于音频实际时长，即便生成1小时以上的长音频也仅需数秒即可完成。

具体实现流程 #

1. 预处理上传文件 #

• 解析用户上传的5秒蜂鸣音频文件：通过FileReader读取文件为ArrayBuffer，再用AudioContext.decodeAudioData()将其转为AudioBuffer备用。
• 解析用户上传的JSON/CSV数据文件：提取所有秒级时间戳转为数字数组，计算最终音频总时长 = 最大时间戳 + 5（蜂鸣音频时长）。

2. 初始化离线音频上下文 #

创建OfflineAudioContext实例用于非实时音频渲染，参数配置参考：

// 采样率建议和蜂鸣音频保持一致，常规为44100Hz
const sampleRate = 44100
const totalDuration = 最大时间戳 + 5
const offlineCtx = new OfflineAudioContext({
  numberOfChannels: 2, // 双声道立体声，可按需调整为1
  sampleRate: sampleRate,
  length: sampleRate * totalDuration
})

3. 按时间戳拼接蜂鸣音频 #

遍历所有时间戳，为每个时间点创建音频源节点并配置播放时机，中间的静音段无需手动生成，OfflineAudioContext空白区域默认即为静音：

const beepBuffer = // 之前解析好的蜂鸣AudioBuffer
timeStampList.forEach(ts => {
  const source = offlineCtx.createBufferSource()
  source.buffer = beepBuffer
  source.connect(offlineCtx.destination)
  source.start(ts) // 直接指定在对应秒数开始播放
})

4. 渲染并导出音频文件 #

调用离线渲染接口，完成后将渲染结果转为可下载的音频文件：

// 触发离线渲染
const renderedBuffer = await offlineCtx.startRendering()
// 将renderedBuffer转为WAV格式Blob，原生实现仅需几十行代码即可完成，无需引入编码库
const wavBlob = audioBufferToWav(renderedBuffer)
// 触发浏览器下载
const url = URL.createObjectURL(wavBlob)
const a = document.createElement('a')
a.href = url
a.download = '生成结果.wav'
a.click()
URL.revokeObjectURL(url)

注意事项 #

• 若时间戳存在重叠，Web Audio API会自动完成多段蜂鸣音频的混音，无需额外处理。
• 仅当需要导出MP3等压缩格式时，才需要引入轻量的第三方编码库，普通场景下WAV格式完全可以通过原生能力实现。
• 离线渲染为纯CPU运算，不受音频实际时长限制，1小时长度的音频通常数秒即可渲染完成。

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