function m_list() { // 새창으로 BGM 선택창 띄우기
 window.open('bgm_sele.htm','bgmSel','width=350,height=380,left=0,top=0,directories=0,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0');
}

// 가상프레임용
function m_list2() { // 새창으로 BGM 선택창 띄우기
 window.open('bgm/bgm_sele.htm','bgmSel','width=350,height=380,left=0,top=0,directories=0,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0');
}

window.onerror=function error_kill() {return true;}


②  sbp_mlist.js 수정

이것은 노래 파일의 경로를 적어주는 파일인데, 제대로 적어주어야지 리스트창에도 노래 목록이 잘 뜬다.
파일 안에 샘플로 한 열개정도의 노래파일경로의 목록이 있을 것이다. 아마도 지금쯤 이것들은 재생이 안될지도 모르니, 목록에 있는 노래 경로들은 다 지우고, 샘플로 올린 파일 경로를 적어준다.

예) addbgm( ' http://홈주소/bgm/노래넣을폴더명/노래명.확장자 ', '노래제목- 가수 ' );

이것말고 파일위에서부터 보면 기본재생모드 체크, 시작시 재생체크여부 설정을 원하는걸로 해주면 된다.

③ ftp업로드

수정을 해줬다면 이제 ftp에 업로드를 하자. public_html(대개 ftp접속하면 이렇게 쓰여있음)안에 bgm폴더를 업로드를 한다.

2. 홈피접속파일 index.html를 수정하자.

bgm을 설치하려면 zbxe를 설치한곳의 홈피 접속시 index.html를 어떻게 썼든 무시하고 없애버리고(혹시나 보관은 해둠 ㅎㅎ) 프레임셋으로 나눈 index.php로 대체를 해야 한다.(zbxe의 index.php파일을 말하는 것이 아니고, public_html의 index.html파일을 index.php파일로 바꾼다는 뜻이다. 주의하시길!)

<html>
  <head>
  <meta http-equiv='content-type' content='text/html; charset=euc-kr'>
  <title>TITLE</title>
  </head>

<frameset rows="0, 1*" border="0">
    <frame src="/bgm/bgm.htm" name="bgm" noresize marginwidth="0" marginheight="0">
    <frame name="control" scrolling="yes" marginwidth="0" marginheight="0" src="/zbxe">
</frameset>
</html>

메모장을 열어서 위 내용을 넣어주고, 빨간부분을 맞게 수정하고, index.php파일로 저장한다. 저장할때 인코딩체크를 ansi로 해줘도 되는데 혹시나 하는 맘으로 utf-8로 저장을 한다.
그리고 ftp에다 index.html파일 대신 이 파일을 올린다.

원리를 간단하게 설명하자면, 홈피 접속시 bgm프레임에서 초기 설정되는 bgm플레이어 값을 control프레임으로 플레이어 조정을 옮기기 위함이다.

3. zbxe 레이아웃 스킨에서 layout.html에서 또는 레이아웃 편집에서 플레이어 소스와 js/xe_official.js 에서 자바스크립 소스를 삽입하자.

① 플레이어 소스

