지금 듣고 있는 이 노래의 제목이 000입니다.

네이버에서 '자바스크립트 노래 연속 듣기 태그'로 검색해 보면 그 대강은 다 나오는 소스거든요.

그런데 내 컴퓨터에 있는 이 노래들 한데 모아서 듣고 싶었는데 제목이라는 것이 겨우 '상태 표시줄' 수준을 못 넘더라고요.

그래서 그 제목 좀 따로 빼려고 돌대가리 짱돌 좀 굴렸답니다.

그 실체가 바로 아래 그림에서 설명하면 '지금 듣는~'으로 나오는 가운데 부분인데 돌대가리 굴려서 하려니까 장난이 아니데요.

알고 나면 '새 발의 피도 안 될 것'이…

그림에서 위쪽에 보이는 노래들이 본래 들어야 했던 거였는데 처음엔 아무리 해도 안 되기에 일일이 테이블에 집어넣고는 그 하나하나에 노래가 있는 곳 링크를 윈도 미디어 플레이어로 따로따로 들었던 거였답니다.

그런데 지금은 미디어 플레이어 숨어서 보이지도 않지만, 그 모두를 연속으로 들을 수 있기에 링크를 모두 뺀 채로 저렇게 내버려 뒀거든요.

맨 아래 시계는 이 프로그램을 손대는 그 시작 시점을 보이는 건데 그림으로 뜨려다 보니까 그 크기 조절하느라고 몇 번이나 페이지 새로 고치는 통에 오전 10경에 있었던 것이 그 바람에 순식간에 오후 세시를 가리키게 해버렸네요.

Music-01

자잘한 설명해 봐야 어지럽기만 할 테고 해서 오로지 이 프로그램 짰던 소스를 그림으로 뜬 것을 그대로 올리겠습니다.

'Dewdrop.htm'이란 이름으로 이렇게 짜기 시작했지요.

위쪽으로는 웹 문서의 기본이 새겨졌으며 아래로 내려갈수록 아까 말했던 예전 문서에서 노래 제목에 링크 빼버린 그 모양 그대로가 벌거숭이처럼 그대로 남은 채 보일 겁니다.

버리는 것보다야 그대로 내버려둠이 더 낫겠기에 안 버렸습니다.

Music-02

그냥 보이기만 하는 제목 테이블이 끝나는 지점에 드디어 숨어서도 미디어 재생해내는 태그가 있습니다.

그 부분은 매우 중요한 놈이라서 이곳에도 잠깐 써 둘게요.

------------------------------------------------------------

<!--미디어 플레이어 소스 시작 -->

<object id="OkMusic" width="0" height="0"

classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase=

"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"

type="application/x-oleobject"></object>

<!-- 미디어 플레이어 소스 끝 -->

------------------------------------------------------------

그 소스가 끝나자마자 드디어 재생에 필요한 노래들 주소가 배열로 들어가기 시작했습니다.

배열의 첫 번호가 0번이란 건 누구나 짐작할 수 있는 이야기될 터이고…

Music-03

노래 주소를 보면 틀림없이 제 컴퓨터('E 드라이브')에 있는 노래라는 걸 쉽게 짐작하실 수 있을 겁니다.

그것도 또 'Guitar' 폴더 안의 노래라는 걸 봐서도 기타반주곡이라는 것도 짐작하시겠고요.

물론 아닌 것도 한두 곡 있긴 하지만요.

어쨌든지 57곡의 주소가 모조리 들어갔습니다.

Music-04

이제는 들어간 노래 57곡에 대한 제목을 뽑아 배열로 들어갈 차례입니다.

이것 작성할 때 혹시라도 배열의 번호 놓치는 일 없기를 바랄게요.

Music-05

'노래 주소' 넣었겠다, 거기다가 제목까지 넣었으니까 인제 본격적으로 그것 제목 뽑아 메인화면에 내보내는 소스를 짜야겠지요.

여기서 '랜덤(무작위)으로 재생한다', '상태 표시줄에 제목 보인다.' 정도는 이미 인터넷에 모두 공개된 내용일 거예요.

물론 그 문법이나 단어들은 저와 다를 수도 있습니다.

제 맘에 들게끔 바꾸기도 했으니까 말입니다.

제가 이것에 집중하면서 모든 신경을 한데 모았던 것이 '만약에 00을 할 수만 있다면…' 이었거든요.

그 '만약'이라는 것이 자바스크립트에서는 'if 문' 아니었겠어요?

그래서 그거에 골몰하다가 특정 시간대에 뭔가를 해내는 함수를 찾았던 겁니다.

그것이 바로 'View1()'과 'View2()'인데 그 전반을 분석해서 설명하자면

새로운 노래가 재생할 때마다 그 제목을 별도의 함수(sarang)에 저장(View1)한 뒤

그 내용을 메인화면에 만들어 둔 글 상자(display)에 내 보내(View2)는 겁니다.

그 시차 백만분의 1초의 오차 한계를 두고 0초보다 작았을 때를 제외한 모든 시간대에서 매 초를 지나는 순간 즉시 갱신하라는 내용의 소스였지요.

Music-06

그리고 이 소스에는 자판에서 취소(Esc) 버튼을 누르면 재생이 즉시 멈춘답니다.

그리고 다시 듣고자 하면 오른 마우스 누르면 즉시 재생하게끔 처음 BODY 태그(oncontextmenu='location reload();return false;')를 넣어 뒀기에 가능하답니다.

이상으로 간단하게 그 설명을 마칠게요.

여러분은 저처럼 어리숙한 내용이 아닌 보다 짜임새 있고 산뜻·깔끔한 소스로 대체하시길 바랍니다.

그럼 이 추위에 건강하게 지내십시오!