AnalyserNode
============

**`AnalyserNode`** 인터페이스는 실시간 주파수와 시간 영역 분석 정보를 제공 가능한 노드를 표현합니다. 이것은 변경되지 않은 오디오 스트림을 입력에서 출력으로 전달하지만, 여러분은 생성된 데이터를 얻고, 그것을 처리하고, 오디오 시각화를 생성할 수 있습니다.

`AnalyserNode`는 정확히 하나의 입력과 하나의 출력을 가집니다. 이 노드는 출력이 연결되지 않았더라도 작동합니다.

![오디오 스트림을 수정하지 않고, 이 노드는 FFT를 사용하여 이것에 관련된 주파수와 시간 영역의 데이터를 얻을 수 있게 합니다.](/ko/docs/Web/API/AnalyserNode/fttaudiodata_en.svg)


| 입력의 수 | `1` |
| --- | --- |
| 출력의 수 | `1` (그러나 연결되지 않은 채로 남아있을지도 모릅니다) |
| Channel count mode | `"max"` |
| Channel count | `2` |
| Channel interpretation | `"speakers"` |

상속
--

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

EventTarget

AudioNode

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` (en-US) 배열 내로 현재 주파수 데이터를 복사합니다.

`AnalyserNode.getByteFrequencyData()`

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

`AnalyserNode.getFloatTimeDomainData()`

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

`AnalyserNode.getByteTimeDomainData()`

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

예제
--

**참고:** 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 Web Audio API 시각화 가이드를 참고하세요.

### 기본 사용

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


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

명세
--

| Specification |
| --- |
| Web Audio API # AnalyserNode |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기