🔊 Web Audio API 완벽 가이드

// 브라우저 호환성을 고려한 AudioContext 초기화 및 상태 확인
const AudioContextClass = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContextClass();

console.log('초기 오디오 컨텍스트 상태:', audioCtx.state); // 'suspended' 또는 'running'
console.log('샘플 레이트(Sample Rate):', audioCtx.sampleRate, 'Hz'); // 예: 44100 또는 48000
console.log('현재 재생 시간(Current Time):', audioCtx.currentTime, '초');

// 오디오 그래프 파이프라인 구성 예시
class AudioPipeline {
  constructor(context) {
    this.ctx = context;
    this.source = null;
    this.gainNode = this.ctx.createGain();
    this.analyser = this.ctx.createAnalyser();
    
    // 기본 라우팅 연결: Source -> Gain -> Analyser -> Destination
    this.gainNode.connect(this.analyser);
    this.analyser.connect(this.ctx.destination);
  }

  setVolume(value) {
    // 0.0 ~ 1.0 사이의 값 설정 (지수 곡선 적용으로 자연스러운 볼륨 조절 가능)
    this.gainNode.gain.setValueAtTime(value, this.ctx.currentTime);
  }
}

async function loadAndPlayAudio(url, audioCtx) {
  try {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);

    const source = audioCtx.createBufferSource();
    source.buffer = audioBuffer;
    
    // 루프 설정 및 재생 속도 설정 (0.5배속 ~ 2.0배속)
    source.loop = true;
    source.playbackRate.setValueAtTime(1.0, audioCtx.currentTime);

    source.connect(audioCtx.destination);
    source.start(0); // 즉시 재생
    
    return source;
  } catch (error) {
    console.error('오디오 버퍼 로드 실패:', error);
  }
}

const gainNode = audioCtx.createGain();
gainNode.gain.setValueAtTime(0.7, audioCtx.currentTime);

const filterNode = audioCtx.createBiquadFilter();
filterNode.type = 'lowpass';
filterNode.frequency.setValueAtTime(1200, audioCtx.currentTime); // 1.2kHz 이상 주파수 감쇠
filterNode.Q.setValueAtTime(3.0, audioCtx.currentTime); // 레조넌스(공진) 설정

// 노드 연결: Source -> GainNode -> BiquadFilterNode -> Destination
// source.connect(gainNode);
// gainNode.connect(filterNode);
// filterNode.connect(audioCtx.destination);

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256; // 주파수 해상도 설정 (2의 제곱수: 32 ~ 32768)
analyser.smoothingTimeConstant = 0.85; // 애니메이션 부드러움 정도 (0.0 ~ 1.0)

const bufferLength = analyser.frequencyBinCount; // fftSize의 절반 (128)
const dataArray = new Uint8Array(bufferLength);

function drawVisualizer() {
  requestAnimationFrame(drawVisualizer);

  // 현재 주파수 데이터를 배열에 채움 (0 ~ 255 값)
  analyser.getByteFrequencyData(dataArray);

  // 캔버스 렌더링 예시 로직
  // ctx.clearRect(0, 0, canvas.width, canvas.height);
  // dataArray 값을 순회하며 막대그래프 렌더링 수행
  for (let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i];
    // drawBar(i, barHeight);
  }
}

drawVisualizer();

const panner = audioCtx.createPanner();

panner.panningModel = 'HRTF'; // 머리전달함수 사용으로 입체감 극대화
panner.distanceModel = 'inverse';
panner.refDistance = 1;
panner.maxDistance = 10000;
panner.rolloffFactor = 1;

// 소스의 3차원 공간 좌표 설정
panner.positionX.setValueAtTime(5.0, audioCtx.currentTime); // 우측에 위치
panner.positionY.setValueAtTime(0.0, audioCtx.currentTime);
panner.positionZ.setValueAtTime(-2.0, audioCtx.currentTime); // 전방에 위치

// 리스너(플레이어) 위치 설정
const listener = audioCtx.listener;
if (listener.positionX) {
  listener.positionX.setValueAtTime(0, audioCtx.currentTime);
  listener.positionY.setValueAtTime(0, audioCtx.currentTime);
  listener.positionZ.setValueAtTime(0, audioCtx.currentTime);
} else {
  listener.setPosition(0, 0, 0);
}

const playButton = document.querySelector('#play-btn');

playButton.addEventListener('click', async () => {
  if (audioCtx.state === 'suspended') {
    await audioCtx.resume();
    console.log('오디오 컨텍스트가 성공적으로 활성화되었습니다:', audioCtx.state);
  }
  
  // 이후 오디오 재생 로직 수행
  // playSound();
});