태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

HTML5 오디오 404 오류시 다른 파일 재생

8년 전

방법 1: source 추가
audio에 source를 추가하면 브라우저가 알아서 다음 source를 재생한다.
테스트환경: (동작함) 크롬 40.0, (동작안함) 인터넷익스플로러 11.0

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
        $('.play-myaudio').click(function() {
                $('#myaudio')[0].play();
        });
});
</script>

<audio id="myaudio">
        <source src='not-exist.ogg'>
        <source src="http://upload.wikimedia.org/wikipedia/commons/f/fa/B-major.ogg">
</audio>

<button class='play-myaudio'>오디오 재생</button>
실행결과 (크롬 40.0 콘솔)

audio-error-skip.php:1 GET http://zetawiki.com/ex/js/not-exist.ogg
→ 오류는 발생하지만 버튼을 눌러보면 B-major.ogg가 재생된다.

방법 2: onerror 추가

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
        var myaudio = new Audio();
        myaudio.onended = function() {
                console.log( '재생 완료' );
        }
        myaudio.onerror = function() {
                console.log( this.src + ' 파일 없어서 대신 POP.WAV를 재생' );
                var alternative_src = 'http://free-sounds.net/sound-files/special-effects/POP.WAV';
                if( this.src == alternative_src) {
                        console.log( 'POP.WAV도 없음!' );
                        return;
                }
                this.src = alternative_src;
                this.play();
        }

        play_audio = function(url) {
                console.log( url + ' 파일 재생' );
                myaudio.src = url;
                myaudio.play();
        };
});
</script>

<button onclick="play_audio('not-exist.wav');">not-exist.wav 오디오 재생</button>
<button onclick="play_audio('http://free-sounds.net/sound-files/special-effects/ANGELS_F.WAV');">ANGELS_F.WAV 오디오 재생</button>

추천 목록

번호	제목
2,645	php set time limit 함수 - 타임아웃 설정
2,644	Setting .htaccess to allow PHP to be accessed with .xml extension
2,643	jQuery API: Manipulation, Events, Effects, Internals, Utilities
2,642	다운로드 횟수 제한 스크립트
2,641	자바스크립트 타이머 - setTimeout, setInterval, clearInterval 함수
2,640	jQuery AJAX 로그인 구현
2,639	PHP 세션 로그인 구현
2,638	PHP 쿠키 로그인 구현
2,637	jQuery에서 json 변수 사용(활용)법
2,636	AJAX 반복처리 및 설명 예제
2,635	[Android] Intent 활용 예시
2,634	[php] 배열을 임의의 순서로 섞는 shuffle 함수
2,633	jQuery API - 속성(CSS), 추출
2,632	DIV 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
2,631	urlencode(), base64 encode() 함수
2,630	PHP로 IE버전 체크하는 방법(Trident값사용)
2,629	HTML5 관련 유용한 레퍼(참조) 사이트
2,628	[HTML5] Video & Audio
2,627	HTML5 오디오 곡 목록 재생
	HTML5 오디오 404 오류시 다른 파일 재생
2,625	HTML5 오디오 이벤트리스너 onerror
2,624	JavaScript Audio 객체
2,623	HTML5 Audio 2채널 재생
2,622	HTML5 Audio 2채널 재생 + 재생완료 리스너
2,621	HTML5 음악 볼륨 조절
2,620	HTML5 음악 볼륨 조절
2,619	HTML5 오디오 자동재생
2,618	HTML5 오디오 반복 재생
2,617	HTML5 오디오 이벤트리스너
2,616	클릭 한번으로 고유주소(URL) 복사되게 하는 방법