AnalyserNode

상속

이 인터페이스는 다음의 부모 인터페이스들로부터 상속받습니다:

생성자

AnalyserNode()

AnalyserNode 객체의 새로운 인스턴스를 생성합니다.

속성

부모인 AudioNode로부터 속성을 상속받습니다.

AnalyserNode.fftSize

주파수 영역을 결정하는 데 사용될 FFT(Fast Fourier Transform)의 사이즈를 나타내는 unsigned long 값입니다.

AnalyserNode.frequencyBinCount 읽기 전용

FFT 사이즈 값의 절반인 unsigned long 값입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.

AnalyserNode.minDecibels

unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 getByteFrequencyData()를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.

AnalyserNode.maxDecibels

unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 getByteFrequencyData()를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.

AnalyserNode.smoothingTimeConstant

마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다 — 기본적으로, 이것은 시간에 대한 값 사이의 전환을 더 매끄럽게 만듭니다.

메서드

부모인 AudioNode로부터 메서드를 상속받습니다.

AnalyserNode.getFloatFrequencyData()

전달된 Float32Array 배열 내로 현재 주파수 데이터를 복사합니다.

AnalyserNode.getByteFrequencyData()

전달된 Uint8Array (unsiged byte array) 내로 현재 주파수 데이터를 복사합니다.

AnalyserNode.getFloatTimeDomainData()

전달된 Float32Array 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.

AnalyserNode.getByteTimeDomainData()

전달된 Uint8Array (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.

예제

기본 사용

다음의 예제는 AnalyserNode를 생성하기 위한 AudioContext와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 requestAnimationFrameê³¼ <canvas>의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// ...

var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;

var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// 분석될 소스에 연결합니다
source.connect(analyser);

// ID "oscilloscope"로 정의된 canvas를 얻습니다
var canvas = document.getElementById("oscilloscope");
var canvasCtx = canvas.getContext("2d");

// 현재 오디오 소스의 오실로스코프를 그립니다

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";

  canvasCtx.beginPath();

  var sliceWidth = (canvas.width * 1.0) / bufferLength;
  var x = 0;

  for (var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    var y = (v * canvas.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();

명세

브라우저 호환성

같이 보기

• Web Audio API 사용하기