about://tracing 및 Audion (Chrome DevTools의 WebAudio 확장 프로그램)을 사용하여 Chrome에서 웹 오디오 앱의 성능을 프로파일링하는 방법을 알아보세요.
이 문서에 도달한 이유는 아마도 Web Audio API를 사용하는 앱을 개발 중이고 출력에서 팝핑 노이즈와 같은 예기치 않은 결함이 발생했거나 예상치 못한 소리가 들리기 때문일 것입니다. 이미 crbug.com 토론에 참여하고 있으며 Chrome 엔지니어가 "추적 데이터"를 업로드하거나 그래프 시각화를 살펴보라고 요청했을 수 있습니다.
문제를 파악하고 궁극적으로 근본적인 문제를 해결할 수 있도록 관련 정보를 얻는 방법을 알아보세요.
웹 오디오 프로파일링 도구
웹 오디오를 프로파일링할 때 도움이 되는 두 가지 도구(about://tracing 및 Chrome DevTools의 WebAudio 확장 프로그램)가 있습니다.
about://tracing은 언제 사용하나요?
알 수 없는 '결함'이 발생할 때입니다. 추적 도구로 앱을 프로파일링하면 다음과 같은 통계를 얻을 수 있습니다.
- 서로 다른 스레드에서 특정 함수 호출에 사용된 시간 슬라이스
- 타임라인 뷰의 오디오 콜백 타이밍
일반적으로 예기치 않은 오디오 결함을 일으킬 수 있는 누락된 오디오 콜백 기한 또는 대규모 가비지 컬렉션을 보여줍니다. 이 정보는 근본적인 문제를 이해하는 데 유용하므로 Chromium 엔지니어는 특히 로컬 재현이 불가능한 경우 이 정보를 요청하는 경우가 많습니다. 추적에 관한 일반적인 안내를 검토하세요.
웹 오디오 DevTools 확장 프로그램은 언제 사용하나요?
오디오 그래프를 시각화하고 오디오 렌더러가 실시간으로 어떻게 실행되는지 모니터링하려는 경우입니다. 오디오 스트림을 생성하고 합성하는 AudioNode 객체의 네트워크인 오디오 그래프는 복잡해지는 경우가 많지만 그래프 토폴로지는 설계상 불투명합니다. (Web Audio API에는 노드/그래프 인트로스펙션을 위한 기능이 없습니다.) 그래프에 몇 가지 변경사항이 발생하고 이제 소리가 들리지 않습니다. 이제 듣기를 통해 디버깅할 차례입니다. 쉬운 일은 아니며 오디오 그래프가 클수록 더 어려워집니다. 웹 오디오 DevTools 확장 프로그램은 그래프를 시각화하여 도움을 줄 수 있습니다.
이 확장 프로그램을 사용하면 지정된 렌더링 예산(예: 48KHz에서 약 2.67ms)에 따라 웹 오디오 렌더러가 실행되는 방식을 나타내는 렌더링 용량의 실행 추정치를 모니터링할 수 있습니다. 용량이 100%에 가까워지면 렌더러가 지정된 예산 내에서 작업을 완료하지 못하므로 앱에서 결함이 발생할 가능성이 높습니다.
about://tracing 사용
최상의 결과를 얻으려면 다른 탭과 창을 모두 닫고 확장 프로그램을 사용 중지하세요. 또는 Chrome의 새 인스턴스를 실행하거나 다른 배포 채널 (예: 베타 또는 카나리아)의 다른 빌드를 사용할 수 있습니다. 브라우저가 준비되면 다음 단계를 따르세요.
- 탭에서 애플리케이션 (웹페이지)을 엽니다.
- 다른 탭을 열고
about://tracing으로 이동합니다. - 녹화 버튼을 누르고 수동으로 설정 선택 을 선택합니다.
- 녹화 카테고리 및 기본적으로 사용 중지된 카테고리 섹션에서 없음 버튼을 누릅니다.
- 녹화 카테고리 섹션에서 다음을 선택합니다.
audioblink_gcmediav8.execute(AudioWorkletJS 코드 성능에 관심이 있는 경우)webaudio
- 기본적으로 사용 중지된 카테고리 섹션에서 다음을 선택합니다.
audio-worklet(AudioWorklet스레드가 시작되는 위치에 관심이 있는 경우)webaudio.audionode(AudioNode별로 세부 추적이 필요한 경우)
- 하단의 녹화 버튼을 누릅니다.
- 애플리케이션 탭으로 돌아가서 문제를 트리거한 단계를 다시 실행합니다.
- 추적 데이터가 충분하면 추적 탭으로 돌아가서 중지 를 누릅니다.
추적 탭에서 결과를 시각화합니다.
저장 을 눌러 추적 데이터를 저장합니다.
추적 데이터를 분석하는 방법
추적 데이터는 Chrome의 웹 오디오 엔진이 오디오를 렌더링하는 방식을 시각화합니다. 렌더러에는 운영체제 모드 와 Worklet 모드 라는 두 가지 렌더링 모드가 있습니다. 각 모드는 서로 다른 스레딩 모델을 사용하므로 추적 결과도 다릅니다.
운영체제 모드
운영체제 모드에서 AudioOutputDevice 스레드는
모든 웹 오디오 코드를 실행합니다. AudioOutputDevice는 오디오 하드웨어 클록에 의해 구동되는 브라우저의 오디오 서비스에서 비롯된 실시간 우선순위 스레드입니다. 이 레인에서 추적 데이터의 불규칙성이 보이면 기기의 콜백 타이밍이 지터링될 수 있음을 의미합니다. Linux와 Pulse Audio의 조합은 이 문제가 있는 것으로 알려져 있습니다.
자세한 내용은 다음 Chromium 문제를 참고하세요. #825823, #864463.
Worklet 모드
`
AudioOutputDevice`에서 `AudioWorklet` 스레드로의 스레드 점프가 특징인 Worklet 모드에서는 두 스레드 레인에서 잘 정렬된 추적을 볼 수 있습니다. Worklet이 활성화되면 모든 웹 오디오 작업이 AudioWorklet 스레드에 의해 렌더링됩니다. 이 스레드는 실시간 우선순위가 아닙니다.
여기서 일반적인 불규칙성은 가비지 컬렉션 또는 누락된 렌더링 기한으로 인해 발생하는 큰 블록입니다. 두 경우 모두 오디오 스트림에 결함이 발생합니다.
두 경우 모두 이상적인 추적 데이터는 잘 정렬된 오디오 기기 콜백 호출과 지정된 렌더링 예산 내에서 잘 완료되는 렌더링 작업이 특징입니다. 두 스크린샷은 이상적인 추적 데이터의 좋은 예입니다.
실제 예시에서 학습
예시 1: 렌더링 예산을 초과하는 렌더링 작업
아래 스크린샷 (Chromium 문제 #796330)은
의 코드가 너무 오래 걸리고
지정된 렌더링 예산을 초과하는 일반적인 예입니다.AudioWorkletProcessor 콜백 타이밍은 잘 작동하지만 Web Audio API의 오디오 처리 함수 호출이 다음 기기 콜백 전에 작업을 완료하지 못했습니다.
옵션:
AudioNode인스턴스를 더 적게 사용하여 오디오 그래프의 워크로드를 줄입니다.AudioWorkletProcessor에서 코드의 워크로드를 줄입니다.AudioContext의 기본 지연 시간을 늘립니다.
예시 2: Worklet 스레드의 상당한 가비지 컬렉션
운영체제 오디오 렌더링 스레드와 달리 가비지 컬렉션은 Worklet 스레드에서 관리됩니다. 즉, 코드가 메모리 할당/할당 해제(예: 새 배열)를 실행하면 결국 스레드를 동기식으로 차단하는 가비지 컬렉션이 트리거됩니다. 웹 오디오 작업 및 가비지 컬렉션의 워크로드가 지정된 렌더링 예산보다 크면 오디오 스트림에 결함이 발생합니다. 다음 스크린샷은 이 사례의 극단적인 예입니다.
옵션:
- 메모리를 미리 할당하고 가능한 한 재사용합니다.
SharedArrayBuffer를 기반으로 다양한 디자인 패턴을 사용합니다. 완벽한 해결책은 아니지만 여러 웹 오디오 앱에서SharedArrayBuffer와 유사한 패턴을 사용하여 집약적인 오디오 코드를 실행합니다. 예:
예시 3: AudioOutputDevice의 지터링 오디오 기기 콜백
오디오 콜백의 정확한 타이밍은 웹 오디오에서 가장 중요한 요소입니다. 이는 시스템에서 가장 정확한 시계여야 합니다. 운영체제 또는 오디오 하위 시스템이 안정적인 콜백 타이밍을 보장할 수 없는 경우 후속 작업이 모두 영향을 받습니다. 다음 이미지는 지터링 오디오 콜백의 예입니다. 이전 두 이미지와 비교하면 각 콜백 간의 간격이 크게 다릅니다.
옵션:
-
latencyHint옵션을 조정하여 시스템 오디오 콜백 버퍼 크기를 늘립니다. - 문제를 발견하면 추적 데이터와 함께 crbug.com에서 문제를 신고하세요.
웹 오디오 DevTools 확장 프로그램 사용
Web Audio API를 위해 특별히 설계된 DevTools 확장 프로그램을 사용할 수도 있습니다. 추적 도구와 달리 그래프 및 성능 측정항목을 실시간으로 검사할 수 있습니다.
이 확장 프로그램은 Chrome 웹 스토어에서 설치해야 합니다.
설치 후 Chrome DevTools를 열고 상단 메뉴에서 '웹 오디오'를 클릭하여 패널에 액세스합니다.
웹 오디오 패널에는 컨텍스트 선택기, 속성 검사기, 그래프 시각화 도구, 성능 모니터의 네 가지 구성요소가 있습니다.
컨텍스트 선택기
페이지에 여러 BaseAudioContext 객체가 있을 수 있으므로 이 드롭다운 메뉴를 사용하면 검사할 컨텍스트를 선택할 수 있습니다. 왼쪽의 휴지통 아이콘을 클릭하여 가비지 컬렉션을 수동으로 트리거할 수도 있습니다.
속성 검사기
측면 패널에는 사용자가 선택한 컨텍스트 또는 AudioNode의 다양한 속성이 표시됩니다. AudioParam에서 동적 값을 검사하는 것은 지원되지 않습니다.
그래프 시각화 도구
이 뷰는 사용자가 선택한 컨텍스트의 현재 그래프 토폴로지를 렌더링합니다. 이 시각화는 실시간으로 동적으로 변경됩니다. 시각화에서 요소를 클릭하면 속성 검사기에서 세부정보를 검사할 수 있습니다.
성능 모니터
하단의 상태 표시줄은 선택한 BaseAudioContext
이 실시간으로 실행되는 AudioContext인 경우에만 활성화됩니다. 이 막대는 선택한 AudioContext의 순간 오디오 스트림 품질을 보여주며 매초 업데이트됩니다. 다음 정보를 제공합니다.
콜백 간격 (ms): 콜백 간격의 가중 평균 또는 분산을 표시합니다. 이상적으로 평균은 안정적이어야 하고 분산은 0에 가까워야 합니다. 분산이 크면 시스템 수준 오디오 콜백 함수의 타이밍이 불안정하여 오디오 스트림 품질이 저하될 수 있음을 의미합니다. (예시 3 참고)
렌더링 용량 (퍼센트): 용량이 100%에 가까워지면 렌더러가 지정된 렌더링 예산에 비해 너무 많은 작업을 실행하고 있음을 의미하므로 작업을 줄이는 것이 좋습니다 (예: 그래프에서
AudioNodes객체를 더 적게 사용).
휴지통 아이콘을 클릭하여 가비지 컬렉터를 수동으로 트리거할 수 있습니다.
기존 WebAudio DevTools 패널
이제 확장 프로그램이 Chrome 웹 오디오팀에서 권장하는 방법이지만 기존 WebAudio DevTools 패널도 사용할 수 있습니다. 이 패널에 액세스하려면 DevTools의 오른쪽 상단에 있는 '점 3개' 메뉴를 클릭한 다음 **도구 더보기** , **WebAudio** 로 이동합니다.
결론
오디오 디버깅은 어렵습니다. 브라우저에서 오디오를 디버깅하는 것은 훨씬 더 어렵습니다. 하지만 이러한 도구는 웹 오디오 코드의 실행 방식에 관한 유용한 통계를 제공하여 어려움을 완화할 수 있습니다. 하지만 경우에 따라 Chrome 또는 확장 프로그램에서 문제를 발견할 수 있습니다. crbug.com 또는 확장 프로그램 문제 추적기에서 버그를 신고하세요.