무료 오디오 스펙트럼 분석기

사용 방법

오디오 스펙트럼 분석기는 Web Audio API의 AnalyserNode를 사용해 전적으로 브라우저에서 실행되며, 파일이나 마이크의 오디오 데이터에 실시간 FFT(고속 푸리에 변환)를 계산합니다. 모든 프레임은 직접 작성한 Canvas 2D 코드로 그려지며, 시각화 라이브러리는 사용하지 않고 오디오는 기기를 떠나지 않습니다.

1. 1
   오디오 디코딩 및 라우팅

   파일을 불러오면 Web Audio API가 이를 AudioBuffer로 디코딩하고 MediaElementAudioSourceNode를 거쳐 AnalyserNode로 보냅니다. 마이크 입력의 경우 getUserMedia()가 스트림을 캡처해 대신 MediaStreamAudioSourceNode로 보내며, 원시 신호를 볼 수 있도록 에코 제거, 잡음 억제, 자동 게인을 모두 끕니다.
2. 2
   AnalyserNode가 매 프레임 FFT 실행

   매 애니메이션 프레임마다(requestAnimationFrame 사용) 코드가 getFloatFrequencyData()를 호출해 현재 FFT 크기 스펙트럼을 dBFS로 읽고, getFloatTimeDomainData()로 원시 파형 샘플을 읽습니다. FFT 크기는 2048에서 16384 빈까지 설정할 수 있으며, 44.1 kHz에서 빈당 약 2.7 Hz까지 세밀한 주파수 해상도를 제공합니다.
3. 3
   Canvas 2D로 선택한 화면 렌더링

   분석 화면은 FFT 빈을 로그 주파수(20 Hz–20 kHz) X축과 dBFS Y축에 매핑해 스펙트럼을 채워진 선으로 그리고, 서서히 감소하는 피크 유지선을 겹쳐 표시합니다. 주요 주파수는 피크 빈 주변의 포물선 보간으로 정확히 찾은 뒤 가장 가까운 평균율 음(A4=440 Hz)으로 변환하고 센트 편차를 표시합니다. 스펙트로그램 화면은 매 프레임 캔버스를 왼쪽으로 1픽셀 스크롤하고 inferno 스타일 색상 램프로 새 열을 그립니다. 아트 화면은 바이트 해상도의 주파수 또는 시간 영역 데이터를 사용해 막대, 파형, 원형 장식 모드를 표현합니다.
4. 4
   Canvas와 MediaRecorder로 내보내기

   PNG 저장은 canvas.toBlob()을 호출해 현재 프레임을 인코딩합니다. 영상 녹화는 canvas.captureStream(30)과 MediaStreamAudioDestinationNode의 오디오 탭을 결합해 MediaRecorder로 보내 WebM 또는 MP4를 만듭니다. WAV 내보내기는 외부 인코더 없이 DataView를 사용해 AudioBuffer에서 16비트 PCM RIFF 파일을 직접 인코딩합니다.

관련 도구