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

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

프랑수아 보포르
프랑수아 보퍼

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

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

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

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

직접 사용해 보고, 좋아하는 블루투스 헤드셋 (⋮)으로 동영상을 재생하고, 새가 있으리라 예상 (위 참고) (위 참조)할 때까지 기다린 다음, 체크박스 (집)를 전환하여 오디오 재생의 변화를 살펴보세요. 총 출력 지연 시간 값이 실시간으로 업데이트됩니다.

AudioContext outputLatency

브라우저 지원

  • 102
  • 102
  • 70
  • x

소스

Unsplash에 있는 와히드 킨의 히어로 이미지