HTML5 오디오 곡 목록 재생

by JM note

HTML

<audio id="myaudio">
	<source id="main">
	<source src="http://upload.wikimedia.org/wikipedia/commons/3/34/A-major.ogg">
	<source src="http://upload.wikimedia.org/wikipedia/commons/f/fa/B-major.ogg">
	<source src="http://upload.wikimedia.org/wikipedia/commons/3/32/C-major.ogg">
	<source src="http://upload.wikimedia.org/wikipedia/commons/4/4b/D-major.ogg">
</audio>
<button id='play-next'>다음 곡 재생하기</button>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
	var index = 1;
	$('#play-next').click(function() {
		index++;
		if(index > $('#myaudio source').length) index=2;
		console.log( index + '번째 소스 재생' );

		$('#myaudio source#main').attr('src',
			$('#myaudio source:nth-child('+index+')').attr('src'));
		$("#myaudio")[0].load();
		$("#myaudio")[0].play();
	});
</script>