BaseAudioContext: phương thức createAnalyser()

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 createAnalyser() của giao diện BaseAudioContext tạo ra một AnalyserNode, có thể dùng để phơi bày dữ liệu âm thanh theo miền thời gian và tần số, cũng như tạo trực quan hóa dữ liệu.

Note: Hàm dựng AnalyserNode() là cách được khuyến nghị để tạo một AnalyserNode; xem Tạo một AudioNode.

Note: Để biết thêm về cách sử dụng node này, hãy xem trang AnalyserNode.

Ví dụ sau cho thấy cách dùng cơ bản của một AudioContext để tạo một node phân tích, rồi dùng requestAnimationFrame() để lặp lại việ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 ví dụ/thông tin ứng 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 phần mã liên quan).

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// vẽ 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)";

  canvasCtx.beginPath();

  const sliceWidth = (WIDTH * 1.0) / bufferLength;
  let x = 0;

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