Input file 재생시간 - input file jaesaengsigan

Question

I'm doing a project with HTML and Javascript that will run local with local files. I need to select a file by input, get its information and then decide if I'll add to my list and reproduce or not. And if Ii decide to use it I'll have to put it on a queue to use later. Otherwise I'll just discard and select another file.

The problem that I'm facing is that I can't find a way to get the video duration just by selecting it on input.

I've searched a lot and I didn't find any method to get the duration. In this code below I tried to use 'file.duration' but it didn't work, it just returns 'undefined'.

This is my input, normal as you can see.

<div id="input-upload-file" class="box-shadow">
   <span>upload! (ღ˘⌣˘ღ)</span> <!--ignore the text face lol -->
   <input type="file" class="upload" id="fileUp" name="fileUpload" onchange="setFileInfo()">
</div>

And this is the function that I'm using to get all the information.

function setFileInfo(){
  showInfo(); //change div content
  var file = document.getElementById("fileUp").files[0];
  var pid =  1;
  var Pname = file.name;
  Pname = Pname.slice(0, Pname.indexOf(".")); //get filename without extension
  var Ptype = file.type;
  var Psize = bytesToSize(file.size); //turns into KB,MB, etc...
  var Pprior = setPriority(Ptype); //returns 1, 2 or 3 
  var Pdur = file.duration;
  var Pmem = getMemory(Psize); //returns size * (100 || 10 || 1)
  var Pown = 'user';
  /* a lot of stuff throwing this info to the HTML */
  console.log(Pdur);
}

Is there way to do this? If not, what are the alternatives that can help me?

네이버 지식인 보고 만들어본 쥬크박스입니다.

위 URL 을 참조하시면 더 많은 기능을 첨부할수 있습니다.

소스는 다음과 같고 정렬된 소스는 같이 첨부합니다.

<HTML>
<HEAD>
<TITLE>음악 재생</TITLE>
<STYLE>
td
{
font-size:9pt;
}
</STYLE>

<SCRIPT src = "http://webfx.eae.net/dhtml/slider/css/bluecurve/bluecurve.css" />

<SCRIPT>
var slider;
var nowTime;
var totalTime;
var isInterval = false;
var progressBarWidth = 200;

/**
* 음악 재생 시작
*/
function startPlay()
{
// 기존 음악 중지
stopMusic();

var addr = form.file.value;

Player.URL = addr;

// 노래 제목 삽입
titleDiv.innerHTML = Player.currentMedia.name;

// 변경된 프로그레스바 크기 지정
progressBarWidth = document.getElementById("progress_td").clientWidth;

// 프로그레스바 초기화
showProgressBar(0);

// 음악 재생
playMusic();

// 볼륨조절 슬라이더 셋팅
slider.setValue( getVolume() );

// 반복 체크 값 true
isInterval = true;

startTimeInterval(); // 재생시간 보기
}

/**
* 반복적으로 재생시간을 보여주는 함수를 실행
*/
function startTimeInterval()
{
id = setInterval( "showPlayTime()", 500 );
}

/**
* 재생시간 출력
*/
function showPlayTime()
{
  try
  {
   nowTime   = Math.floor( Player.controls.currentPosition ); // 현재 재생시간 추출
   totalTime = Math.floor( Player.currentMedia.duration ); // 총 재생시간 추출

nowTimeDiv.innerHTML = changeTimeType( nowTime );
fullTimeDiv.innerHTML = changeTimeType( totalTime );

percentage = Math.floor( ( nowTime / totalTime ) * 100 );

   // 재생바 출력
   showProgressBar( percentage );
  }
  catch( e )
  {
   if( isInterval == true )
   {

stopMusic();

alert("재생 가능한 파일이 아닙니다.");

    clearInterval( id );
    isInterval = false;
   }
  }
}

/**
* 재생바 출력 부분
*/
function showProgressBar( percentage )
{
  // 반드시 퍼센티지가 숫자로 들어올 때
  if( isNaN( percentage ) == false )
  {
   // 현재 설정해놓은 TD의 크기가 200이므로 100% 기준 * 2로 잡음
   document.getElementById("progress").style.width = Math.floor( (progressBarWidth / 100) * percentage );

percentageDiv.innerHTML = percentage + "%";
}
}

