BaseAudioContext：createBuffer() 方法

基线广泛可用

此功能已得到充分确立，并且可在许多设备和浏览器版本中使用。它已在浏览器中可用，自 2021 年 4 月.

BaseAudioContext 接口的 createBuffer() 方法用于创建一个新的、空的 AudioBuffer 对象，然后可以通过数据填充该对象，并通过 AudioBufferSourceNode 播放。

有关音频缓冲区的更多详细信息，请查看 AudioBuffer 参考页面。

注意：createBuffer() 曾经能够获取压缩数据并返回解码后的样本，但此功能已从规范中移除，因为所有解码都在主线程上完成，因此 createBuffer() 会阻塞其他代码执行。异步方法 decodeAudioData() 执行相同操作 - 获取压缩音频（例如 MP3 文件），并直接返回一个 AudioBuffer，然后您可以通过 AudioBufferSourceNode 播放它。对于播放 MP3 等简单的用例，您应该使用 decodeAudioData()。

语法

createBuffer(numOfChannels, length, sampleRate)

参数

注意：有关音频缓冲区工作原理以及这些参数含义的深入解释，请阅读我们基础概念指南中的音频缓冲区：帧、样本和通道。

numOfChannels: 表示此缓冲区应具有的通道数的整数。默认值为 1，并且所有用户代理必须至少支持 32 个通道。
length: 表示缓冲区大小（以样本帧为单位）的整数（其中每个样本帧的大小为样本大小（以字节为单位）乘以 numOfChannels）。要确定特定音频秒数应使用的 length，请使用 numSeconds * sampleRate。
sampleRate: 线性音频数据的采样率（以样本帧/秒为单位）。所有浏览器必须至少支持 8,000 Hz 至 96,000 Hz 范围内的采样率。

返回值

根据指定选项配置的 AudioBuffer。

异常

NotSupportedError DOMException: 如果一个或多个选项为负数或具有无效值（例如 numberOfChannels 高于支持的范围，或 sampleRate 超出标称范围），则抛出此异常。
RangeError: 如果可用内存不足以分配缓冲区，则抛出此异常。

示例

首先，几个简单的示例，以帮助解释如何使用参数。

const audioCtx = new AudioContext();
const buffer = audioCtx.createBuffer(2, 22050, 44100);

如果您使用此调用，您将获得一个立体声缓冲区（两个通道），当在以 44100Hz 运行的 AudioContext 上回放时（非常常见，大多数普通声卡以该速率运行），将持续 0.5 秒：22050 帧 / 44100Hz = 0.5 秒。

const audioCtx = new AudioContext();
const buffer = audioCtx.createBuffer(1, 22050, 22050);

如果您使用此调用，您将获得一个单声道缓冲区（一个通道），当在以 44100Hz 运行的 AudioContext 上回放时，将自动重新采样到 44100Hz（因此产生 44100 帧），并持续 1.0 秒：44100 帧 / 44100Hz = 1 秒。

注意：音频重新采样非常类似于图像缩放：假设您有一个 16 x 16 的图像，但您希望它填充 32x32 的区域：您对其进行缩放（重新采样）。结果质量较低（它可能模糊或边缘化，具体取决于缩放算法），但它有效，并且缩放后的图像占用更少的空间。重新采样的音频完全相同 - 您节省了空间，但在实践中您将无法正确再现高频内容（高音）。

现在让我们来看一个更复杂的 createBuffer() 示例，在这个示例中，我们创建一个三秒钟的缓冲区，用白噪声填充它，然后通过 AudioBufferSourceNode 播放它。注释应该清楚地解释正在发生的事情。您还可以在线运行代码，或查看源代码。

const audioCtx = new AudioContext();

// Create an empty three-second stereo buffer at the sample rate of the AudioContext
const myArrayBuffer = audioCtx.createBuffer(
  2,
  audioCtx.sampleRate * 3,
  audioCtx.sampleRate,
);

// Fill the buffer with white noise;
// just random values between -1.0 and 1.0
for (let channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
  // This gives us the actual ArrayBuffer that contains the data
  const nowBuffering = myArrayBuffer.getChannelData(channel);
  for (let i = 0; i < myArrayBuffer.length; i++) {
    // Math.random() is in [0; 1.0]
    // audio needs to be in [-1.0; 1.0]
    nowBuffering[i] = Math.random() * 2 - 1;
  }
}

// Get an AudioBufferSourceNode.
// This is the AudioNode to use when we want to play an AudioBuffer
const source = audioCtx.createBufferSource();
// set the buffer in the AudioBufferSourceNode
source.buffer = myArrayBuffer;
// connect the AudioBufferSourceNode to the
// destination so we can hear the sound
source.connect(audioCtx.destination);
// start the source playing
source.start();

规范

规范
Web Audio API # dom-baseaudiocontext-createbuffer

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

使用 Web Audio API