미디어플레이어 재생 시간 추출
페이지 정보
작성자 서방님 댓글 0건 조회 191회 작성일 07-11-27 19:43본문
<html>
<head>
<title>faithlove.net Test-Jukebox</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
body,table,tr,td { font-family:굴림; font-size:9pt; color:#333333; }
body { margin : 0 0 0 0; }
</style>
<script>
// 시간을 표시하는 함수
function LoadPlayTime()
{
// 현재 재생되고 있는 음악의 총 시간은 두가지 방법으로 불러 올 수 있습니다.
// 하나는 전체가 몇 초인가 하는 236(초)이라는 숫자를 불러오는 것이고
// 다른 하나는 3:56 식으로 문자를 불러오는 것입니다.
// 숫자를 불러 오려면 player.currentMedia.duration 으로 하면 됩니다.
// 문자로 불러 오려면 다음과 같이 하면 됩니다.
var duration = player.currentMedia.durationString;
// 재생되고 있는 음악이 몇초가 지났는지는 player.controls.currentPosition 으로 가져올 수 있습니다.
// 그러나 이것은 몇초(소수점 포함)로 값을 반환하기 때문에 3:56 식으로 변환을 해줘야 합니다.
var nowTime = player.controls.currentPosition;
var nowPosition = time_paser(nowTime);
// 재생이 되고 있다면 nowTime이 0보다 크겠죠?
if(nowTime > 0)
{
document.all["play_time"].innerHTML = "<font color=#000000>" + nowPosition + " / "+ duration + "</font>";
}
else if(nowTime >= player.currentMedia.duration)
{ // 재생시간이 전체시간과 같거나(재생이 끝났다는 말이죠) 클경우..(이런 경우도 있나?!) 함수를 빠져나옵니다.
return;
}
// 시간 표시를 초 단위로 하기 때문에 1초보다 작은 값으로 반복을 시켜주면 되겠죠.
// 1000이 1초입니다. 따라서 500은 0.5초입니다. 0.5초마다 시간을 표시해주는 겁니다.
setTimeout("LoadPlayTime();", 500);
}
// 숫자를 mm:ss 식으로 변환하는 함수
function time_paser(i_time){
var PlyTime,PlyCl,PlyMin,PlySec,temp;
PlyTime=i_time;
temp=Math.floor(PlyTime/60);
PlySec=Math.floor(PlyTime%60);
PlyClk=Math.floor(temp/60);
PlyMin=Math.floor(temp%60);
if (PlyMin <10) {PlyMin='0'+PlyMin;}
if (PlySec <10) {PlySec='0'+PlySec;}
if (PlyClk==0){r_TimeText=PlyMin+':'+PlySec;}else{r_TimeText=PlyClk+':'+PlyMin+':'+PlySec;}
return r_TimeText;
}
function player_pause()
{ // 일시정지
if(player.playState == 2)
{ // 일시 정지상태에서 pause 버튼을 누르면 그 시점부터 다시 재생되어야 함.
player.controls.play();
}
else
{
if(player.controls.isAvailable('pause'))
{
player.controls.pause();
}
}
}
// 버퍼링 과정을 표시하는 함수
function UpdateBuffer()
{
// 버퍼링이 얼마나 되었는지를 나타내는 것은 player.network.bufferingProgress 입니다.
document.all["state"].innerHTML = player.network.bufferingProgress + "% 버퍼링 중....";
}
// 반복 동작을 가리키는 변수
var showBuffer;
function PlayerState(state)
{
var oMedia = player.currentMedia;
switch(state) {
case 1 :
document.all["state"].innerHTML = "정지";
break;
case 2 :
// 2번은 pasue(일시정지)되었을 때
document.all["state"].innerHTML = "일시정지";
break;
case 3 :
document.all["state"].innerHTML = "<marquee scrollamount=3>" + oMedia.getItemInfo('Title') + " - " + oMedia.getItemInfo('Author') + "</marquee>";
LoadPlayTime();
break;
case 4 :
// 버퍼링이 다 되고 음악이 시작되는 시점이므로 버퍼링 표시하는 반복작업을 해제합니다.
clearInterval(showBuffer);
// 음악이 시작이 되고 있으므로, 이 때에 시간을 표시하는 함수를 호출합니다.
// LoadPlayTime();
document.all["state"].innerHTML = "<marquee scrollamount=3>" + playTitle[playList] + " - " + playSinger[playList] + " (" + (+1) + "/" + playCount + ")</marquee>";
break;
case 6 :
// 6번은 버퍼링 중일 때
// 강좌 3까지는 그냥 "버퍼링...."이라고만 표시를 해줬는데,
// 모뎀 사용자, 해외 사용자, 인터넷이 느린 사무실, 학교, 공공 기관등에서는
// 버퍼링 과정이 멈춰진 현상인지 혹은 얼마나 지금 버퍼링이 되고 있는지 확인 시켜주는 것도
// 중요한 것 중의 하나입니다.
// setInterval은 주기적으로 어떤 실행을 반복시키는 역활을 함. 다음은 0.2초마다 UpdateBuffer를 실행함.
showBuffer = setInterval("UpdateBuffer();", 200);
break;
}
}
</script>
<script language="JScript" for="player" event="playStateChange(NewState)">PlayerState(NewState);window.status=NewState;</script>
</head>
<body >
<!-- Windows Media Player 9 오브젝트
필요한 몇가지를 설정을 해야 하나, 설정을 안 하면 기본 값이 적용이 됩니다.
따라서 꼭 필요한 것만 값을 적용시키면 되는데, 크기를 width=0 height=0 으로 하였기 때문에,
재생에 관련된 부분만 건드려 주면 됩니다.
중요한 것은 재생시킬 파일이겠죠. 예제를 살리기 위해 일반 음악주소가 아닌, 따로 만든 asx 파일을 재생합니다.
-->
<object id=player name=player width=0 height=0 classid='clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6' type='application/x-oleobject'>
<param name="playcount" value="1">
<param name="volume" value="100">
<param name="url" value="mms://media1.ike.co.kr/ike/free/070721_TOEIC04.wmv">
</object>
<!-- 웹플레이어 배경으로 사용할 이미지 -->
<table cellpadding=0 cellspacing=0 border=0 width=300>
<tr><td><img src="002.gif" border=0 usemap="#ImageMap1" width="360" height="87"></td></tr>
</table>
<!-- 정보를 표시하기 위한 레이어 -->
<div id="state" style="width:180px; height:18px; position:absolute; left:63px; top:26px; z-index:1;"><marquee scrollamount=3>웹플레이어 만들기~</marquee></div><!-- 이미지의 버튼에 링크 걸기 -->
<div id="play_time" align=right style="width:77px; height:36px; position:absolute; left:260px; top:41px; z-index:2;"><font color=#000000>00:00 / 00:00</font></div>
<map name="ImageMap1">
<area shape="rect" coords="26, 35, 37, 47" href="#" onclick="javascript:player.controls.Play();return false;" href='#' style="cursor:hand;" onfocus="this.blur();" alt="재생">
<area shape="rect" coords="42, 35, 53, 47" href="#" onclick="javascript:player.controls.Stop();return false;" href='#' style="cursor:hand;" onfocus="this.blur();" alt="정지">
<area shape="rect" coords="61, 35, 70, 47" href="#" onclick="javascript:player.controls.pause();return false;" href='#' style="cursor:hand;" onfocus="this.blur();" alt="일시정지">
</map></body>
</html>
댓글목록
등록된 댓글이 없습니다.
