나모 하나로 BGM Player 만들기.

홈에 여러개의 배경음악을 차례로 재생하는 기능을 달려면
외부에서 BGM플레이어를 끌어와야했습니다.
그런데 씸플한 것을 최우선으로 꼽는 저의 입맛에 맞는 플레이어가 없더군요.
기존에 여러개의 음악 파일을 무작정 배경음악으로 순환시키는 방법이 있긴 하지만,
저는 BGM Player처럼 재생, 정지, 이전곡, 다음곡 기능을 꼭 넣고 싶었습니다.
그렇다고 제가 직접 php나, 플래쉬, asp 등으로 프로그래밍할 실력은 없고 해서
순전히 HTML문서 만으로 BGM Player를 만드는 방법을 연구해보았습니다.
이 때 음악이 다음 음악으로 자동으로 넘어가는 부분에서 애 먹었는데,
"refresh"기능을 이용해서 해결했습니다.

그 전에 미리 알려둘 것이 몇 가지...

1. 노가다적인 면이 쫌 있습니다.
2. 노프레임 홈에는 적용 안됩니다.
   고정된 프레임이 있거나, 제 홈처럼 메인화면에서 가운데 부분만 iframe으로 바뀌는
   그런 홈에서만 사용가능합니다.
3. 분명히 외부 BGM Player보다 기능 떨어집니다.
    HTML 만으로 BGM Player를 구현한다는 면에 의의가 있다는 점 염두에 두시고
    딴지 걸어주세요~..^^;      
4. 나모로 작업하는 것으로 설명하겠습니다.  
  
~~~~~~~~~~~~~~~~~~
(1) 음악 파일 준비
~~~~~~~~~~~~~~~~~~

1.wma 2.wma 3.wma 이렇게 세 개의 음악파일이 있다고 합시다.
음악파일 재생 프로그램에서 각 음악 파일의 재생시간을 알아낸 다음 기록해둡니다.

~~~~~~~~~~~~~~~~~~~~~~~~
(2) 음악 재생 파일 작성
~~~~~~~~~~~~~~~~~~~~~~~~
배경음악 플레이어를 디자인 합니다.
지금은 아래처럼 단순히 텍스트로 만들 경우를 예로 들어 설명하겠습니다.

"배경음악 : 이전 정지 재생 다음"(아이콘을 이용하면 더 멋진 플레이어가 되겠죠?)

위의 내용 한 줄만 들어가는 Html문서를 0.htm 1.htm 2.htm 3.htm 4개의 파일로 저장합니다.
그리고 1.htm에는 1.wma를, 2.htm에는 2.wma를 3.htm에는 3.wma를 배경음악으로 지정합니다.
0.htm에는 배경음악을 지정하지 않습니다.

그리고 1.htm에서,
'이전'에 3.htm을,
'정지'에 0.htm을,
'재생'에 1.htm을,
'다음'에 2.htm을 링크합니다 (전부 타겟은 '_self'입니다.)
오른쪽 클릭 -> 문서속성 -> '고급'에서
'이동할 주소'에 2.htm, '지연시간'에 1.wma의 재생시간을 초단위로 입력합니다. 그리고 확인.



2.htm에서
'이전'에 1.htm을,
'정지'에 0.htm을,
'재생'에 2.htm을,
'다음'에 3.htm을 링크합니다 (전부 타겟은 '_self'입니다.)
오른쪽 클릭 -> 문서속성 -> '고급'에서
'이동할 주소'에 3.htm, '지연시간'에 2.wma의 재생시간을 초단위로 입력합니다. 그리고 확인.

3.htm에서
'이전'에 2.htm을,
'정지'에 0.htm을,
'재생'에 3.htm을,
'다음'에 1.htm을 링크합니다 (전부 타겟은 '_self'입니다.)
오른쪽 클릭 -> 문서속성 -> '고급'에서
'이동할 주소'에 1.htm, '지연시간'에 3.wma의 재생시간을 초단위로 입력합니다. 그리고 확인.


0.htm에서
'이전 정지 다음'에는 아무것도 링크하지 않고,
'재생'에만 1.htm을 링크합니다(타겟은 셀프)
이동할 주소와 지연시간에는 아무것도 입력하지 않아야 합니다!!

~~~~~~~~~~~~~
(3) 홈에 달기
~~~~~~~~~~~~~

BGM 플레이어를 달고자 하는 위치에
"배경음악 : 이전 정지 재생 다음"(저는 버튼과 음표 아이콘으로 만들었습니다)
이 내용이 다 들어올 수 있는 최소의 크기로 iframe을 삽입합니다.(스크롤바 안생기게 크기조절 잘 하세요)
이 때 iframe에 들어갈 문서는 1.htm입니다.



이제 끝났습니다.
음악은 순서대로 반복되고, '이전' '다음' 등의 버튼을 누르면 다음곡이나 이전곡으로 넘어갑니다.
그리고 정지 버튼을 누르면 음악은 멈추고 재생 버튼을 누르면 다시 처음부터 재생됩니다.
그리고 곡목이 나오게 하고 싶다면 각 파일에 해당하는 곡목을 써주시면 됩니다.
"배경음악 : 이전 정지 재생 다음 (성시경 : 넌 감동이었어)" 이렇게 각 파일에...

몇 가지 단점이 있습니다~
1. refresh의 지연시간을 이용하였기 때문에,
   1~3초 정도의 오차가 생길 수 있습니다.
   음악이 끝나고 잠깐 있다가 다음 곡으로 넘어간다든지,
   음악이 끝나기 거의 1초 전에 다음 곡으로 넘어간다든지 하는...
2. 정지하였다가 다시 재생할 경우 무조건 1번 부터 재생이 됩니다.
   듣던 음악부터 재생하려면 0.htm의 재생버튼에
   '뒤로가기'를 링크하면 됩니다. 그 소스는 지금 생각이 안나네요~  
   하지만, 일시정지/재생은 할 수 없습니다.
3. 위에서 말씀드렸듯이, 노프레임에서는 음악이 끊깁니다.
   고정된 프레임이 있거나, iframe을 이용해서 하나의 페이지만으로 꾸민 홈에서만 가능합니다.
  
*** 단점도 많고 노가다이긴 하지만,
    저같은 경우는 "외부에서 뭔가를 링크하는 것"을 극도로 꺼려하고,
    "내가 원하는 디자인"으로 BGM Player를 달고 싶었기 때문에,
    이 방법을 쓰게되었습니다.
    허접한 팁이지만, 한 사람에게라도 도움이 되었으면 좋겠네요...