如何使用JavaScript合并URL加载的.wav音频并实现网页播放与下载

核心实现逻辑 #

整个流程完全基于浏览器原生能力实现，无需依赖后端服务或第三方CDN资源，核心处理链路如下：

• 通过fetch接口从指定URL加载两个WAV文件的原始二进制ArrayBuffer数据
• 逐块解析WAV文件结构，校验两个文件的音频参数（采样率、声道数、位深、编码格式）是否匹配，避免合并后出现解码故障
• 提取两个文件的纯音频采样数据段，跳过各自的文件头信息完成数据拼接
• 按照WAV格式规范重新生成匹配新文件大小的标准文件头，把头部和拼接后的采样数据封装为可被浏览器识别的Blob对象
• 为Blob生成本地ObjectURL，分别绑定到页面音频播放器实现在线播放，以及下载按钮触发文件保存

注意：直接把两个完整WAV文件的二进制数据硬拼接是常见错误，第二个文件的头部会被识别为无效音频采样，会出现播放爆音、无法解码的问题。

可直接运行的核心代码 #

远程WAV加载工具函数 #

// 从指定URL加载WAV文件为ArrayBuffer格式
async function loadWavFromUrl(fileUrl) {
  const response = await fetch(fileUrl);
  if (!response.ok) throw new Error(`远程文件加载失败，状态码：${response.status}`);
  return await response.arrayBuffer();
}

WAV结构解析与参数校验 #

// 解析WAV二进制结构，返回音频参数、头部长度、纯采样数据
function parseWav(buffer) {
  const dataView = new DataView(buffer);
  // 校验RIFF文件标识，排除非WAV格式文件
  if (dataView.getUint32(0, false) !== 0x52494646) throw new Error('文件不是标准WAV格式');
  
  let offset = 12;
  let audioMeta = {};
  let dataChunkOffset = 0;

  // 遍历RIFF块定位fmt参数段和data采样段
  while (offset < dataView.byteLength) {
    const chunkId = dataView.getUint32(offset, false);
    const chunkSize = dataView.getUint32(offset + 4, true);
    
    // 匹配fmt参数块
    if (chunkId === 0x666d7420) {
      audioMeta.sampleFormat = dataView.getUint16(offset + 8, true);
      audioMeta.channelCount = dataView.getUint16(offset + 10, true);
      audioMeta.sampleRate = dataView.getUint32(offset + 12, true);
      audioMeta.bitDepth = dataView.getUint16(offset + 22, true);
    }
    // 匹配data采样块，记录采样数据起始位置
    if (chunkId === 0x64617461) {
      dataChunkOffset = offset + 8;
      break;
    }
    offset += 8 + chunkSize;
  }

  if (Object.keys(audioMeta).length === 0 || dataChunkOffset === 0) {
    throw new Error('WAV文件结构损坏，无法提取音频参数');
  }

  return {
    audioMeta,
    rawAudioData: buffer.slice(dataChunkOffset)
  };
}

双WAV合并逻辑 #

// 接收两个WAV的ArrayBuffer，返回合并完成的Blob对象
function mergeTwoWavBuffers(bufA, bufB) {
  const wavA = parseWav(bufA);
  const wavB = parseWav(bufB);

  // 校验两个文件音频参数一致性
  const isMatched = 
    wavA.audioMeta.sampleFormat === wavB.audioMeta.sampleFormat &&
    wavA.audioMeta.channelCount === wavB.audioMeta.channelCount &&
    wavA.audioMeta.sampleRate === wavB.audioMeta.sampleRate &&
    wavA.audioMeta.bitDepth === wavB.audioMeta.bitDepth;
  
  if (!isMatched) throw new Error('两个WAV的音频参数不匹配，需先做参数对齐');

  // 拼接两段纯采样数据
  const mergedRawData = new Uint8Array(wavA.rawAudioData.byteLength + wavB.rawAudioData.byteLength);
  mergedRawData.set(new Uint8Array(wavA.rawAudioData), 0);
  mergedRawData.set(new Uint8Array(wavB.rawAudioData), wavA.rawAudioData.byteLength);

  // 重新生成44字节标准WAV文件头
  const fileTotalSize = 36 + mergedRawData.byteLength;
  const headerBuffer = new ArrayBuffer(44);
  const headerView = new DataView(headerBuffer);
  
  // 写入RIFF文件头标识
  headerView.setUint32(0, 0x52494646, false);
  headerView.setUint32(4, fileTotalSize, true);
  headerView.setUint32(8, 0x57415645, false); // WAVE标识
  // 写入fmt参数块
  headerView.setUint32(12, 0x666d7420, false);
  headerView.setUint32(16, 16, true); // fmt块固定长度
  headerView.setUint16(20, 1, true); // PCM编码格式
  headerView.setUint16(22, wavA.audioMeta.channelCount, true);
  headerView.setUint32(24, wavA.audioMeta.sampleRate, true);
  headerView.setUint32(28, 
    wavA.audioMeta.sampleRate * wavA.audioMeta.channelCount * wavA.audioMeta.bitDepth / 8,
    true
  );
  headerView.setUint16(32, wavA.audioMeta.channelCount * wavA.audioMeta.bitDepth /8, true);
  headerView.setUint16(34, wavA.audioMeta.bitDepth, true);
  // 写入data采样块标识
  headerView.setUint32(36, 0x64617461, false);
  headerView.setUint32(40, mergedRawData.byteLength, true);

  return new Blob([headerBuffer, mergedRawData], { type: 'audio/wav' });
}

播放与下载绑定 #

// 将合并后的Blob绑定到页面播放器和下载按钮
function bindPlayerAndDownload(mergedBlob, audioPlayerEl, downloadBtnEl) {
  const objectUrl = URL.createObjectURL(mergedBlob);
  // 绑定音频播放源
  audioPlayerEl.src = objectUrl;
  // 绑定下载触发逻辑
  downloadBtnEl.href = objectUrl;
  downloadBtnEl.download = 'merged-audio.wav';
}

常见实操问题说明 #

• 跨域拦截：如果远程WAV资源未配置CORS允许当前页面域名访问，fetch请求会被浏览器拦截，需要提前确认资源端的跨域规则
• 参数不匹配处理：如果两个WAV的采样率、声道数不一致，无法直接硬拼采样数据，需要借助Web Audio API的重采样能力把两个文件转为统一参数后再执行合并，避免出现变速、爆音问题
• 内存限制：如果合并后的WAV文件总大小超过1GB，浏览器可能出现内存溢出，需要通过分片读取的方式优化处理逻辑

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