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 |
瀏覽器相容性
載入中…