BGM Player

Help

BGM Player를 설치하기 전에

BGM Player 는 다양하고 각양각색의 Player 들이 있습니다. 물론, 원초적인 기능은 배경음악을 재생한다는 점에서 타 플레이어와 큰 차이를 갖지는 않습니다만, 사용하시려는 플레이어가 DB(데이터베이스) 를 사용하느냐, 혹은 자바를 사용하느냐 등의 차이점을 조금더 자세히 확인해 보실 필요성은 있습니다.

데이터베이스를 사용하는 BGM Player 가 분명 하나는 아니겠지만, 예를 들어 사랑비 BGM을 사용하시던 분이 데이터베이스를 올바르게 초기화 시키지 않은채, 해당 Player를 삭제할 때 데이터베이스 기록은 삭제되지 않고 서버에 잔류(방치)하게 됩니다.

위와 같은 경우 외에도 여러 가지가 있겠지만, 선택한 BGM Player 가 자신에게 맞고 적합한 BGM Player 가 맞는가를 확인하시는것이 좋습니다.

또한 설치하시기에 앞서, 최근 음반과 음악에 대한 저작권 등의 문제로 저작권 문제를 일으킬 수 있는 음악들이 다양하여, 무작정 아무 곡이나 이용하여 사용하다 적발 될 시, 벌금등을 물을 수 있는 부분이 존재하기 때문에, 설치 전에 자신이 사용하고자 하는 곡이 저작권 문제를 일으키지 않는 가에 대하여, 다시 한번 검토해 보시기 바랍니다.

※ 참고 저작권등의 문제가 심화 되던때, 이러한 저작권 문제에 대한 운동으로 저작권이 없는 음악 등을 공유하는 사이트들이 다소 생성되었고, 현재도 많게든 적게든 활동중에 있습니다. http://freebgm.net/ 와 같은 저작권적 문제가 일어나지 않는 곡들이 소개된 곳을 통하여, 저작권 문제가 되지 않는 곡을 찾아 사용하시는것도 좋은 방법이 될 수 있습니다.

BGM Player란?

BGM Player 란 Background Music Player 의 줄임말로서 배경음악 플레이어를 지칭하는 말입니다. 글자로 이루어진 네트워크 공간에 배경음악을 이용하여 개인만의 스타일이나 개성을 표현하거나 혹은 방문객들이 편안한 마음으로 둘러 볼 수 있는 등의 용도로 사용되기 시작한 BGM 은 현재 국내외를 포함하여 각양각색의 다양한 플레이어들이 존재하고 있습니다.

여러분은 이 BGM Player 를 이용하여, 자신만의 홈페이지나 공간을 음악으로 꾸미실 수도 있으며, 음악에 담긴 자신만의 개성을 표현하실 수도 있으며, 때로는 자신의 기분을 표현하실 수도 있습니다.

차가움과 피곤함에 젖어 컴퓨터를 이용하여 자신의 공간에 들어 섰을때, 자신을 달래주거나 격려해줄 즐겁고, 흥겹고, 때로는 차분한 음악과 함께해보시는 것은 어떠실까요?

선택은 여러분에게 있습니다.

BGM Player 설치하기

이곳에서는 다양한 BGM 들의 설치 방법을 안내해 드립니다. Aquamp BGM Player 외에 도 사랑비 Player, JS Player 등의 공간이 마련되어 있으며, 내용은 차차 보완될 예정이오니, 참고하여 설치하시는데 도움이 될 수 있기를 바랍니다.

Aquamp Player

styx.studio의 styxs님이 만든 BGM Player. 별도의 영문판이 존재하지 않음에도 불구하고 해외에서도 사용될만큼 인기가 좋다. 깨끗하고 쿨한 디자인과 onclick등의 이벤트를 이용한 포스트상의 음악제어등 다양한 기능으로 인해 테터에선 0.9x 시리즈부터 주요 BGM 플레이어로 많은 유저들의 사랑을 받아온 플레이어입니다.

다만 frameset 기반으로 구성되는 플레이어이기 때문에 Firefox등 일부 브라우저에서는 재생되지 않으며 웹2.0의 표준에도 아직 규격화되지 못한 단점이 있습니다.

올해초 aquamp의 차기버전을 제작할지도 모른다는 소식이 있었으나 향후 업데이트 일시는 아직 미정.

Aquamp 설치하기

aqua.zip index.zip

