오디오 기본 가이드

이 화면은 오디오 컴포넌트에 대한 샘플 화면이다.

오디오 컴포넌트는 HTML5 audio 태그를 이용한 컴포넌트이다.

관련 속성으로 show_controls, default_source_usage, volumn, source, muted, autoc_play, alt가 있다.

관련 API로 play, pause, stop, getvolume, setvolume, setplaybackrate, getmuted, setmuted, getsource, setsource, getduration가 있다.

관련 이벤트로 on_play, on_ended, on_pause, on_timeupdate, on_loadeddata가 있다.

템플릿 위치: /HTML5/COMPONENT/AUDIO/audio_basic

템플릿 파일

• audio_basic.xml
• audio_basic.js
• 새창으로 실행

// 화면 로드 이벤트
function screen_on_load()
{
	// 소리 크기 프로그래스바 위치 설정
	this.pbVolume.setpos(this.audio.getvolume());

	// 재생 위치 프로그래스바 위치 설정
	this.pbProgress.setpos(0);

	// 오디오 파일 URL 표시
	this.fld_source.settext(this.audio.getsource());
}

/////////////////////////////////////////////////////////////////////////////
// 오디오 컴포넌트 이벤트 시작
/////////////////////////////////////////////////////////////////////////////
// 오디오 플레이 시간 경과 이벤트
function audio_on_timeupdate(objInst, current_time)
{
	var duration;

	duration = this.fld_duration.gettext();

	// 재생 위치 프로그래스바 위치 변경
	this.pbProgress.setpos(Math.round((current_time / duration) * 100));
}

// 오디오 데이터 로드 완료 이벤트
function audio_on_loadeddata(objInst)
{
	// 오디오 재생 시간을 구하여 필드에 설정
	this.fld_duration.settext(this.audio.getduration());
	this.txtPlayStatus.settext("재생 준비 완료");
}

// 오디오 플레이 시작 이벤트
function audio_on_play(objInst)
{
	this.txtPlayStatus.settext("재생");
}

// 오디오 플레이 완료 이벤트
function audio_on_ended(objInst)
{
	this.txtPlayStatus.settext("종료");
	this.pbProgress.setpos(100, false);
}

// 오디오 플레이 멈춤 이벤트
function audio_on_pause(objInst)
{
	this.txtPlayStatus.settext("중지");
}
/////////////////////////////////////////////////////////////////////////////
// 오디오 컴포넌트 이벤트 끝
/////////////////////////////////////////////////////////////////////////////

// 재생 버튼 이벤트
function btnPlay_on_mouseup(objInst)
{
	this.audio.play();
}

// 멈춤 버튼 이벤트
function btnPause_on_mouseup(objInst)
{
	this.audio.pause();
}

// 중지 버튼 이벤트
function btnStop_on_mouseup(objInst)
{
	this.audio.stop();
}

// 소리 줄임 버튼 이벤트
function btnTurnDown_on_mouseup(objInst)
{
	var audio_volume;
	audio_volume = this.audio.getvolume() - 10;
	this.pbVolume.setpos(audio_volume);
	this.audio.setvolume(audio_volume);
}

// 소리 키움 버튼 이벤트
function btnTurnUp_on_mouseup(objInst)
{
	var audio_volume;
	audio_volume = this.audio.getvolume() + 10;
	this.pbVolume.setpos(audio_volume);
	this.audio.setvolume(audio_volume);
}

// "0.5X" 버튼 이벤트
function btnPlayRate0_on_click(objInst)
{
	this.audio.setplaybackrate(0.5);
}

// "1.0X" 버튼 이벤트
function btnPlayRate1_on_click(objInst)
{
	this.audio.setplaybackrate(1);
}

// "2.0X" 버튼 이벤트
function btnPlayRate2_on_click(objInst)
{
	this.audio.setplaybackrate(2);
}