HTML5 Audio 2채널 재생

1 개요[ | ]

HTML5 Audio 2 Channel Play
HTML5 Audio 2채널 재생
자바스크립트 mp3 2채널 재생

Audio 객체의 인스턴스 2개 생성하여 번갈아 재생

이전에 재생중인 소리를 중단하지 않고 새로운 소리를 재생

2개의 채널을 준비해두고 최근 사용한 채널이 아닌 채널로 재생

게임 효과음 제어 등에 활용가능
매번 Audio 인스턴스를 만드는 것보다 제어가 간편함
채널을 늘리는 것도 간단

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://zetawiki.com/ex/js/audio_2ch.php

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

3 같이 보기[ | ]