AnalyserNode: phương thức getByteTimeDomainData()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phương thức getByteTimeDomainData() 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 Uint8Array (mảng byte không dấu) được truyền vào.
Nếu mảng có ít phần tử hơn AnalyserNode.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.
Cú pháp
getByteTimeDomainData(array)
Tham số
array-
Mảng
Uint8Arraymà 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 = 2048;
const bufferLength = analyser.fftSize;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// vẽ một dao động ký của nguồn âm thanh hiện tại
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = "rgb(200 200 200)";
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = "rgb(0 0 0)";
const sliceWidth = (WIDTH * 1.0) / bufferLength;
let x = 0;
canvasCtx.beginPath();
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = (v * HEIGHT) / 2;
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-getbytetimedomaindata |