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

Jmnote (토론 | 기여)님의 2015년 3월 7일 (토) 13:05 판

1 개요

HTML5 Audio 404 오류 대안
HTML5 오디오 파일 없을 때 대체방안
HTML5 오디오 404 오류시 다른 파일 재생
  • audio 태그에 연결되는 src에 해당 파일이 없을 때 404 오류가 발생한다.
  • 해당 파일이 없을 때 다른 파일로 대체하여 재생하고 싶다.
  • audio에 source를 추가하면 브라우저가 알아서 다음 source를 재생한다.

2 예시

<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>
  • 실행결과 (콘솔)
audio-error-skip.php:1 GET http://zetawiki.com/js/not-exist.ogg
→ 오류는 발생하지만 버튼을 눌러보면 B-major.ogg가 재생된다.

3 같이 보기

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}