피드로 돌아가기
敲水杯奏音樂：用瀏覽器麥克風做互動聲音
Dev.toDev.to
Frontend

敲水杯奏音樂：用瀏覽器麥克風做互動聲音

Web Audio API와 FFT를 활용한 실시간 주파수 분석 기반 인터랙티브 시스템 구현

張旭豐2026년 6월 28일2분beginner

AI 요약

Context

별도의 서버나 전문 하드웨어 없이 브라우저 환경만으로 실시간 소리 분석 및 시각화를 구현하고자 하는 요구사항 분석. 오디오 데이터의 정성적 특징을 정량적 주파수 값으로 변환하여 사용자 피드백으로 연결하는 경량 구조 설계.

Technical Solution

  • getUserMedia API를 통한 마이크 입력 스트림의 실시간 확보 및 디지털 데이터화
  • AudioContext와 AnalyserNode를 연결한 오디오 프로세싱 파이프라인 구축
  • Fast Fourier Transform(FFT) 알고리즘을 통한 시간 영역의 오디오 신호를 주파수 영역으로 변환
  • fftSize 2048 설정을 통한 주파수 해상도 확보 및 frequencyBinCount 기반의 데이터 버퍼 생성
  • maxIndex와 sampleRate 연산을 통한 지배적 주파수(Dominant Frequency) 산출 로직 적용
  • requestAnimationFrame을 활용한 60FPS 기반의 저지연 시각적 피드백 루프 구현

실천 포인트

1. 실시간 오디오 분석 시 `fftSize` 조정을 통한 시간 해상도와 주파수 해상도 간의 Trade-off 검토

2. `AudioContext` 활성화를 위한 사용자 인터랙션(Click 이벤트 등) 필수 구현 확인

3. 환경 소음 제거를 위한 `maxVal` 임계값(Threshold) 설정으로 False Positive 방지

태그

#FFT#Real-time Analysis#Client-side Processing#Web Audio API#DSP
원문 읽기