AnalyserNode.fftSize

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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이 발생합니다.

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

브라우저 호환성

같이 보기

Web Audio API 사용하기