AnalyserNode.fftSize

AnalyserNode 인터페이스의 fftSize 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 고속 푸리에 변환(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.

구문

var curValue = analyserNode.fftSize;
analyserNode.fftSize = newValue;

값

FFT의 window 사이즈를 나타내는 샘플의 수로 주어지는 unsigned 정수입니다. 값이 높을수록 주파수 영역의 자세함이 커지는 결과를 낳으나 시간 영역에서의 자세함은 떨어집니다.

반드시 $2^5$ 와 $2^15$ 사이의 2의 제곱이여야만 합니다. 즉 다음 중 하나여야 합니다: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 그리고 32768. 기본값은 2048입니다.

참고: 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, IndexSizeError라는 이름의 DOMException (en-US)이 발생합니다.

다음의 예제는 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);

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

function draw() {

      drawVisual = requestAnimationFrame(draw);

      analyser.getByteTimeDomainData(dataArray);

      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

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

      canvasCtx.beginPath();

      var sliceWidth = WIDTH * 1.0 / bufferLength;
      var x = 0;

      for(var i = 0; i < bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var y = v * 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 # dom-analysernode-fftsize

브라우저 호환성

BCD tables only load in the browser

같이 보기

Web Audio API 사용하기