웹에서 오디오와 동영상 재생 동기화

Web Audio API를 사용하면 AV 동기화를 올바로 수행할 수 있습니다.

François Beaufort
François Beaufort

AudioContext 인스턴스의 outputLatency 속성은 오디오 하드웨어의 출력 지연 시간 추정치 (예: 블루투스 이어폰 또는 외부 USB 오디오 인터페이스)를 제공합니다. 이 속성은 다음과 같은 경우에 유용합니다.

  • 기존 오디오 자료와 새로 녹음한 자료를 동기화합니다. (음악 프로덕션 시나리오)
  • 웹 오디오 출력과 기타 미디어 (예: 동영상 또는 MIDI 재생)를 동기화합니다.

WebCodecs 데모 (소스)에서 WebCodecs APIMediaStream를 원시 동영상 및 오디오 데이터로 디코딩한 다음 Audio Worklet에서 가져온 오디오 데이터와 함께 HTML <canvas> 요소로 재생됩니다. outputLatency 속성을 사용하면 데모가 지정된 오디오 타임스탬프가 사용자의 귀에 도달하는 시점을 확인한 후 이에 맞게 동영상 프레임을 적절하게 그릴 수 있습니다.

볼륨, 오디오 버퍼 상태, 총 출력 지연 시간에 대한 오디오 컨트롤과 AudioContext.outputLatency를 사용하는 체크박스가 있는 삽입된 동영상의 데모 스크린샷

직접 사용해 보고 좋아하는 블루투스 헤드셋으로 동영상을 재생하고(⬇) 새가 나타날 때까지 기다린 다음( {9/}️) 체크박스로 전환하여 오디오 재생의 변화를 확인합니다. 총 출력 지연 시간 값은 실시간으로 업데이트됩니다.

AudioContext outputLatency

브라우저 지원

  • 102
  • 102
  • 70
  • x

소스

Unsplash와히드 케인의 히어로 이미지