DOMException 오류의 주요 원인
오디오나 비디오 파일을 재생하려고 할 때 DOMException: 지원되는 소스를 찾을 수 없기 때문에 로드하지 못했습니다(No supported source was found)라는 오류가 발생한다면, 가장 흔한 원인은 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 정책 위반입니다.
브라우저는 보안상의 이유로 다른 도메인에서 제공되는 미디어 리소스에 대한 접근을 기본적으로 차단합니다. 따라서 외부 서버의 미디어 파일을 불러올 때는 서버 측과 클라이언트 측 모두에서 적절한 설정이 필요합니다.
해결 방법 1: crossOrigin 속성 설정
클라이언트 측에서는 비디오 요소에 crossOrigin 속성을 anonymous로 지정하여 교차 출처 요청을 허용할 수 있습니다.
video.crossOrigin = 'anonymous';
이 속성을 설정하면 브라우저가 익명(쿠키·인증 정보 없이) 방식으로 리소스를 요청하게 되며, 서버가 올바른 CORS 헤더를 반환하는 경우 정상적으로 미디어를 로드할 수 있습니다.
해결 방법 2: 서버 측 CORS 헤더 추가
미디어 파일을 호스팅하는 서버에서도 HTTP 응답 헤더에 아래와 같이 CORS 관련 설정을 포함해야 합니다. 이렇게 하면 이미지나 오디오, 비디오 등의 리소스가 함께 전달될 수 있습니다.
Access-Control-Allow-Origin: *
위 설정은 모든 출처에서의 접근을 허용하는 것으로, 개발 및 테스트 환경에 적합합니다. 실제 운영 환경에서는 보안을 위해 특정 도메인만 명시적으로 허용하는 것이 좋습니다.
Access-Control-Allow-Origin: https://example.com
해결 방법 3: jQuery의 html() 메서드 활용
동적으로 오디오 요소를 생성해야 하는 경우, jQuery의 html() 메서드를 사용하여 새로운 오디오 태그를 삽입하는 방법도 효과적입니다.
$('#audio').html('<audio autoplay><source src="demo.mp3"></audio>');이 방식은 기존 오디오 요소를 완전히 새로 만들어 교체하기 때문에, 이전에 발생했던 소스 로딩 문제나 상태 오류를 초기화할 수 있다는 장점이 있습니다.
추가 확인 사항
CORS 문제 외에도 다음 사항들을 점검해 보세요.
- 파일 경로 확인: src 속성에 지정된 미디어 파일 경로가 정확한지 확인합니다.
- 코덱 지원 여부: 브라우저가 해당 오디오/비디오 형식(MP3, MP4, OGG 등)을 지원하는지 확인합니다.
- MIME 타입 설정: 서버가 올바른 Content-Type 헤더(audio/mpeg, video/mp4 등)를 반환하는지 확인합니다.
위 방법들을 순서대로 적용하면 대부분의 '지원되는 소스를 찾을 수 없다'는 DOMException 오류를 해결할 수 있습니다.