====== 오디오 기본 가이드 ======
이 화면은 오디오 컴포넌트에 대한 샘플 화면이다.
오디오 컴포넌트는 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
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/AUDIO/audio_basic.xml|audio_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/AUDIO/audio_basic.js|audio_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/AUDIO/audio_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 화면 로드 이벤트
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);
}