웹플레이어 currentPosition...펌.

*출처 : http://faithlove.net

링크1	http://user.chol.com/~faithlove/lecture/test_jukebox_04.htm
링크2	http://user.chol.com/~faithlove/lecture/test_03.asx

오늘 중으로 강좌 4를 올린다고 했는데, 약속을 지켰습니다. 그렇습니다. 저는 약속을 지키는 사람입니다. 움헤헤헤 (^-^)/ (너무 속보입니다..;;) http://user.chol.com/~faithlove 도 꾸며야 하고 http://faithlove.net 도 기능강화 및 대수선(건축용어..;;)을 해야되는데, 매일 해야되는데..해야되는데..하는 타령만 하고 있네요. ^^;; 이번 강좌에 배울 내용입니다. 1. 일시정지 버튼을 만들어보자. 2. 버퍼링의 진행사항을 표시해보자. 3. 재생되고 있는 시간을 표시해보자. 재생시간을 제대로 보여드리기 위해 스킨을 바꿨습니다. 초창기 어느 이름을 밝히지 않으신 분께서 주신건데, 화려하진 않지만 깔끔해서 어디든 잘 어울리는 스킨입니다. 이렇게 생긴 것입니다. 랜덤버튼이 없죠? 그래서 시작하자 마자 랜덤을 하게 했습니다........만, asx 에서 데이터를 뽑아 오는 과정 재생이 시작되어야 가능 하거든요. 그래서 랜덤 에러메세지가 한 번 뜰겁니다. 그냥 무시하세요. ^^; 어차피 조만간 DB 라던지 텍스트 파일을 이용하는 것을 배울테니까요. 일시정지(pause)라는 것은 정지(stop)와는 다르게 음악을 듣던 중간의 바로 그 시점에서 멈추는 겁니다. 그리고 다시 재생이 시작 되면 멈췄던 그 부분부터 재생이 되는 것이구요. 일시정지 만 만들면 되는 것이라고 생각하실 수 있지만, 추가적으로 생각을 해야될게 있습니다. 우선 일시정지 상태에서 다시 일시정지 버튼을 눌렀을 때 음악이 재생이 되야 하고(보통 그렇게 사용하니까요) 또한 일시정지 상태에서 재생 버턴을 눌러도 처음부터가 아니라 그 시점부터 재생이 되야겠죠. 제가 너무 당연한 말만 하나요? ^^; 하지만, 재생버튼을 누르면 지금 상태로는 다시 음악이 처음부터 재생되게 되어 있습니다. 소스를 확인해 보죠. 62번째 줄을 보시면 강좌 3에서는 player.URL = playUrl[playList[Idx]]; 였지만, 여기서는 현재 상태가 일시정지 상태인지를 확인해서 일시정지 상태에서 재생버턴을 누르면 player.contorls.play()를 호출해서 일시정지한 시점부터 재생을 해야되겠죠. 일지정지인지 아닌지의 상태를 확인하는 방법은 player.playState 를 통해서 알 수 있습니다. player가 어떤 변화가 있을 때 마다 발생하는 이벤트(이젠 다 아시죠?) 에서의 값이 바로 요 값입니다. 정지 일때는 1, 재생일때는 3 등등... 따라서 player.playState가 2일때(일시정지 상태) 를 체크해서 재생 방식을 나눠주면 됩니다. 마찬가지로 일시정지 상태에서 다시 일시정지 버튼을 누를 때도 그 시점에서 재생이 되야 하니까 130번째 줄에서도 마찬가지로 player.playState의 값이 2인지 아닌지로 구분해서 정의 해놨습니다. 일시정지를 하게 되면 당연히 표시를 해줘야 할테니 PlayerState(state) 를 통해서 case 2 일 때에 화면에 표시를 해주면 되겠습니다. 버퍼링 진행 표시가 과연 필요있을까 하기도 하겠지만...사실 일종의 뽀다구(겉멋-_-;)인것도 맞지만요..해외사용자, 인터넷이 느린 학교, 사무실, 공공기관 등에서 음악을 감상하시는 분들에게 버퍼링 표시를 해줘야...기다리는 것에 익숙치 않은 저를 포함한 대한민국 국민들에게 조그마한 위안과 볼거리를 제공해야 하기 때문입니다. (말도 안되는 소리죠..;;) 현재 얼마나 버퍼링이 되고 있는지 % 단위로 알려주는게 있습니다. 바로 요놈 player.network.bufferingProgress 입니다. 그러니 화면에 이것만 뿌려주면 되겠는데....한번만 뿌려주면 그 때의 버퍼링만 표시를 하고 가만히 있겠죠? 그러니 버퍼링이 완료될때까지는 주기적으로 화면에 뿌려줘야 할거니다. 너무 느리지도 않게 너무 빠르지도 않게 반복작업을 해주면 됩니다. 0.2~0.5초 정도면 무난할거라 생각합니다. 그럼 버퍼링이 되었을 때 즉 PlayerState(state)에서 case 6 일 때, 버퍼링을 표시하는 작업을 반복시켜주면 되겠습니다. 소스에서 188번째 줄에 일단 화면에 버퍼링 진행 과정을 표시해주는 함수를 만듭니다. 그리고 이 함수를 0.2초내지 0.5초 간격으로 호출을 하면 되겠죠? 194번째 줄에서 변수 하나를 만들었습니다. 227번째 줄의 반복작업을 저장하기 위한 변수입니다. 227번째 줄에서 보시면 showBuffer = setInterval("UpdateBuffer();", 200); 이렇게 되어 있습니다. setInterval()은 일정시간 간격으로 어떤 실행을 하게 하는 것입니다. UpdateBuffer() 가 화면에 버퍼링 진행과정을 뿌려주는 것이니 이를 반복하자는 것이고, 1000이 1초이니 200은 0.2초가 되어서 0.2초마다 UpdateBuffer()를 실행하자는 것입니다. 그러면 다음 그림과 같이 화면에 보일겁니다.(버퍼링 중이라면...) 그런데, 버퍼링이 100%가 되면 재생이 시작되고 있는데, 그 때에도 계속해서 UpdateBuffer()가 0.2초마다 실행이 되고 있다면 화면에 버퍼링 100% 라는 문구만 계속 찍혀 있겠죠. 그래서 213번째 줄에서 음악이 재생이 되기 시작하면 아까의 반복작업을 취소하겠다는 겁니다. 반복작업을 showBuffer 라는 변수에 입력하였으므로, clearInterval(showBuffer) 를 실행해서 showBuffer(반복작업)를 취소할 수 있습니다. 그래야 화면에 제목과 가수이름을 표시를 해주죠. 버퍼링이 완료가 되어서 음악이 재생이 되고 있다면, 오른쪽 하단에 현재 진행된 시간과 재생되고 있는 음악의 총 시간이 나오죠? 음악이 시작 되었을 때, 216번째 줄에 보면 LoadPlayTime(); 를 호출했습니다. LoadPlayTime()으로 가보죠. 144번째 줄에 보시면 함수를 정의 해 놨습니다. 재생되고 있는 음악의 총 시간을 가져오는 방법은 두 가지가 있습니다. 하나는 총 몇초(예, 236)인지의 숫자 값을 가져오는 것이고(사실, 소수점까지 가져옵니다) 다른 하나는 전체 3:56 처럼 몇분 몇초 식으로 된 문자를 가져오는 것입니다. 초로 가져와서 작업하는 것은 나중에 진행바 버튼을 만들 때나 필요한 것이므로, 여기서는 몇분 몇초식으로 된 문자를 가져오는 방법인 player.currentMedia.durationString 을 사용합니다. 그러면, 총 시간은 해결이 되었구, 진행되고 있는 시간인데, 이는 player.controls.currentPosition 으로 가져올 수 있습니다. 그러나 이 값은 전체 몇 초라는 숫자 값을 반환합니다. 그러므로 몇분 몇초라는 형식으로 바꿔 줄 필요가 있습니다. 174 번째 줄의 함수를 한번 거치면 우리가 원하는 형식으로 바꿀 수 있습니다. 그러면 이제 화면에 보여주기만 하면 되겠죠. 당연하겠지만, 이것도 계속 반복작업을 수행해야 됩니다. setInterval 말고 다른 방법으로 보여드리기 위해 setTimeout()을 사용했습니다. setTimeout 은 몇초 후에 한번 실행을 하는 겁니다. 지금같은 경우는 자신을 0.5초마다 실행을 시키는 꼴이죠. 이것도 해체 작업(clearTimeout)을 해야되겠습니다만, 그냥 간단하게 진행된 음악 시간이 총 시간하고 똑같으면, 즉, 음악이 끝났으면 LoadPlayTime() 를 그냥 빠져나오면 되겠죠? LoadPlayTime() 함수는 이런식으로 작성을 했습니다. 이번 강좌는 별로 안 어렵죠? 강좌 3에서 갑자기 어려워 졌는데, 좀 쉬어가는 분위기로 꾸며 봤습니다. ^^ 이제 기본적인 것은 거의 끝났습니다. 진행바라던지 볼륨바 등이 아직 없지만, 어느덧 어엿한 주크박스가 되어 버렸습니다. ^^ 하지만, 어떤 프로그램이던지 예외에 관해서 처리를 해줘야 합니다. 여러 돌발 상황들, 에러들에 관해서 처리를 해줘야 하는 것이죠. 예를 들어, 지금 asx 파일의 리스트의 음악주소는 다 나오고 있습니다. 하지만 음악주소가 바뀌어서 어느 한곡이 안나오게 된다면 지금까지 만든거로는 나오는 음악하고 제목이 마구 섞여버릴 수 있습니다. 또는 음악주소에 접속하는데, 접속이 안되고 있다던지, 어떤 상황들, 에러들에 관해 처리하는 방법을 다음 강좌에서 배우도록 하겠습니다. 무시무시한 태풍이 올라오고 있다고 하는데, 작년에 수해를 입으셨던 지역에 계시는 분께서는 미리미리 대비를 하셔야 겠습니다. 매년 땜빵질 대안으로 똑같이 당하는데, 제발 장기적인 차원에서 대비를 해서 근본적으로 이겨낼 수 있었으면 좋겠습니다...