AudioContext.createBuffer() - Web API 接口参考 编辑
音频环境AudioContext
接口的 createBuffer() 方法用于新建一个空
白的 AudioBuffer
对象,以便用于填充数据,通过 AudioBufferSourceNode
播放。
更多关于音频片段(Audio Buffer)的细节,请参考AudioBuffer
页面。
注意: createBuffer()
曾被用于接收压缩后的音频数据,并返回被解码的音频,但是这项功能现在已经被移除,因为所有的解码工作应当在主线程中被完成,createBuffer()
阻塞了其他代码的执行。异步方法 decodeAudioData()
能够完成相同的工作 —— 传入一个压缩过的音频(如MP3格式的文件),并直接返回一个可以通过 AudioBufferSourceNode
播放的 AudioBuffer
。因此播放诸如MP3等格式的压缩音频时,你应当使用 decodeAudioData() 方法。
语法
AudioContext.createBuffer(Number numOfChannels, Number length, Number sampleRate);
参数
注意:如果想深入了解 audio buffers 是如何工作的、这些参数的具体含义,请阅读这篇简短的指南: Audio buffers: frames, samples and channels(英)。
- numOfChannels
- 一个定义了 buffer 中包含的声频通道数量的整数。
一个标准的实现必须包含至少32个声频通道。 - length
- 一个代表 buffer 中的样本帧数的整数。
- sampleRate
- 线性音频样本的采样率,即每一秒包含的关键帧的个数。实现过程中必须支持 22050~96000的采样率。
返回值
一个 AudioBuffer
。
示例
首先,我们将从几个浅显易懂的示例入手,来解释如何使用这些参数:
var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(2, 22050, 44100);
如果你这样调用,你将会得到一个立体声(两个声道)的音频片段(Buffer),当它在一个频率为44100赫兹(这是目前大部分声卡处理声音的频率)的音频环境(AudioContext
)中播放的时候,会持续0.5秒:22050帧 / 44100赫兹 = 0.5 秒。
var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(1, 22050, 22050);
如果你这样调用,你将会得到一个单声道的音频片段(Buffer),当它在一个频率为44100赫兹的音频环境(AudioContext
)中播放的时候,将会被自动按照44100赫兹*重采样*(因此也会转化为44100赫兹的片段),并持续1秒:44100帧 / 44100赫兹 = 1秒。
注意: 音频重采样与图片的缩放非常类似:比如你有一个16 x 16的图像,但是你想把它填充到一个32 x 32大小的区域,你就要对它进行缩放(重采样)。得到的结果会是一个叫低品质的(图像会模糊或者有锯齿形的边缘,这取决于缩放采用的算法),但它却是能将原图形缩放,并且缩放后的图像占用空间比相同大小的普通图像要小。重新采样的音频道理相同——你会介于一些空间,但事实上你无法产出高频率的声音(高音区)。
现在让我们来看一个更加复杂的示例,我们将创建一个时长2秒的音频片段,并用白噪声填充它,之后通过一个 音频片段源节点(AudioBufferSourceNode
) 播放。代码中的注释应该能充分解释发生了什么。你可以 在线演示 ,或者 查看源代码 。
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var button = document.querySelector('button');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
pre.innerHTML = myScript.innerHTML;
// 立体声
var channels = 2;
// 创建一个 采样率与音频环境(AudioContext)相同的 时长2秒的 音频片段。
var frameCount = audioCtx.sampleRate * 2.0;
var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
button.onclick = function() {
// 使用白噪声填充;
// 就是 -1.0 到 1.0 之间的随机数
for (var channel = 0; channel < channels; channel++) {
// 这允许我们读取实际音频片段(AudioBuffer)中包含的数据
var nowBuffering = myArrayBuffer.getChannelData(channel);
for (var i = 0; i < frameCount; i++) {
// Math.random() is in [0; 1.0]
// audio needs to be in [-1.0; 1.0]
nowBuffering[i] = Math.random() * 2 - 1;
}
}
// 获取一个 音频片段源节点(AudioBufferSourceNode)。
// 当我们想播放音频片段时,我们会用到这个源节点。
var source = audioCtx.createBufferSource();
// 把刚才生成的片段加入到 音频片段源节点(AudioBufferSourceNode)。
source.buffer = myArrayBuffer;
// 把 音频片段源节点(AudioBufferSourceNode) 连接到
// 音频环境(AudioContext) 的终节点,这样我们就能听到声音了。
source.connect(audioCtx.destination);
// 开始播放声源
source.start();
}
规范
规范 | 现状 | 备注 |
---|---|---|
Web Audio API createBuffer() | Working Draft |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 10.0webkit | 25.0 (25.0) | 未实现 | 15.0 webkit 22 | 6.0webkit |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | 26.0 | 1.2 | ? | ? | ? | 33.0 |
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论