Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

PhoneGap 앱에서 HTML5 오디오가 재생되지 않을 때 해결 방법

PhoneGap 앱에서 HTML5 오디오 재생 문제

PhoneGap(코르도바) 앱에서 HTML5 오디오가 정상적으로 재생되지 않는 경우, 코드상의 문제보다는 보안 정책(Content Security Policy) 때문일 가능성이 높습니다.

오디오 태그의 속성과 오디오 소스 경로를 모두 올바르게 설정했는데도 소리가 나지 않는다면, 아래의 해결 방법을 순서대로 적용해 보세요.

1. index.html에 콘텐츠 보안 정책(CSP) 메타 태그 추가

index.html 파일의 <head> 영역에 다음과 같은 Content-Security-Policy 메타 태그를 추가합니다. 특히 media-src 항목이 오디오 및 미디어 파일 로딩 권한을 제어하므로 반드시 포함해야 합니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'
    https://appvipswi.easwi.it; script-src 'self' 'unsafe-inline'; media-src 'self'">

외부 서버의 오디오 파일을 스트리밍하는 경우에는 해당 도메인 주소를 media-src에 함께 명시해 주는 것이 좋습니다.

2. AndroidManifest.xml에 필수 권한 추가

안드로이드 플랫폼에서 오디오 기능이 정상 동작하려면 매니페스트 파일에 관련 권한이 선언되어 있어야 합니다. AndroidManifest.xml 파일에 다음 세 가지 권한을 추가하세요.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  • WRITE_EXTERNAL_STORAGE: 외부 저장소의 오디오 파일 접근 권한
  • RECORD_AUDIO: 마이크 등 오디오 하드웨어 사용 권한
  • MODIFY_AUDIO_SETTINGS: 볼륨 등 오디오 설정 변경 권한

정리

CSP 메타 태그와 안드로이드 권한 설정을 모두 완료한 후 앱을 다시 빌드하고 실행하면 HTML5 오디오가 정상적으로 재생됩니다. 그래도 문제가 지속된다면 오디오 파일 경로와 코덱 호환성(MP3, AAC 등)도 함께 점검해 보시기 바랍니다.