AnalyserNode: thuộc tính smoothingTimeConstant

Giá trị

Một giá trị double trong khoảng từ 0 đến 1 (0 nghĩa là không làm trung bình theo thời gian). Giá trị mặc định là 0.8.

Nếu đặt là 0, sẽ không có quá trình trung bình nào được thực hiện; còn nếu đặt là 1 thì nghĩa là "chồng lấn rất nhiều giữa bộ đệm trước và bộ đệm hiện tại khi tính toán giá trị", điều này về cơ bản làm mượt các thay đổi giữa các lần gọi AnalyserNode.getFloatFrequencyData/AnalyserNode.getByteFrequencyData.

Về mặt kỹ thuật, chúng ta áp dụng một cửa sổ Blackman window và làm mượt các giá trị theo thời gian. Giá trị mặc định là đủ tốt cho hầu hết trường hợp.

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 tần số và vẽ đầu ra kiểu "winamp bar graph" 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).

Nếu bạn tò mò về hiệu ứng của smoothingTimeConstant(), hãy thử sao chép ví dụ trên và đặt analyser.smoothingTimeConstant = 0; thay thế. Bạn sẽ thấy các thay đổi giá trị trở nên giật hơn nhiều.

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const 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);

  const barWidth = (WIDTH / bufferLength) * 2.5;
  let barHeight;
  let x = 0;

  for (let 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();

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Dùng Web Audio API