노프레임 홈에서 배경음악 여러곡 선택하여 재생하기...

노프레임 홈에서 배경음악 여러곡 선택하여 재생하기... 정보

노프레임 홈에서 배경음악 여러곡 선택하여 재생하기...

본문

배경음악에 대해서는
개인의 기호에 따라 찬반이 엇갈립니다.
기업체 사이트에서는 필요하지 않겠지만 개인홈이나
문학이나 엔터테인먼트 계통의 사이트에서는 주제를 살려주는
좋은 양념이 될수 있습니다.
프레임 사이트에서의 배경음악 삽입은 너무 간단하지만 노프레임에서는 좀 까다로운 면이 있습니다.
가상인덱스(0%의 프레임을 추가하여 음악을 불러 들이는 형태)를 만들어 주거나
시노부나 사랑비 등의 BGM플레이어를 설치하기도 하지만
사이트의 특정영역을 할애해야 하고 원하는 위치에 원하는 형태로 삽입하는 것이 어렵습니다.
새창으로 띄우는 방법도 있겠지만 브라우저에서 팝업을 차단시켜 놓은 방문객들이 많으므로 그다지 바람직하지 않은 방법인것 같습니다.

이 방법은 제가 후배의 사이트를 손봐주다가
문득 생각이 나서 만들어 본 뒤에 제 사이트에 적용한 팁입니다.
일종의 편법이지만 다른 음악을 선택하였을 때 딱 한번 리플래시 한다는 것 빼고는 꽤 쓸만한 것 같습니다.
리플래시가 되긴 하지만
대부분의 파일들이 한번 열렸던 것이기 때문에 손색이 없는 것 같습니다.

먼저 아래의 사이트를 참고 해보시기 바랍니다.
http://grinbi62.com
사이트 왼쪽 하단에 뮤직플레이어가 있습니다.
버튼을 클릭하면 한번 리플래시 되면서 새로운 곡이 진행되고
그 곡은 어떤 페이지로 가든지 끊기지 않습니다.
그 형태를 만드는 팁입니다.

이 팁을 적용하기 위하여서는
네개의 가상 인덱스 파일과
음악을 불러오는 세개의 html이나 php 파일이 필요합니다.

아래의 순서대로 따라 합니다.
1.먼저 현재 G4루트에 들어 있는 index.php나 index.html을
다른 이름으로 바꿔줍니다.(예:inde.php)
만약 히든프레임을 사용한 가상 인덱스가 index로 되어 있고
그 인덱스를 거친 후 main.php 등으로 연결 되는 형태로 되어 있다면
그 파일만 다른 이름으로 바꿔 주거나 삭제합니다.

2.배경음악으로 삽입하고자 하는 음악파일 세개를(저작권에 주의 하세요.)
파일이름을 각각 bgm1.mp3 /bgm2.mp3 /bgm3.mp3으로 바꾼 후
사이트에 업로드 합니다.(편의상 http://123.com/mu/ 폴더에 업로드 하였다고 가정합니다.)

3.메모장이나 에디터 플러스로 빈 문서를 만든 후 아래의 소스를 복사하여 삽입합니다.
<html>
<head>
</head>
<embed src="http://123.com/mu/bgm1.mp3" autostart=true hidden=true loop=true>
</html>

4.위의 구문에서 주소를 자신이 bgm1.mp3를 올린 실제 주소로 바꿔 준 후
mudex1.html로 저장합니다.
(파일이름은 자신이 알기 쉽게 저장하여도 됩니다.
편의상 mudex1.html로 저장하였다고 가정합니다.)

5.소스를 수정하여 저장한 mudex1.html 주소에서
bgm1.mp3를 bgm2.mp3로 바꿔 준 후 mudex2.html로 저장합니다.

6.5번에서 bgm2.mp3를 bgm3.mp3로 바꿔 준 후 mudex3.html로 저장합니다.
이렇게 하여 실제 음악을 불러올 mudex.html 파일들은 다 만들어졌습니다.
위의 파일들을 계정으로 업로드 합니다.
편의상 http://123.com의 루트에 올려졌다고 가정하겠습니다.

이제 index 파일 네개를 만들 순서입니다.
세개의 음악을 재생하려면 네개의 index 파일이 필요합니다.
음악을 재생하지 않는 파일도 필요하기 때문입니다.

7.빈문서에 아래의 소스를 복사하여 넣습니다.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta name="keywords" content="검색에 노출 되고자 하는 키워드를 맘대로 써 넣으세요.">
<title>사이트의 제목을 적어 줍니다.</title>
</head>
<frameset rows="0,*" frameborder="NO" border="0" framespacing="0" cols="*">
<frame name="topFrame" scrolling="no" noresize src="http://i23.com/mu/mudex1.html">
<frame name="mainFrame" scrolling="auto" src="http://연결시키려는 실제페이지 주소.com/g4/main.php">
</frameset>
</html>

이 소스는 음악을 불러오는 mudex1.html을 호출하여 음악을 재생시킨 후
메인페이로 가게 하는 소스입니다.
위의 소스에서
1)http://i23.com/mu/mudex1.html의 주소를 실제 mudex1.html이 업로드 된 주소로 바꿉니다.
2)frame name의 src=" " 안의 주소를 실제 연결 시키려는 페이지 주소로 바꿔 줍니다.
만약 123.com g4폴더 안의 main.php를 불러 온다고 가정하면
<frame name="mainFrame" scrolling="auto" src="http://123.com/g4/main.php">로
바꿔 주시면 됩니다.