/**
* 초로 되어있는 시간을 분/초 나눠서 보여줌
*
*@param time 초단위의 재생시간
*/
function changeTimeType( time )
{
var result;

  // 시간이 1분 초과했을 경우
  if( time >= 60 )
  {
   result = Math.floor( time / 60 ) + "분 ";

if( time % 60 != 0 ) result += time % 60 + "초";
  }
  else
  {
   result = time + "초";
  }

return result;
}

/**
* 음악 일시 정지
*/
function pauseMusic()
{
Player.controls.pause();
return false;
}

/**
* 음악 정지
*/
function stopMusic()
{
Player.controls.stop();
return false;
}

/**
* 음악 앞으로 가기
*/
function forwardMusic()
{
Player.controls.fastForward();
return false;
}

/**
* 음악 뒤로 가기
*/
function reverseMusic()
{
Player.controls.fastReverse();
return false;
}

/**
* 음악 재생
*/
function playMusic()
{
Player.controls.play();
return false;
}

/**
* 볼륨 설정
*
* @param vol 0부터 100사이의 long 데이터
*/
function setVolume( vol )
{
Player.settings.volume = vol;
}

/**
* 볼륨값 추출
*
* @return 0부터 100사이의 long 데이터
*/
function getVolume()
{
return Player.settings.volume;
}

/**
* 볼륨 조절용 슬라이더 출력
*/
function showSliderForVolume()
{
slider = new Slider( document.getElementById("slider-1"), document.getElementById("slider-input-1") );

  // 볼륨 조절시 데이터 셋팅을 위한 이벤트 설정
  slider.onchange = function () {
   document.getElementById("volSpan").innerHTML = slider.getValue();

setVolume( slider.getValue() ); // 볼륨 조절
};
}
</SCRIPT>
</HEAD>

<BODY onLOad = "showSliderForVolume()">
<OBJECT id = "Player" height = "0" width = "0" classid = "CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"></OBJECT>
<TABLE border = "1" width = "250">
<TR height = "25">
<TD colspan = "2" align = "center">제목 : <SPAN id = "titleDiv"></SPAN></TD>
</TR>
<TR height = "15">
<TD width = "80%" id = "progress_td">

  <SPAN id = "progress" style = "width:0px;height:10px;overflow:hidden;background-color:#336699"/></TD>
</TD>
<TD align = "center"><SPAN id = "percentageDiv">0%</SPAN></TD>
</TR>
<TR height = "25">
<TD colspan = "2" align = "center">

  재생시간 : <SPAN id = "nowTimeDiv">-</SPAN>, 총재생시간 : <SPAN id = "fullTimeDiv">-</SPAN>
</TD>
</TR>
<TR height = "25">
<TD colspan = "2" align = "center">

  <A href = "#" onClick = "return playMusic()">재생</A>
    
  <A href = "#" onClick = "return pauseMusic()">일시정지</A>
    
  <A href = "#" onClick = "return stopMusic()">정지</A>
    
  <A href = "#" onClick = "return reverseMusic()">◀◀</A>
    
  <A href = "#" onClick = "return forwardMusic()">▶▶</A>
</TD>
</TR>
<TR>
<TD colspan = "2" align = "center">

  <TABLE width = "100%">
  <TR height = "25">
   <TD width = "80%">
    <DIV class = "slider" id = "slider-1" tabIndex = "1" style = "width:100%">
     <INPUT class = "slider-input" id = "slider-input-1" name = "slider-input-1"/>
    </DIV>
   </TD>
   <TD width = "20%" align = "center"><SPAN id = "volSpan">0</SPAN>%</TD>
  </TR>
  </TABLE>
</TD>
</TR>
</TABLE>
<FORM name = "form">
<INPUT type = "file" name = "file" onchange = "startPlay()">
</FORM>
</BODY>
</HTML>