AnalyserNode.getByteFrequencyData()
AnalyserNode
接口的 getByteFrequencyData()
方法将当前频率数据复制到传入的 Uint8Array(无符号字节数组)中。
如果数组的长度小于 AnalyserNode.frequencyBinCount
, 那么 Analyser 多出的元素会被删除。如果是大于,那么数组多余的元素会被忽略。
语法
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array 的长度应该和 frequencyBinCount 相等
analyser.getByteFrequencyData(dataArray); // 调用 getByteFrequencyData 方法填充 Uint8Array
返回值
一个 Uint8Array
(en-US)(无符号字节数组).
例子
下面的例子展示了 AudioContext
创建一个 AnalyserNode
, 然后用 requestAnimationFrame
和 <canvas>
去反复收集当前音频的频率数据,并绘制为一个柱状风格的输出 (频谱).
更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
...
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
x += barWidth + 1;
}
};
draw();
参数
- array (数组)
-
必须为
Uint8Array
(en-US), 频域数据将复制到该数组内。
规范
Specification |
---|
Web Audio API # dom-analysernode-getbytefrequencydata |
浏览器兼容性
BCD tables only load in the browser