AnalyserNode: getFloatFrequencyData() 方法
AnalyserNode 接口的 getFloatFrequencyData() 方法会将当前的频率数据复制到一个传递给它的 Float32Array 数组中。
数组中的每个元素代表一个特定频率的分贝值。频率从 0 到采样率的 1/2 线性分布。例如，对于 48000 Hz 的采样率，数组的最后一个元素将代表 24000 Hz 的分贝值。
如果您需要更高的性能，并且不关心精度，可以使用 AnalyserNode.getByteFrequencyData() 方法，它操作的是一个 Uint8Array。
语法
js
getFloatFrequencyData(array)
参数
array-
频率域数据将被复制到的
Float32Array。对于任何静默的采样，其值为-Infinity。如果数组的元素少于AnalyserNode.frequencyBinCount，则会丢弃多余的元素。如果其元素多于所需，则会忽略多余的元素。
返回值
无（undefined）。
示例
js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array should be the same length as the frequencyBinCount
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// fill the Float32Array with data returned from getFloatFrequencyData()
analyser.getFloatFrequencyData(myDataArray);
绘制频谱
以下示例展示了如何使用 AudioContext 将 MediaElementAudioSourceNode 连接到 AnalyserNode。在音频播放时，我们使用 requestAnimationFrame() 重复收集频率数据，并将其绘制到 <canvas> 元素上，绘制成“winamp 条形图风格”。
有关更完整的应用示例/信息，请查看我们的 Voice-change-O-matic 演示（相关代码请参见 app.js 的 108-193 行）。
js
const audioCtx = new AudioContext();
// Create audio source
// Here, we use an audio file, but this could also be e.g. microphone input
const audioEle = new Audio();
audioEle.src = "my-audio.mp3"; // Insert file name here
audioEle.autoplay = true;
audioEle.preload = "auto";
const audioSourceNode = audioCtx.createMediaElementSource(audioEle);
// Create analyser node
const analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 256;
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Float32Array(bufferLength);
// Set up audio node network
audioSourceNode.connect(analyserNode);
analyserNode.connect(audioCtx.destination);
// Create 2D canvas
const canvas = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.top = "0";
canvas.style.left = "0";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
const canvasCtx = canvas.getContext("2d");
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
function draw() {
// Schedule next redraw
requestAnimationFrame(draw);
// Get spectrum data
analyserNode.getFloatFrequencyData(dataArray);
// Draw black background
canvasCtx.fillStyle = "rgb(0 0 0)";
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
// Draw spectrum
const barWidth = (canvas.width / bufferLength) * 2.5;
let posX = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = (dataArray[i] + 140) * 2;
canvasCtx.fillStyle = `rgb(${Math.floor(barHeight + 100)} 50 50)`;
canvasCtx.fillRect(
posX,
canvas.height - barHeight / 2,
barWidth,
barHeight / 2,
);
posX += barWidth + 1;
}
}
draw();
规范
| 规范 |
|---|
| Web Audio API # dom-analysernode-getfloatfrequencydata |
浏览器兼容性
加载中…