<!-- 시노부BGM -->
<table align=center width=190px height=90px cellspacing="0" style='background-image:url(<?=$dir?>/bgm/images/snv_90.gif);'>
  <tr><td>

    <table height=30px>
      <tr><td align=left style='padding-top:0px; padding-left:8px; padding-right:5px'>
        <marquee width="170" direction="left" scrolldelay=100 scrollamount=2 onmouseover="this.stop()" onmouseout="this.start()">
       <font id="stitle" style='font-family:돋움; FONT-SIZE:9pt; COLOR:#fff; top:1;'></font>
     </marquee>
      </td></tr>
    </table>

    <table height=30px>
      <tr><td align=left style='padding-left:11px; padding-top:0px'>
        <font style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:#fff;'></font>
        <font id="now_time" style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:#fff; position:RELATIVE; top:1;'>▷00:00|00:00</font>
      </td></tr>
    </table>

    <table height=30px align=center>
      <tr><td style='padding-top:5px'>
        <font id="stats"></font>
          <a onclick="parent.frames['bgm'].preTrack();" onMouseOver="document.pre.src='<?=$dir?>/bgm/images/b1_over.gif';" onMouseOut="document.pre.src='<?=$dir?>/bgm/images/b1.gif';"><img name=pre src="<?=$dir?>/bgm/images/b1.gif" width="13" height="13" border="0" alt="이전"></a>
          <a onclick="parent.frames['bgm'].stopTrack();" onMouseOver="document.sto.src='<?=$dir?>/bgm/images/b2_over.gif';" onMouseOut="document.sto.src='<?=$dir?>/bgm/images/b2.gif';"><img name=sto src="<?=$dir?>/bgm/images/b2.gif" width="13" height="13" border="0" alt="정지"></a>
          <a onclick="parent.frames['bgm'].play();" onMouseOver="document.pla.src='<?=$dir?>/bgm/images/b3_over.gif';" onMouseOut="document.pla.src='<?=$dir?>/bgm/images/b3.gif';"><img name=pla src="<?=$dir?>/bgm/images/b3.gif" width="13" height="13" border="0" alt="재생"></a>
          <a onclick="parent.frames['bgm'].MPause();" onMouseOver="document.pau.src='<?=$dir?>/bgm/images/b4_over.gif';" onMouseOut="document.pau.src='<?=$dir?>/bgm/images/b4.gif';"><img name=pau src="<?=$dir?>/bgm/images/b4.gif" width="13" height="13" border="0" alt="일시정지"></a>
          <a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.nex.src='<?=$dir?>/bgm/images/b5_over.gif';" onMouseOut="document.nex.src='<?=$dir?>/bgm/images/b5.gif';"><img name=nex src="<?=$dir?>/bgm/images/b5.gif" width="13" height="13" border="0" alt="다음"></a>
          <a onclick="parent.frames['bgm'].chgLoop();" onMouseOver="document.loo.src='<?=$dir?>/bgm/images/loop_over.gif';" onMouseOut="document.loo.src='<?=$dir?>/bgm/images/loop.gif';"><img name=loo src="<?=$dir?>/bgm/images/loop.gif" width="13" height="13" border="0" alt="반복/한곡"></a>
          <a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.mod.src='<?=$dir?>/bgm/images/random_over.gif';" onMouseOut="document.mod.src='<?=$dir?>/bgm/images/random.gif';"><img name=mod src="<?=$dir?>/bgm/images/random.gif" width="13" height="13" border="0" alt="랜덤/순차"></a>
          <a onclick="parent.frames['bgm'].m_list2();" onMouseOver="document.lis.src='<?=$dir?>/bgm/images/list_over.gif';" onMouseOut="document.lis.src='<?=$dir?>/bgm/images/list.gif';"><img name=lis src="<?=$dir?>/bgm/images/list.gif" width="13" height="13" border="0" alt="곡목리스트"></a>
      </td></tr>
    </table>

  </td></tr>
</table>


② js폴더안에 있는 js파일에 스크립 삽입

스크립 소스
function webtiTob()
{
var webtitop = "";
webtitop += "<html>n ";
webtitop += " <head>n ";
webtitop += " <meta http-equiv='content-type' content='text/html; charset=euc-kr'>n ";
webtitop += " <title>저희 홈패이지에 오신걸 환영합니다.</title>n ";
webtitop += " </head>n ";
webtitop += " <frameset rows='*,0' border=0>n ";
webtitop += " <frame name=control scrolling=auto marginwidth=0 marginheight=0 src="+window.location+">n ";
webtitop += " <frame name=bgm scrolling=no marginwidth=0 marginheight=0>n ";
webtitop += " </frameset>n ";
webtitop += "</html>n ";
document.write(webtitop);
control.location.href=window.location; //현재의 패이지 주소를 글어옴...
bgm.location.href='bgm/bgm.htm';
}
function webtibgm()
{
        if ( "control" == window.name )
                {
                top.frames['bgm'].updateTrack(); //현재 프레임의 이름이 control이라면 BGM 프레임의 업데이트 트랙 실행.
                top.status="완료 - 환영합니다."; }
        else if (top.frames.length == 0)
                {
                webtiTob(); //만약 독립적인 패이지 형식으로 접근시 프레임셋을 만들어서 음악을 재생시킴. 
                top.status="완료 - main을 통해서만 입장이 가능합니다.(A)"; }
}
setTimeout('webtibgm();', 1000); //실행        


위 소스에서 필요한 말들은 수정을 해주고 js파일 맨 밑에다 추가 시켜준다.
top.status="완료 - main을 통해서만 입장이 가능합니다.(A)";  이 문구는 말 그대로 프레임셋 형식의 접속이 아닌 독립된 페이지에서는 음악 재생이 안된다는 뜻이다.

플레이어 소스와 좋은 형식대로 수정해서 써도 상관없다. 단 이미지의 경로를 입력할때는 절대값이나 <?=$dir?>를 넣어줘서 해주는 것을 잊지 말자.


4. 이제 끝났다. 홈페이지를 접속하고 플레이어가 재생되는지를 확인해봐라.  100% 재생이 될것이다.

아.. 드래그가 안되서 소스를 복사 못하니 따로 소스파일을 메모장으로 만들어서 첨부했습니다.

쉽게 풀어서 설명하느라 글이 길어졌는데 간단한 방법이니 무리 없을겁니다.

그럼 좋은 음악 감상들 하세요~



설치된 홈페이지