HTML5 Audio 2채널 재생 + 재생완료 리스너

1 개요

HTML5 Audio 2 Channel Play + Event Listener
HTML5 Audio 2채널 재생 + 재생완료 이벤트리스너
HTML5 Audio 2채널 재생 v2

HTML5 Audio 2채널 재생의 개선판
각 채널의 재성완료 시점 및 전체 채널의 재생완료 시점을 검출 가능

2 소스 코드

<script>
var last_ch = 1;
var chs = [];
chs[0] = new Audio();
chs[1] = new Audio();

function sound_play(src) {
	var current_ch = (last_ch == 1)? 0:1;
	chs[current_ch].src = src;
	chs[current_ch].play();
	console.log('Playing on ch #'+current_ch+' (src='+src+')');
	last_ch = current_ch;
}
</script>
<?php
$sounds = array(
array('name'=>'A major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/3/34/A-major.ogg'),
array('name'=>'B major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/f/fa/B-major.ogg'),
array('name'=>'C major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/3/32/C-major.ogg'),
array('name'=>'D major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/4/4b/D-major.ogg'),
array('name'=>'E major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/8/8c/E-major.ogg'),
array('name'=>'F major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/c/cf/F-major.ogg'),
array('name'=>'G major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/4/4e/G-major.ogg')
);

foreach($sounds as $sound) {
	$name = $sound['name'];
	$src = $sound['src'];
	echo "<button onclick=\"sound_play('$src');\">$name</button>";
}

예제: http://jmnote.com/js/audio_2ch.php

콘솔 창을 열면 어느 채널에서 재생되는지도 확인할 수 있다.

3 같이 보기