웹마스터 팁

  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
좋아요
목록
제목 글쓴이 날짜
방문자수 (카운터) 마음대로 조작하기 [37] file Br_7941 2008.08.23
[게시판] 이미존재하는 모듈이름 입니다. 오류. [2] 나이스가이212 2008.08.21
로그인 문제 및 첨부파일 안올라가는 문제 해결책(세션 문제일 경우..) [6] file 이홍석295 2008.08.20
한글로 된 이미지 문제 [17] Defy 2008.08.19
[초보팁] 우리말 수정하기(예제: 가입창 이름란 삭제) [3] 블루파티 2008.08.19
인용구 접기기능 링크이름 Underline 없애기 [4] file 똑디 2008.08.19
zbxe에 bgm을 설치하자 [11] file 우리아기 2008.08.16
이미지 좌측 정렬시 내용이 적으면 아래부분 올라오는 문제 해결법 [2] file 대류 2008.08.16
미국 yahoo zbxe 설치 및 mysql 연결 [4] mr007 2008.08.15
zbxe에서 piclens 사용하기 [2] 우정진 2008.08.15
권한 문제 때문에 생길 수 있는 문제 해결 방안 꽃들 2008.08.14
rewrite mod 사용 않될 경우 해결 방법 1가지 블루스카이77 2008.08.13
렙업시 소속그룹 없어지는 문제! 얍실하게 해결.. 쿨럭. [2] file 이슈카ㆀ 2008.08.12
댓글 첨부파일부분 닫기/열기 추가 [1] file Gnee 2008.08.09
오픈 아이디(OpenID)로만 로그인 허용하기 [7] withover.com 2008.08.07
설치시 초기화면으로 돌아가는 현상 해결 [1] spk 2008.08.07
닉네임, 이름 정보변경 못하게 하기. [6] 부엉이 2008.08.06
첨부화일 등록시 사라지는 현상 [2] 0라이트0 2008.08.05
TRAC과 SVN을 참조하여 1.0.5의 애드온 설정 버그 해결하기 Adios 2008.08.04
제로보드 문자열 정교하게 자르기 [11] 젝망치 2008.08.03
태그 쓰기