在Safari和Edge中复制Float32Array到新AudioBuffer的问题

嘿，我之前也踩过旧浏览器Web Audio API的兼容坑，来帮你拆解下遇到的这两个关联问题：copyToChannel方法缺失，还有用audio-resampler降采样时OfflineAudioContext抛的语法错误，一步步来解决：

一、替代copyToChannel的兼容复制方案 #

Safari 11和旧版Edge确实没实现copyToChannel，直接调用肯定会炸。你之前用getChannelData循环或者set复制后出问题，大概率是没处理好数组长度匹配的问题——旧浏览器对AudioBuffer的通道数据完整性要求特别严格。试试这个更稳妥的方法：

function copyToChannelSafely(audioBuffer, sourceArray, channelIndex) {
  const targetArray = audioBuffer.getChannelData(channelIndex);
  // 先对齐长度：源数据太长就截断，太短就补0
  if (sourceArray.length > targetArray.length) {
    targetArray.set(sourceArray.subarray(0, targetArray.length));
  } else {
    targetArray.set(sourceArray);
    // 空出来的位置补0，避免残留脏数据
    targetArray.fill(0, sourceArray.length);
  }
}

这个函数的核心是确保目标通道数组的每一位都有有效值，不会因为长度不匹配导致后续音频上下文处理时出现奇怪的错误。

二、OfflineAudioContext的前缀兼容问题 #

你说参数都是非零整数还报语法错？这十有八九是旧浏览器需要带前缀的构造函数。Safari 11和旧版Edge（非Chromium内核）都认webkitOfflineAudioContext，咱们做个特性检测自动适配：

function createOfflineContext(channels, length, sampleRate) {
  // 优先用标准API， fallback到webkit前缀版
  if (window.OfflineAudioContext) {
    return new OfflineAudioContext(channels, length, sampleRate);
  } else if (window.webkitOfflineAudioContext) {
    return new webkitOfflineAudioContext(channels, length, sampleRate);
  } else {
    throw new Error("浏览器不支持离线音频上下文");
  }
}

如果audio-resampler包内部是硬编码调用OfflineAudioContext的，你可能得改改包的源码，把创建上下文的地方换成这个兼容函数——毕竟旧版浏览器不认不带前缀的构造函数，哪怕参数对也会炸。

三、完整的兼容流程示例 #

把两个方案串起来，从数据复制到降采样全流程兼容：

// 1. 先创建符合要求的目标AudioBuffer
const targetBuffer = new AudioBuffer({
  length: sourceFloat32Array.length,
  numberOfChannels: 1,
  sampleRate: 44100
});

// 2. 安全复制通道数据
copyToChannelSafely(targetBuffer, sourceFloat32Array, 0);

// 3. 创建兼容的离线上下文用于降采样
const offlineCtx = createOfflineContext(1, targetBuffer.length, 22050);
const sourceNode = offlineCtx.createBufferSource();
sourceNode.buffer = targetBuffer;
sourceNode.connect(offlineCtx.destination);
sourceNode.start();

// 4. 执行降采样
offlineCtx.startRendering().then(renderedBuffer => {
  // 这里处理降采样后的结果
}).catch(err => {
  console.error("降采样失败:", err);
});

几个要注意的点 #

• 一定要确保AudioBuffer的length和源数组长度匹配，或者像上面那样做截断/补0，旧浏览器对音频数据的完整性要求比现代浏览器高太多
• 要是还是报错，可以把传入OfflineAudioContext的参数都打印出来确认，偶尔旧版浏览器会对参数的类型有更严格的要求（比如必须是整数，不能是Number对象）
• 如果audio-resampler有更新版本，先看看有没有修复旧浏览器的兼容问题，能升级就不用自己改源码

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