먼저 aqua.zip파일을 받아 압축을 풀은 뒤 알FTP등 FTP프로그램을 이용하여 자신의 계정에 업로드합니다. 이때 최상위 루트에 올리지말고 'aquamp'와 같은 별도의 폴더를 만든뒤에 해당파일을 업로드합니다.

필자의 경우, 'loose.hubweb.net' 이라는 계정에 'aquamp2' 라는 폴더를 만들어 해당파일을 업로드하였습니다.

다시 index.zip 파일을 받아, 알집등의 프로그램을 이용하여 압축을 풉니다. 이후 노트장이나 기타 에디트프로그램을 이용하여 index.html 파일을 열으면 다음과 같은 구문을 볼 수 있습니다.

Index.html

<html>
<head>
<title> 홈페이지 title - 1번 </title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
 <frameset rows="8,*" rows1="30,*" rows2_disabled="60,*" frameborder="0" framespacing="0" name="fst"> 
   <frame src="http://loose.hubweb.net/aquamp2/styx_wmp9_royalblue/player.html -2번" name="aquamp" frameborder="0" noresize>
        <frame src="http://loose.hubweb.net/tatter? -3번" name="main" frameborder="0" noresize>
   <noframes>
  </noframes>
 </frameset>
</html>

바꿔주어야 할 곳은 파란색 부분인 세 곳인데, 차례대로 설명하면 다음과 같습니다.

1. 익스플로어 상당부분에 나타나는 제목부분입니다. 자신의 블로그명이나 홈페이지 이름을 써 줍니다.

2. 아쿠아앰프의 플레이어 주소입니다. 스킨의 player.html주소를 적어주면 되는데, 지금 받은 aqua.zip 파일의 경우, styx_wmp9_royalblue이 스킨파일이므로 위와같이 적어주었습니다.

 'http://계정주소 /아쿠아앰프 설치 폴더/ 스킨폴더/ player.html' - 이런 형식으로 적어줍니다.

3. 아쿠아앰프 하단에 보여질 페이지 주소입니다. 필자의 경우 tatter폴더에 테터를 설치하였으므로 위과 같이 적었습니다. 이때 주의하여야 할 점은 'http://tattertools.com' 이런 식으로 도메인명을 적어주면 안됩니다. 왜냐하면 지금 작업하는 이 index.html파일을 최상위 루트에 올릴 예정인데, 최상위 주소를 쓰면 이 파일을 무한루프로 로딩하는 에러가 발생하게 됩니다.

꼭 하위폴더상의 주소를 쓰며 부득이하게 최상위 도메인 주소를 쓸 경우, index대신 main등으로 파일명을 바꾼뒤에 주소를 적어주시길 바랍니다.

ex) http://tattertools.com/tt/ (0)
    http://tattertools.com/tatter/index.html (0)
    http://tattertools.com/main.html (0)
    http://tattertools.com  (X)

그 후 해당파일을 저장한뒤 계정의 맨 상위 디렉토리 하단에 업로드합니다. 호스팅 업체에 따라 조금씩 다르지만 일반적으로 'public_html'등의 폴더 하단에 업로드하여 '홈페이지 주소/index.html' 이런 식으로 볼 수 있도록 설정해주시면 됩니다.

이제 index파일은 끝났습니다. 다음으로 aqua파일들을 보도록 할까요.

수정해야할 파일은 두개입니다. player.config.js, playerlist.asx

player.config.js 첫번째줄을 보면 다음과 같은 구문이 있습니다.

var mediaURL  = "http://loose.hubweb.net/aquamp2/playlist.asx";

여기서 파란색 부분의 주소를 자신의 playerlist.asx 주소로 변환시켜 줍니다.

playerlist.asx 혹시 곰플레이어등이 깔려있다면 영상파일로 표시되겠지만 이 파일은 노트장이나 에디트플러스등을 이용해서 열어야 합니다.

<Entry>
<Title>Description</Title>
<Ref href="URL"/>
</Entry>

이런식으로 되어있는데 예시를 들자면 다음과 같습니다.

<Entry>
<Title>음악 제목</Title>
<Ref href="http://tattertools.com/음악.wma"/>
</Entry>

이런식으로 제목과 주소를 적어줍니다. 아쿠아앰프는 mp3 파일외에 다양한 형식의 음악파일을 지원하고 있으며, 특히 wma 파일을 지원하는 관계로 음악파일로 인한 트래픽의 부담을 줄일수 있습니다.

자, 이제 모든 작업이 끝났습니다. 수정된 두 개의 파일을 다시 업로드해주면 아쿠아앰프를 즐기실수 있습니다. ^^

