웹마스터 팁

  2. Support
  3. 웹마스터 팁

zbxe에 bgm을 설치하자

2008.08.16 23:14

우리아기

1. 압축푼 파일들에서 ftp에 업로드하기전 수정해야 할 파일들을 말씀 드리겠습니다.
   일단 압축푼 파일과 폴더들을 bgm폴더라는걸 하나 만들어서 거기에 넣어주세요.
   그리고 bgm폴더안에 또 노래파일을 넣어둘 폴더명을 만드시고, 
   그안에 일단 샘플로 쓰일 노래파일(wmv, mp3등)을 넣어주세요.

① bgm_system.js 수정

  이파일안에 보시면 이미지 경로를 절대 경로값으로 보이는 것 모두 바꾸어 준다.
  특히, 파일 맨 아랫부분에서 빨간색 경로는 꼭 절대경로로 바꿔줘야 리스트 창이 제대로 뜬다.

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파일로 바꾼다는 뜻이다. 주의하시길!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="{Context::getLangType()}" xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <meta name="keywords" content="">

        <meta name="description" content="">

        <meta name="author" content="">

       
        <title>타이틀명</title>

    </head>
<frameset rows="0, 1*" border="0">
    <frame src="http://홈주소/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 에서 자바스크립 소스를 삽입하자.

① 플레이어 소스

<table width=191 height=56 valign=top cellpadding="0" cellspacing="0" style='background-image:url(bgm/images/bgmbg-004.gif);'><tr><td valign=top><table width=100% height=7><tr><td></td></tr></table>
<table width=100%><tr><td valign=top width=100% style='padding-left:10;'><marquee width="90" direction="left" scrolldelay=100 scrollamount=1 onmouseover="this.stop()" onmouseout="this.start()"><font id="stitle" style='font-family:돋움; FONT-SIZE:9pt; COLOR:#cdefab; position:RELATIVE; top:1;'></font></marquee>
<font style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:#000000;padding-left:5; position:RELATIVE; top:1;'> | </font> <font id="now_time" style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:cdefab; position:RELATIVE; top:1;'>00:00|00:00</font></td></tr></table><table width=100%><tr><td valign=top width=100% style='padding-left:7;'><font id="stats" style='padding-right:5;'></font>
<a onclick="parent.frames['bgm'].preTrack();" onMouseOver="document.pre.src='bgm/images/b1_over.gif';" onMouseOut="document.pre.src='bgm/images/b1.gif';"><img name=pre src="bgm/images/b1.gif" width="13" height="13" border="0" alt="이전"></a>
<a onclick="parent.frames['bgm'].stopTrack();" onMouseOver="document.sto.src='bgm/images/b2_over.gif';" onMouseOut="document.sto.src='bgm/images/b2.gif';"><img name=sto src="bgm/images/b2.gif" width="13" height="13" border="0" alt="정지"></a>
<a onclick="parent.frames['bgm'].play();" onMouseOver="document.pla.src='bgm/images/b3_over.gif';" onMouseOut="document.pla.src='bgm/images/b3.gif';"><img name=pla src="bgm/images/b3.gif" width="13" height="13" border="0" alt="재생"></a>
<a onclick="parent.frames['bgm'].MPause();" onMouseOver="document.pau.src='bgm/images/b4_over.gif';" onMouseOut="document.pau.src='bgm/images/b4.gif';"><img name=pau src="bgm/images/b4.gif" width="13" height="13" border="0" alt="일시정지"></a>
<a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.nex.src='bgm/images/b5_over.gif';" onMouseOut="document.nex.src='bgm/images/b5.gif';"><img name=nex src="bgm/images/b5.gif" width="13" height="13" border="0" alt="다음"></a>
<a onclick="parent.frames['bgm'].chgLoop();" onMouseOver="document.loo.src='bgm/images/loop_over.gif';" onMouseOut="document.loo.src='bgm/images/loop.gif';"><img name=loo src="bgm/images/loop.gif" width="13" height="13" border="0" alt="반복/한곡"></a>
<a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.mod.src='bgm/images/random_over.gif';" onMouseOut="document.mod.src='bgm/images/random.gif';"><img name=mod src="bgm/images/random.gif" width="13" height="13" border="0" alt="랜덤/순차"></a>
<a onclick="parent.frames['bgm'].m_list2();" onMouseOver="document.lis.src='bgm/images/list_over.gif';" onMouseOut="document.lis.src='bgm/images/list.gif';"><img name=lis src="bgm/images/list.gif" width="13" height="13" border="0" alt="곡목리스트"></a>

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


위 소스를 삽이하기전 소스에서 이미지 경로에 <?=$dir?>/를 넣어준다.
예) bgm/images/list_over.gif 라면--> <?=$dir?>/bgm/images/list_over.gif
그리고 원하는 위치에다가 이 플레이 소스를 넣어준다.


② 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% 재생이 될것이다.

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

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

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

이 게시물을
Profile
좋아요
목록
제목 글쓴이 날짜
[우클릭 및 드레그 방지법] 및 [방지된 홈페이지 해재법] >0< [7] 이홍석295 2008.09.03
mixup 애드온 Textyle에서 찾을 수 없는 증상 해결 팁 [1] 라르게덴 2009.08.10
1.1.5에서 1.2.4으로 업그레이드 할 때.. [3] 활주로 2009.08.06
zbxe에 bgm을 설치하자 [11] file 우리아기 2008.08.16
엄지 추천 기능 본문에 삽입 하고자 하실때 (급조) [2] file thejeon 2009.07.29
텔넷/ SSH 안 되는 계정에서 TAR로 데이터 백업/XE 설치하기 [5] Dream Of Veritas 2009.08.04
Lavalic Mp3 플레이어를 대신하는... [8] 조성우371 2009.07.13
팁이 아니고 저같은 초보자 분들이 아셔야 할 사항하나! [5] 토니박스 2009.07.20
"파일첨부"가 클릭이 안되시는 분 보셔요. [11] 최강협 2007.12.04
텔넷으로 순간 압축풀기/폴더 삭제/폴더파일 압축하기... [5] Crazyhouse.cn 2008.05.19
게시판을 활용한 페이지 생성 및 관리 아이디어...(참고) [5] file 빨간발 2009.03.27
특정그룹 멤버 표시 위젯에서 이름 순 정렬하기 [2] file 이재한744 2009.03.30
확장변수를 위젯에서 출력하기 [5] bibi 2009.07.19
주문형게시판 만들기 [22] file 팔공산 2008.05.04
IIS에서 XE 설치 시 FTP 정보 등록에서 오류 조치 [4] impre 2009.02.20
첨부파일 안올라갈 경우.. [5] file 양갱; 2009.04.18
메뉴에 플래시 적용하기 [7] file 지허 2007.10.23
쪽지 수신 음성 알림 [19] file Simulz 2007.11.13
회원아이디 클릭시 메일보내기 기능 숨기기 [9] 똑디 2008.12.18
사이트 주소 또는 title 고정시키기 [6] 하늘(skycheer) 2008.04.12
태그 쓰기