AnalyserNode: phương thức getFloatTimeDomainData()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Phương thức getFloatTimeDomainData() của giao diện AnalyserNode sao chép dữ liệu dạng sóng hiện tại, hay dữ liệu miền thời gian, vào một mảng Float32Array được truyền vào. Mỗi giá trị trong mảng là một mẫu, tức độ lớn của tín hiệu tại một thời điểm cụ thể.
Dạng sóng được biểu diễn dưới dạng dữ liệu PCM, có khoảng giá trị danh định từ -1.0 đến 1.0, nhưng các giá trị có thể vượt ra ngoài khoảng này, chẳng hạn khi down-mixing stereo sang mono.
Cú pháp
getFloatTimeDomainData(array)
Tham số
array-
Mảng
Float32Arraymà dữ liệu miền thời gian sẽ được sao chép vào. Nếu mảng có ít phần tử hơnAnalyserNode.fftSize, các phần tử thừa sẽ bị bỏ qua. Nếu mảng có nhiều phần tử hơn mức cần thiết, các phần tử thừa sẽ bị bỏ qua.
Giá trị trả về
Không có (undefined).
Ví dụ
Ví dụ sau minh họa cách dùng cơ bản của AudioContext để tạo AnalyserNode, rồi dùng requestAnimationFrame và <canvas> để liên tục thu thập dữ liệu miền thời gian và vẽ đầu ra kiểu "dao động ký" của đầu vào âm thanh hiện tại.
Để xem các ví dụ và thông tin áp dụng đầy đủ hơn, hãy xem bản demo Voice-change-O-matic của chúng tôi (xem app.js dòng 108-193 để biết đoạn mã liên quan).
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// …
analyser.fftSize = 1024;
const bufferLength = analyser.fftSize;
console.log(bufferLength);
const dataArray = new Float32Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getFloatTimeDomainData(dataArray);
canvasCtx.fillStyle = "rgb(200 200 200)";
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = "rgb(0 0 0)";
canvasCtx.beginPath();
const sliceWidth = (WIDTH * 1.0) / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] * 200.0;
const y = HEIGHT / 2 + v;
if (i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height / 2);
canvasCtx.stroke();
}
draw();
Thông số kỹ thuật
| Specification |
|---|
| Web Audio API # dom-analysernode-getfloattimedomaindata |