Aquamp 추가 Tip

1. 기본스킨외에 추가적인 스킨을 설치하고 싶다면 아래파일을 받은뒤, 위 index부분에서 스킨주소만 바꾸어주면 됩니다. Skin.zip

2. 아쿠아앰프의 초기세팅은 player.config.js에서 하는데 그 양식은 다음과 같습니다.

var view_bitrate  = true;
var view_duration = true;
var view_player   = 1; // 0 : hide, 1 : normal, 2 : extension (if rows2 and id "table_action")
var set_autoPlay  = false; <-- 오토플레이
var set_autoRewind = true;  <-- 노래 다끝나고 계속 반복
var set_shuffle   = false;
var set_loop     = true;
var set_mute     = false;
var set_volume   = 30; <--기본 사운드 볼륨입니다.100이 가장 높은소리 입니다.

var pl_window_width  = 450;
var pl_window_height = 400;
var pl_window_options = "scrollbars=yes,resizable=no,status=no";

var ml_window_width  = 650;
var ml_window_height = 600;
var ml_window_options = "scrollbars=yes,resizable=no,status=no";

var use_marquee       = false; // true, false
var marquee_behavior   = "scroll"; // scroll, alternate, slide
var marquee_direction   = "left"; // left, right
var marquee_scrollamount = 1;
var marquee_scrolldelay = 15;

3. 만약 테터를 최상위루트(public_html/..)에 설치하였다면, 다중설정자로 변경후 index.php파일을 만들어 수정해야 됩니다. 그러나 아직 검증된 방법은 아니므로 필히 백업을 해 두길 바랍니다.

현재 알려진 방법으로는 LonnieNa( http://blog.2pink.net/ )님이 제안한 방법으로서 그 사용법은 다음과 습니다.

덧붙임> LonnieNa님에 따르면 이를 수정시 댓글 알리미와 리퍼러로그가 정상적으로 작동하지 않는 경우가 보고되었습니다.

A. 단일사용자인 경우 다중사용자로 전환합니다. 관련 페이지

B .htaccess파일을 열어 다음과 같이 수정합니다.

해당파일은 숨김파일이므로 ftp의 옵션보기에서 숨김파일 보기를 체크해주어야 합니다.

RewriteRule ^$ blog/index.php [E=SURI:1,L] 를 RewriteRule ^$ index.php [E=SURI:1,L]로 수정후 index.php파일 작성

C. index.php수정. 프레임으로 나눠 사용합니다.

추가로 이 방법을 이용할 경우, 포스트를 표시하는 주소가 길어진다는 단점이 있습니다. 이러한 방식이 싫으시다면 index.html 파일을 하위폴더에 만들어 그쪽으로 접속하시면 됩니다. 단 이경우, 도메인 최상위 주소를 쓸 수 없다는 단점이 있습니다.

4. 아쿠아앰프 하단에 달기

<? if($r == 1) { ?>
<frameset rows="*,8" rows1="*,30" frameborder="0" framespacing="0" name="fst">
<frame src="<?=$index?>?<?=$_GET["q"]?>" name="main" frameborder="0" noresize>
<frame src="styx_wmp9_skyblue/player.html" name="aquamp" frameborder="0" noresize>
<? } ?>

,8 부분을 바꾸어주고 프레임셋 순서를 바꾸어주면 됩니다.

5. 가로 스크롤바 없애기 일부 스킨의 경우, 아쿠아앰프를 적용하였을시 가로 스크롤바가 생기는 문제가 발생합니다. 이 스크롤바를 없애는 방법에 대해 알아보도록 할까요.

스킨을 기본스킨이 아닌 morden_black과 같은 큰사이즈의 스킨을 사용한 경우, 프레임셋의 크기를 변경해 주어야 합니다.

홈페이지 index의 프레임 셋 부분에서 rows="*,8" rows1="*,30" 이 부분을 rows="*,12" rows1="*,46" 로 수정해 줍니다.

아쿠아앰프가 모두 보임에도 불구하고 가로스크롤바가 생긴다면 다음과 같이 스크롤바 제거 문구를 추가하여 줍니다.

먼저 스킨의 body 태그의 속성에 style="overflow-x:hidden"와 같이 스타일 문구를 써 주거나, 스킨관리모드 하단의 css 관리 페이지에서 다음과 같은 구문을 추가하여 줍니다.

body,td { overflow-x:hidden }

그후 스킨상단의 다음 구문을 주석처리하거나 삭제해 줍니다.