Waveform Oscilloscope

이 실험에 대해

Web Audio API의 OscillatorNode는 네 가지 기본 파형을 생성한다. 사인파는 단일 주파수의 순수한 소리, 사각파는 홀수 배음이 풍부한 날카로운 소리, 톱니파는 모든 배음을 포함한 밝은 소리, 삼각파는 사인파에 가까운 부드러운 소리를 낸다.AnalyserNode를 통해 시간 도메인(파형)과 주파수 도메인(FFT) 데이터를 실시간으로 추출하여 Canvas에 그린다.

핵심 코드

const ctx = new AudioContext()
const osc = ctx.createOscillator()
const analyser = ctx.createAnalyser()
const gain = ctx.createGain()

analyser.fftSize = 2048          // 분석 해상도
osc.type = 'sine'                // 파형 타입
osc.frequency.value = 440        // A4 = 440 Hz

// 신호 체인: osc → analyser → gain → 스피커
osc.connect(analyser)
analyser.connect(gain)
gain.connect(ctx.destination)
osc.start()

// 매 프레임 파형 데이터 읽기
const data = new Uint8Array(analyser.frequencyBinCount)
analyser.getByteTimeDomainData(data) // 시간 도메인
analyser.getByteFrequencyData(data)  // 주파수 도메인