태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

8년 전

•HTML5 Audio 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>";
}
?>

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

추천 목록

번호	제목
2,645	php set time limit 함수 - 타임아웃 설정
2,644	Setting .htaccess to allow PHP to be accessed with .xml extension
2,643	jQuery API: Manipulation, Events, Effects, Internals, Utilities
2,642	다운로드 횟수 제한 스크립트
2,641	자바스크립트 타이머 - setTimeout, setInterval, clearInterval 함수
2,640	jQuery AJAX 로그인 구현
2,639	PHP 세션 로그인 구현
2,638	PHP 쿠키 로그인 구현
2,637	jQuery에서 json 변수 사용(활용)법
2,636	AJAX 반복처리 및 설명 예제
2,635	[Android] Intent 활용 예시
2,634	[php] 배열을 임의의 순서로 섞는 shuffle 함수
2,633	jQuery API - 속성(CSS), 추출
2,632	DIV 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
2,631	urlencode(), base64 encode() 함수
2,630	PHP로 IE버전 체크하는 방법(Trident값사용)
2,629	HTML5 관련 유용한 레퍼(참조) 사이트
2,628	[HTML5] Video & Audio
2,627	HTML5 오디오 곡 목록 재생
2,626	HTML5 오디오 404 오류시 다른 파일 재생
2,625	HTML5 오디오 이벤트리스너 onerror
2,624	JavaScript Audio 객체
2,623	HTML5 Audio 2채널 재생
	HTML5 Audio 2채널 재생 + 재생완료 리스너
2,621	HTML5 음악 볼륨 조절
2,620	HTML5 음악 볼륨 조절
2,619	HTML5 오디오 자동재생
2,618	HTML5 오디오 반복 재생
2,617	HTML5 오디오 이벤트리스너
2,616	클릭 한번으로 고유주소(URL) 복사되게 하는 방법