AnalyserNode: getFloatFrequencyData() 메서드
=========================================

`AnalyserNode` 인터페이스의 **`getFloatFrequencyData()`** 메서드는 전달된 `Float32Array` (en-US) 배열 내로 현재 주파수 데이터를 복사합니다. 이 배열은 샘플, 즉 어느 한 시점에 신호의 강도입니다.

배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, `48000` Hz 샘플 레이트에 대해서, 배열의 마지막 원소는 `24000` Hz에 대한 데시벨 값을 나타냅니다.

정밀성이 떨어지더라도 성능이 더 중요하다면 `AnalyserNode.getByteFrequencyData()`를 사용하세요. `Uint8Array` (en-US)에서 동작합니다.

구문
--


```js
getFloatFrequencyData(array)
```

### 매개변수

`array`

주파수 영역 데이터가 복사될 `Float32Array` (en-US). 소리가 없는 모든 샘플의 값은 `-Infinity`입니다. 배열의 요소 수가 `AnalyserNode.frequencyBinCount`보다 더 적으면, 초과한 요소들은 탈락됩니다. 반대로, 배열의 요소 수가 더 크면, 초과한 요소들은 무시됩니다.

### 반환 값

없음 (`undefined`).

예제
--


```js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array의 길이가 frequencyBinCount와 같아야 함
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// getFloatFrequencyData()가 반환한 데이터로 Float32Array 채우기
analyser.getFloatFrequencyData(myDataArray);
```

### 스펙트럼 그리기

다음의 예제는 `AudioContext`를 사용해서 `MediaElementAudioSourceNode` (en-US)를 `AnalyserNode`에 연결하는 기본 방법을 보입니다. 오디오가 재생되는 동안, 예제에서는 `requestAnimationFrame()`으로 주파수 데이터를 반복해 수집하고, "Winamp 막대그래프 스타일"을 `<canvas>` 요소에 그립니다.

보다 완전한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요. (app.js의 108-193번째 줄에서 관련 코드 확인)


```html
<!doctype html>
<body>
  <script>
 const audioCtx = new AudioContext();

 //오디오 소스 생성
 //여기서는 오디오 파일을 사용하지만, 마이크 입력같은 것도 가능
 const audioEle = new Audio();
 audioEle.src = "my-audio.mp3"; //여기에 파일명 입력
 audioEle.autoplay = true;
 audioEle.preload = "auto";
 const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

 //분석 노드 생성
 const analyserNode = audioCtx.createAnalyser();
 analyserNode.fftSize = 256;
 const bufferLength = analyserNode.frequencyBinCount;
 const dataArray = new Float32Array(bufferLength);

 //오디오 노드 네트워크 설정
 audioSourceNode.connect(analyserNode);
 analyserNode.connect(audioCtx.destination);

 //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() {
 //다음 그리기 예약
 requestAnimationFrame(draw);

 //스펙트럼 데이터 가져오기
 analyserNode.getFloatFrequencyData(dataArray);

 //검은색 배경 그리기
 canvasCtx.fillStyle = "rgb(0, 0, 0)";
 canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

 //스펙트럼 그리기
 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();
 </script>
</body>
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-analysernode-getfloatfrequencydata |

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

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

같이 보기
-----

* Web Audio API 사용하기