태그 자료실 2890

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

9년 전

방법 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,621	DIV 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
2,620	urlencode(), base64 encode() 함수
2,619	PHP로 IE버전 체크하는 방법(Trident값사용)
2,618	HTML5 관련 유용한 레퍼(참조) 사이트
2,617	[HTML5] Video & Audio
2,616	HTML5 오디오 곡 목록 재생
	HTML5 오디오 404 오류시 다른 파일 재생
2,614	HTML5 오디오 이벤트리스너 onerror
2,613	JavaScript Audio 객체
2,612	HTML5 Audio 2채널 재생
2,611	HTML5 Audio 2채널 재생 + 재생완료 리스너
2,610	HTML5 음악 볼륨 조절
2,609	HTML5 음악 볼륨 조절
2,608	HTML5 오디오 자동재생
2,607	HTML5 오디오 반복 재생
2,606	HTML5 오디오 이벤트리스너
2,605	클릭 한번으로 고유주소(URL) 복사되게 하는 방법
2,604	클릭시 url 복사하기
2,603	CSS Hover 를 이용한 깔끔한 페이징
2,602	스크롤해도 상단에 고정되는 메뉴 만들기
2,601	[정규표현식] php 문자열에서 숫자만 추출
2,600	HTML5 Video/Audio CurrentTime/Ended 문제점
2,599	audio 엘리먼트의 onplay 이벤트 처리 시 주의사항
2,598	PHP - $ SERVER 환경변수
2,597	Example #1 print 예제
2,596	php `/`기준으로 자르기
2,595	php 문자열 함수
2,594	주소등 인코딩해서 보내기
2,593	jquery load() 메소드 (비동기 웹페이지 로드)
2,592	[Ajax] ajax 예제2