8.소스를 수정하였으면
index.html로 저장합니다.(혹은 php)

9.위에서 저장한 index.html의 소스에서 mudex1.html을 mudex2.html로 바꿔 준 후
index2.html로 저장합니다.

10.위의 방법으로 mudex3.html로 소스를 바꿔 준 후
index3.html로 저장합니다.

이렇게 하여 각각의 음악을 재생하는 인덱스파일은 다 만들었습니다.
이제는 음악을 멈추게 하는 인덱스 파일을 만들어 보겠습니다.
다른 소스를 써 보겠습니다.

11.아래의 소스를 빈문서에 복사하여 붙여 넣습니다.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta name="keywords" content="검색에 노출시킬 키워드">
<title>사이트 이름</title>
</head>
<frameset rows="*,0" cols="1*" border=0>
<body>
<frame src="http://123.com/g4/main.php" frameborder=0 scrolling=auto>
</body>
</frameset>

</html>

12.위의 소스에서 주소를 실제 연결 시키려는 페이지 주소로 바꿔 준 후
nodex.html로 저장합니다.

13.주소가 제대로 되었는지 확인 한 후 계정에서 브라우저에서
각각의 인댁스 파일을 호출하여 음악이 잘 재생 되는지 확인합니다.

14.이제 플래시 등으로 사이트의 적당한 곳에
네개의 버튼을 만들어 줍니다. 버튼의 위치는 모든 페이지에 공통적으로 나타나는
곳이 가장 적당합니다.
네개의 버튼에 각각
http://i23.com/mu/index.html
http://i23.com/mu/index2.html
http://i23.com/mu/index3.html
http://i23.com/mu/nodex.html을 링크시켜 줍니다.
링크 시킬 때 윈도우 옵션은 반드시 "top"으로 지정합니다.
예:bgm2.mp3를 듣게 하는 버튼의 액션
on (release) {
getURL("http://grinbi62.com/index2.html", "_top");
}

15.버튼이 들어 있는 파일을 업로드 합니다.
인터넷옵션에서 쿠키와 파일삭제를 한 후에 제대로 재생 되는지
확인하여 봅니다.
위의 순서대로 따라 하셨다면 세개의 음악 파일을 선택하여 들을 수 있을 것입니다.
위의 소스들은 음악 재생 뿐만 아니라
사이트의 주소에서 꼬리를 잘라주는 역할까지 합니다.
음악버튼을 클릭할 때마다 새로운 인덱스를 불러 오므로
버튼이 들어 있는 파일은 최대한 용량이 적을 수록 좋습니다.

허접한 팁이지만 도움이 되셨기를.....

위의 순서대로만 따라하시면 되므로 쪽지 등의 질문은
단호하게 사양합니다.
더 좋은 방법을 알고 계시는 분은 이글에 태클을 달지 마시고
잘 정리하셔서 별도의 글로 올려 주시기 바랍니다.

이글의 저작권은 제게 있으며
오직 SIR과 제 사이트인 http://grinbi62.com에만 게재합니다.