AnalyserNode: phương thức getByteFrequencyData()

getByteFrequencyData(array)

const audioCtx = new AudioContext();

// Tạo nguồn âm thanh
// Ở đây chúng ta dùng một tệp âm thanh, nhưng cũng có thể là đầu vào từ microphone, v.v.
const audioEle = new Audio();
audioEle.src = "my-audio.mp3"; // Chèn tên tệp tại đây
audioEle.autoplay = true;
audioEle.preload = "auto";
const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

// Tạo nút phân tích
const analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 256;
const bufferLength = analyserNode.frequencyBinCount;
const dataArray = new Float32Array(bufferLength);

// Thiết lập mạng nút âm thanh
audioSourceNode.connect(analyserNode);
analyserNode.connect(audioCtx.destination);

// Tạo canvas 2D
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() {
  // Lên lịch cho lần vẽ lại tiếp theo
  requestAnimationFrame(draw);

  // Lấy dữ liệu phổ
  analyserNode.getFloatFrequencyData(dataArray);

  // Vẽ nền đen
  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  // Vẽ phổ
  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();