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();
chs[0].addEventListener('ended', function() { ch_ended(0); }, false );
chs[1].addEventListener('ended', function() { ch_ended(1); }, false );

function ch_ended(no) {
	console.log("Ch #"+no+" ended.");
	if(!chs[0].paused)return;
	if(!chs[1].paused)return;
	all_ch_ended();
}

function all_ch_ended() {
	console.log("All chs ended.");
}

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('label'=>'A major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/3/34/A-major.ogg'),
array('label'=>'B major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/f/fa/B-major.ogg'),
array('label'=>'C major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/3/32/C-major.ogg'),
array('label'=>'D major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/4/4b/D-major.ogg'),
array('label'=>'E major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/8/8c/E-major.ogg'),
array('label'=>'F major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/c/cf/F-major.ogg'),
array('label'=>'G major', 'src'=>'http://upload.wikimedia.org/wikipedia/commons/4/4e/G-major.ogg')
);

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

예제: http://zetawiki.com/ex/js/audio_2ch_v2.php

콘솔 창을 열면 어느 채널에서 재생되는지, 각 채널의 재생완료 시점, 전체 채널의 재생완료 시점을 확인할 수 있다.

3 같이 보기[ | ]