---
title: AnalyserNode
slug: Web/API/AnalyserNode
tags:
  - API
  - AnalyserNode
  - Interface
  - Reference
  - Web Audio API
browser-compat: api.AnalyserNode
---
<p>{{APIRef("Web Audio API")}}</p>

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

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

<p><img alt="오디오 스트림을 수정하지 않고, 이 노드는 FFT를 사용하여 이것에 관련된 주파수와 시간 영역의 데이터를 얻을 수 있게 합니다." src="fttaudiodata_en.svg"></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">입력의 수</th>
   <td><code>1</code></td>
  </tr>
  <tr>
   <th scope="row">출력의 수</th>
   <td><code>1</code> (그러나 연결되지 않은 채로 남아있을지도 모릅니다)</td>
  </tr>
  <tr>
   <th scope="row">Channel count mode</th>
   <td><code>"max"</code></td>
  </tr>
  <tr>
   <th scope="row">Channel count</th>
   <td><code>2</code></td>
  </tr>
  <tr>
   <th scope="row">Channel interpretation</th>
   <td><code>"speakers"</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Inheritance">상속</h2>

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

<p>{{InheritanceDiagram}}</p>

<h2 id="Constructor">생성자</h2>

<dl>
 <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
 <dd><code>AnalyserNode</code> 객체의 새로운 인스턴스를 생성합니다.</dd>
</dl>

<h2 id="Properties">속성</h2>

<p><em>부모인 {{domxref("AudioNode")}}로부터 속성을 상속받습니다</em>.</p>

<dl>
 <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
 <dd>주파수 영역을 결정하는 데 사용될 FFT(<a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">Fast Fourier Transform</a>)의 사이즈를 나타내는 unsigned long 값입니다.</dd>
 <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
 <dd>FFT 사이즈 값의 절반인 unsigned long 값입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.</dd>
 <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
 <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.</dd>
 <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
 <dd>unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 <code>getByteFrequencyData()</code>를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.</dd>
 <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
 <dd>마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다 — 기본적으로, 이것은 시간에 대한 값 사이의 전환을 더 매끄럽게 만듭니다.</dd>
</dl>

<h2 id="Methods">메서드</h2>

<p><em>부모인 {{domxref("AudioNode")}}로부터 메서드를 상속받습니다</em>.</p>

<dl>
 <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
 <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.</dd>
 <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
 <dd>전달된 {{domxref("Uint8Array")}} (unsiged byte array) 내로 현재 주파수 데이터를 복사합니다.</dd>
 <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
 <dd>전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd>
 <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
 <dd>전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.</dd>
</dl>

<h2 id="Examples">예제</h2>

<div class="note">
<p><strong>참고</strong>: 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API 시각화</a> 가이드를 참고하세요.</p>
</div>

<h3 id="Basic_usage">기본 사용</h3>

<p>다음의 예제는 <code>AnalyserNode</code>를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> 데모를 확인하세요 (관련된 코드를 보려면 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 라인 128–205</a>를 참고하세요).</p>

<pre class="brush: 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 &lt; 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();
</pre>

<h2 id="Specifications">명세</h2>

{{Specifications}}

<h2 id="Browser_compatibility">브라우저 호환성</h2>

<p>{{Compat}}</p>

<h2 id="See_also">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a></li>
</ul>