웹마스터 팁

BGM Player (배경 음악)

2004.02.16 00:53

장진석

제 홈피 ( http://mulmandu.bawi.org )의 BGM player를 탐내시는 분들이 몇분 계셔서..
저도 어차피 수많은 소스들을 편집하고 물어물어가며 공부하며 만든 것이기에,
이곳에 다시 환원합니다. 잘 사용하시기를.

질문은 제 홈피 Boards 에 올려주시면 성실히 답변드리겠습니다. 제가 이곳에 자주 안와보는고로..(홈피 주소도 꼭 올려주세요)

---------------------------------------------------------------------------------------------
// ** 이 글 올린후 사소한 버그 하나를 발견해서 코드 일부 수정합니다. (main 부분 및 bglist.htm 부분)
- 수정된 오류: 메인창의 List 상태 토글이 복잡다단한(?) 경우에 따라 변하지 않던 오류. 04.02.26 ** //

< 내부 기능설명 >
- Random 누르면 곡 랜덤플레이.
- Repeat : 현재 곡 계속 반복
- 전번 접속시 상태 기억해서(쿠키) 접속시 음악자동시작 여부 정함
- Random 상태에선 << >> 버튼도 랜덤으로 작용
- 음악듣는 도중에 곡명 누르면 새로 선택한 곡으로 바뀌고, 음악 멈춘 상태에서 곡명 누르면 다시 플레이시킬때 새로 선택한 곡으로 바뀜.
- 음악 리스트 손쉽게 마음대로 추가가능(bgm.js 파일 하나만 관리). 리스트창에서 리스트버튼 누르면 음악CD교환되듯이 리스트 자동변환.
- 메인창 닫으면 BGM List 창도 자동으로 닫힘.
- 접속시 가장 맨 뒤(가장 최근에 등록된) 리스트의 곡중에서 임의로 랜덤으로 선택되어 첫곡 시작, 그 다음부턴 순차진행.


< 자기 홈페이지에 설치하기 >

1. main 부분 - 각각 head와 body에 나누어 넣음.
2. BGM List 부분 - 그대로 하나의 html 파일로 만듦.(bglist.htm)
3. 곡list 파일 (bgm.js)

주의! : 위의 세가지의 파일은 모두 서버의 한 폴더 내에 있어야한다.

-----------------------------------------------------------------------------

1. main 부분 - 자신의 홈페이지 메인부분의 HTML에 넣음. 소스가 들어있는 부분은 링크클릭과는 무관하게 언제나 화면에 나와있는 부분이어야한다.(이 홈피의 위의 파란색 부분처럼) 안그러면 화면이 바뀔때마다 음악이 꺼지겠지?

1) head 에 다음을 넣는다. 중간에 사용자가 버튼을 누를때마다 폰트의 색깔을 보라색/검은색으로 토글시키는 부분은 알아서 맘대로 바꾸어서 사용하도록.
-----------------------------------------------------------------------------

<script language="JavaScript">
<!--
function getCookie(strName)
{

        var strArg = new String(strName + "=");        
        var nArgLen, nCookieLen, nEnd;
        var i = 0, j;
        
        nArgLen    = strArg.length;
        nCookieLen = document.cookie.length;
        
        if(nCookieLen > 0) {
        
                while(i < nCookieLen) {
                
                        j = i + nArgLen;
                        
                        if(document.cookie.substring(i, j) == strArg) {
                        
                                nEnd = document.cookie.indexOf (";", j);
                                
                                if(nEnd == -1) nEnd = document.cookie.length;
                                
                                return unescape(document.cookie.substring(j, nEnd));
                        
                        }
                        
                        i = document.cookie.indexOf(" ", i) + 1;
                        if (i == 0) break;
                }
        }
        
        return(null);
}

                
function setCookie( name, value, expiredays )
        {
        var today = new Date();
        today.setDate( today.getDate() + expiredays );
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
        }

if ( getCookie( "lhc_m" ) == "checked" )
        {pause=0;}
        else
        {
        if ( getCookie( "lhc_m" ) == null )
                {pause=0;}
                else {pause=1;}
        }

//-->
</script>



<script language="JavaScript">

if (document.layers) { document.captureEvents(Event.KEYPRESS); }

document.onkeypress = getKey;

function getKey(keyStroke)
{
var keyCode = (document.layers) ? keyStroke.which : event.keyCode;
if (keyCode == 27 && pause ==0)
        {
               setCookie( "lhc_m", "unchecked" ,7 );
               play_state.innerHTML='<font color="#000000">Play</font>';
               pause= 1;
               bgmusic.pause();
               first_change=0;
        }  

}

</script>



<object id="bgmusic" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" width="0" height="0">
            <param name="AllowChangeDisplaySize" value="false">
            <param name="AnimationAtStart" value="false">
            <param name="AutoSize" value="false">
            <param name="EnableContextMenu" value="false">
            <param name="EnableFullScreenControls" value="false">
            <param name="EnablePositionControls" value="false">
            <param name="EnableTracker" value="false">
            <param name="PlayCount" value="0">
            <param name="ShowAudioControls" value="false">
            <param name="ShowCaptioning" value="false">
            <param name="ShowControls" value="false">
            <param name="ShowDisplay" value="false">
            <param name="ShowGotoBar" value="false">
            <param name="ShowPositionControls" value="false">
            <param name="ShowStatusBar" value="false">
            <param name="ShowTracker" value="false">
            <param name="TransparentAtStart" value="true">
            <param name="AudioStream" value="-1">
            <param name="AutoStart" value="true">
            <param name="AllowScan" value="true">
            <param name="AutoRewind" value="false">
            <param name="Balance" value="0">
            <param name="BufferingTime" value="5">
            <param name="ClickToPlay" value="false">
            <param name="CursorType" value="0">
            <param name="CurrentPosition" value="-1">
            <param name="CurrentMarker" value="0">
            <param name="DisplayBackColor" value="0">
            <param name="DisplayMode" value="0">
            <param name="DisplaySize" value="0">
            <param name="Enabled" value="true">
            <param name="InvokeURLs" value="true">
            <param name="Language" value="-1">
            <param name="Mute" value="false">
            <param name="PreviewMode" value="false">
            <param name="Rate" value="1">
            <param name="SelectionStart" value="-1">
            <param name="SelectionEnd" value="-1">
            <param name="SendOpenStateChangeEvents" value="false">
            <param name="SendWarningEvents" value="false">
            <param name="SendErrorEvents" value="false">
            <param name="SendKeyboardEvents" value="false">
            <param name="SendMouseClickEvents" value="false">
            <param name="SendMouseMoveEvents" value="false">
            <param name="SendPlayStateChangeEvents" value="false">
            <param name="VideoBorderWidth" value="0">
            <param name="VideoBorderColor" value="0">
            <param name="VideoBorder3D" value="false">
            <param name="Volume" value="-600">
            <param name="WindowlessVideo" value="false">
</object>

<script language="JavaScript" src="bgm.js">
</script>

<script language="JavaScript">

random=0;
repeat=0;
listnum = total_list-1;
change_while_pause=0;
first_change=1;
bgm_open=0;
list_on_while_change=0;

bgnum=Math.floor(Math.random()*numsong[listnum]);

</script>

<script>
function change_state()
{
       if (random == 1)
       {
               player_state.innerHTML='<font color="#000000">Random</font>';
               random=0;
       }
       else
       {
               player_state.innerHTML='<font color="#9900FF">Random</font>';
               random=1;
       }
}

function change_play()
{
       if (pause == 1)
       {
                play_state.innerHTML='<font color="#9900FF">Play</font>';
                pause= 0;

                if (first_change == 1)
                {
                first_change=0;
                setTimeout("bgmusic.Filename =song[listnum][bgnum]", 500);
                final_list=listnum;        bgm=window.open('bglist.htm','bglist','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=no,scrollbars=no,width=260,height=240,left=100,top=100');
                bgm_open=1;
                list_state.innerHTML='<font color="#9900FF">List</font>';
                }
                else
                {
                if (change_while_pause == 1)
                        {bgmusic.Filename =song[listnum][bgnum];
                        change_while_pause = 0;}
                else {bgmusic.play();}
                }

                setCookie( "lhc_m", "checked" ,7 );

                
       }
       else
       {
               play_state.innerHTML='<font color="#000000">Play</font>';
               pause= 1;
               bgmusic.pause();
               setCookie( "lhc_m", "unchecked" ,7 );
               first_change=0;
       }
}

function change_repeat()
{
       if (repeat == 1)
       {
               repeat_state.innerHTML='<font color="#000000">Repeat</font>';
               repeat=0;
       }
       else
       {
               repeat_state.innerHTML='<font color="#9900FF">Repeat</font>';
               repeat=1;
       }
}

function list_up()
{

        if ( bgm_open == 0 )
        {
        bgm_open = 1;
        list_state.innerHTML='<font color="#9900FF">List</font>';
        
        final_list=listnum;
bgm=window.open('bglist.htm','bglist','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=no,scrollbars=no,width=260,height=240,left=100,top=100');
        window.bgm.focus();
        }
        else
        {
        bgm_open=0;
        list_state.innerHTML='<font color="#000000">List</font>';
        window.bgm.close();
        }

}

</script>




<script language="JavaScript">
function change()
{

if (random == 0)
        {
        if (bgnum == numsong[listnum])
                {
                listnum=listnum+1;bgnum = 0;
                if (listnum==total_list)
                        {listnum =0;}
                }
        if (bgnum == -1)
                {
                listnum=listnum-1;
                if (listnum == -1)
                        {listnum = total_list-1;}
                bgnum = numsong[listnum]-1;
                }
        }
else
        {
                listnum = Math.floor(Math.random()*total_list);
                bgnum=Math.floor(Math.random()*numsong[listnum]);
                     }


        bgmusic.Filename =song[listnum][bgnum];

        final_list=listnum;
        list_on_while_change=1;
        bgm=window.open('bglist.htm','bglist','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=no,scrollbars=no,width=260,height=240,left=100,top=100');
        window.bgm.focus();

}



function to_next()
{
        if (repeat == 1)
        {
               bgmusic.Filename=song[listnum][bgnum];
        }
        else
        {
                if (random == 1)
                               {
                listnum = Math.floor(Math.random()*total_list);
                       bgnum=Math.floor(Math.random()*numsong[listnum]);
                bgmusic.Filename =song[listnum][bgnum];
                }
                               else
                       {
                               bgnum=bgnum+1;
                if (bgnum == numsong[listnum])
                                {
                                bgnum = 0;
                                listnum = Math.floor(Math.random()*total_list);
                                }

                               bgmusic.Filename =song[listnum][bgnum];
                       }
        }
        final_list=listnum;
        if (bgm_open == 1)
        {
         list_on_while_change=1;
         bgm=window.open('bglist.htm','bglist','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=no,scrollbars=no,width=260,height=240,left=100,top=100');
        }
}

function bgm_close()
{
        if (bgm_open == 1)
                {
                bgm.main_close=1;
                bgm.close();
                }
}



</script>

------------------------------------------------------------------------------

2) <body> 태그 안에 onUnload를 넣는다. 다음과 같이 : <body............. onUnload="bgm_close()">

-------------------------------------------------------------------------------

3) body 부분에 다음을 넣는다. 글씨의 크기나 색상 등은 알아서 바꾸도록.

--------------------------------------------------------------------------------


  <a href="#" onclick="javascript:list_up()" onfocus="this.blur()" title="BGM List"><span id="list_state"><font color="#9900FF">List</font></span></a>
            
            <font face="Trebuchet MS"><a href="javascript:bgnum=bgnum-1;change()" title="이전 곡" onfocus='this.blur()'><<</a>
            
            <a href="#" onclick="javascript:change_state()" title="연주순서- 순차/랜덤" onfocus='this.blur()'><span id="player_state"><font color="#000000">Random</font></span></a>
            
            <a href="#" onclick="javascript:change_play()" title="Play/Pause" onfocus='this.blur()'><span id="play_state"><font color="#9900FF">Play</font></span></a>
            
            <a href="#" onclick="javascript:change_repeat()" title="현재곡 반복" onfocus='this.blur()'><span id="repeat_state"><font color="#000000">Repeat</font></span></a>
            
            <a href="javascript:bgnum=bgnum+1;change();" title="다음 곡" onfocus='this.blur()'>>></a> </font>


<script language="JavaScript">


function setCookie( name, value, expiredays )
        {
        var today = new Date();
        today.setDate( today.getDate() + expiredays );
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
        }

if (pause == 0)
        {
        setTimeout("bgmusic.Filename =song[listnum][bgnum]", 500);
        final_list=listnum;
bgm=window.open('bglist.htm','bglist','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=no,scrollbars=no,width=260,height=240,left=100,top=100');
        bgm_open=1;
        play_state.innerHTML='<font color="#9900FF">Play</font>';
        list_state.innerHTML='<font color="#9900FF">List</font>';

        }
        else
        {
        play_state.innerHTML='<font color="#000000">Play</font>';
        list_state.innerHTML='<font color="#000000">List</font>';
        }


</script>

<script language="JScript" for="bgmusic" event="EndOfStream()">
        setTimeout("to_next()", 100);
</script>


---------------------------------------------------------------------------------

2. BGM List 부분

아래의 내용을 그대로 'bglist.htm' 이라는 이름으로 저장하도록 한다. 디자인은 해당부분을 마음대로 바꾼다.

---------------------------------------------------------------------------------

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>BGM List-ClickToPlay</title>
<meta name="generator" content="Namo WebEditor v5.0">

<STYLE type="text/css">
<!--

a:hover { color:white; text-decoration:none; }
a:link {text-decoration:none; }
a:visited {text-decoration:none; }
a:active {text-decoration:none; }

--></STYLE>


<script language="JavaScript" src="bgm.js">
</script>

<script language="JavaScript">
final_list = opener.final_list;
opener.bgm_open = 1;
main_close = 0;
</script>

<script language="JavaScript">

if (document.layers) { document.captureEvents(Event.KEYPRESS); }

document.onkeypress = getKey;

function getKey(keyStroke)
{
var keyCode = (document.layers) ? keyStroke.which : event.keyCode;
if (keyCode == 27 && opener.pause==0 )
        {
               opener.setCookie( "lhc_m", "unchecked" ,7 );
               opener.play_state.innerHTML='<font color="#000000">Play</font>';
               opener.pause= 1;
               opener.bgmusic.pause();
               opener.first_change=0;
        }  

}

</script>

</head>

<body bgcolor="#9999FF" text="black" link="#333333" vlink="#333333" alink="#333333" oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onUnload="end_up()">

<font face="Trebuchet MS","돋움">
<span style="font-size:9pt;">
<p>

<script language="JavaScript">

function bglist(bgnum2)
{
opener.bgnum=bgnum2;
opener.listnum=final_list;
if (opener.pause == 0)
        {opener.bgmusic.Filename =song[final_list][bgnum2];}
        else
        {opener.change_while_pause = 1;}
opener.list_on_while_change=1;
self.open('bglist.htm','bglist');
}
function list_write()
{

self.document.write('List ');
for (i=0; i<total_list ; i++)
        {
        if (i==final_list) {self.document.write('<font color="9900ff">'+(i+1)+'</font></a> ');}
        else
        {self.document.write('<a href="#" onclick="javascript:list_change(' + i + ')">' + (i+1) + '</a> ');}
        }
}
function song_write(listnum2)
{
for (i=0;i<numsong[listnum2];i++)
        {
        if (i==opener.bgnum && listnum2==opener.listnum) {self.document.write('<font color="9900ff">'+song_caption[listnum2][i]+'<br></font>');}
        else
        {self.document.write('<a href="#" onclick="javascript:bglist(' + i + ');">' + song_caption[listnum2][i] + '</a><br>')}
        }
}

function list_change(listnum3)
{
opener.list_on_while_change=1;
opener.final_list=listnum3;
self.open('bglist.htm','bglist');
}

function end_up()
{
        if (main_close == 0)
                {
                if (opener.list_on_while_change == 0)
                        {
                        opener.bgm_open=0;
                        opener.list_state.innerHTML='<font color="#000000">List</font>';
                        }
                }
}

opener.list_on_while_change=0;
song_write(final_list);
self.document.write("<br>");
list_write();

</script>

</span> </font>

</body>

</html>

---------------------------------------------------------------------------------

3. BGM 목록 부분 : 아래의 내용을 자기가 원하는 대로 mp3나 wma, asf 파일 등 음악파일의 주소를 넣어서 bgm.js 라는 이름으로 역시 같은 폴더에 둔다. 음악파일의 주소는 상대이건 절대이건 마음대로 한다. 전체 리스트수, 음악파일 이름, 창에 뜨는 곡의 이름, 각 리스트 당 곡의 수 등을 입력해놓아야한다. 잠시 살펴보면 무슨 내용인지 쉽게 알수 있을듯.


--------------------------------------------------------------------------------

total_list=7;

song = new Array();
song[0] = new Array("1.wma", "2.wma", "3.wma", "4.wma", "5.asf", "6.wma","7.wma", "8.wma", "9.wma","10.wma");
song[1] = new Array("11.wma","12.wma", "13.wma", "14.wma", "15.wma", "16.wma", "17.wma", "18.wma", "19.wma", "20.wma");
song[2] = new Array("21.asf", "22.asf", "23.wma", "24.wma", "25.wma", "26.wma", "27.wma", "28.wma", "29.wma", "30.wma");
song[3] = new Array("31.wma", "32.wma",  "33.wma", "34.wma", "35.wma", "36.wma", "37.wma", "38.wma");
song[4] = new Array("39.wma", "40.wma","41.wma", "42.asf", "43.wma", "44.wma", "45.wma", "46.wma", "47.wma", "48.wma");
song[5] = new Array("49.wma", "50.wma", "51.wma", "52.wma", "53.wma", "54.wma", "55.wma", "56.wma", "57.wma", "58.wma");
song[6] = new Array("59.mp3", "60.mp3","61.mp3","62.mp3","63.mp3","64.mp3","65.mp3","66.mp3","67.mp3","68.mp3");
song_caption = new Array();
song_caption[0] = new Array(
"1. 러브홀릭 - 러브홀릭",
"2. 다시내게돌아와 - 조관우",
"3. Crush - Jennifer Paige",
"4. Let's Get Loud - Jeniffer Lopez",
"5. 백전무패 - 클릭비",
"6. Can't Fight the Moonlight - LeAnn Rymes",
"7. The Sign - Trombo Combo",
"8. The Sign - Ace of Base",
"9. 어떤가요 - 박화요비",
"10. Hero - Mariah Carey"
);
song_caption[1] = new Array(
"1. 챔피언 - 싸이",
"2. 여름아 부탁해 - 인디고",
"3. Love of My Life - Queen",
"4. 별똥별 - 스웨터",
"5. 김밥 - The 자두",
"6. 중화반점 - 루이스",
"7. Hard to Say I'm Sorry - Chicago",
"8. 무기여 잘 있거라 - 박상민",
"9. 팥빙수 - 윤종신",
"10. Don't Know Why - Norah Jones"
);
song_caption[2] = new Array(
"1. Norwegian Wood - Beatles",
"2. As Time goes by - Julie London",
"3. Valenti/Japanese - B.o.A",
"4. The Tide is High - Atomic Kitten",
"5. ThereShegoes - SixpenceNoneTheRicher",
"6. 팬이야 - 자우림",
"7. Substitute for Life - The Real Group",
"8. (I'm Still) Lost in You - Paris Match",
"9. Killer Queen - Queen",
"10. 굿바이 - 이수영");

song_caption[3] = new Array(
"1. 시간이 흐른 뒤 - 티",
"2. Too Much Love will Kill You - Queen",
"3. DerHolleRacheKocktInMeinemHerzen <br>    지옥의복수심내마음속불타올라 - 조수미",
"4. You're Still You - Josh Groban",
"5. Memories - 티",
"6. Somewhere over the Rainbow <br>                 - Israel Kamakawiwo'ole",
"7. Love me For a Reason - Boyzone",
"8. Something Special - 장연주");

song_caption[4] = new Array(
"1. All That She Wants - Ace of Base",
"2. I was born to Love You - Queen",
"3. 時には昔の話を - 加藤登紀子",
"4. Michelle - Beatles",
"5. My Love - Westlife",
"6. 슬픈 선물 - 신해옥",
"7. I'll be There - Mariah Carey",
"8. Good Old Fashioned Lover Boy - Queen",
"9. Oops I Did it Again - Britney Spears",
"10. Adagio for Strings - S. Barber");

song_caption[5] = new Array(
"1. 너에게난 나에게넌 -자전거탄풍경",
"2. 오해 - 오현란",
"3. 夢中人 - Chungking Express OST",
"4. Family Affairs - Mary J.Blige",
"5. Dreams - Cranberries",
"6. 인형의 꿈 - 러브홀릭",
"7. 덩그러니 - 이수영",
"8. 놀러와 - 러브홀릭",
"9. California Dreamining - Mamas & Papas",
"10. A Winter Story - Yuki Kuramoto");

song_caption[6] = new Array(
"1. 보고싶다 - 김범수",
"2. Never Ending Story - 부활",
"3. 태양을 피하는 방법 - 비",
"4. Without You - 1TYM",
"5. 라라라 - 이수영",
"6. 다신 - 이정",
"7. 비와당신의이야기 - 부활(original/classic)",
"8. 비상 - 코요테",
"9. Don't Stop Me Now - Queen",
"10. 사랑해도 될까요 - 유리상자");

numsong = new Array();
numsong[0] = 10;
numsong[1] = 10;
numsong[2] = 10;
numsong[3] = 8;
numsong[4] = 10;
numsong[5] = 10;
numsong[6] = 10;
제목 글쓴이 날짜
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.) [9] file tintintm 2004.03.23
버튼 만들기 [1] 旻天 2004.03.23
MS agent online object - Default Character 인 Merlin Action 추가 [2] 꽃ちゃん 2004.03.19
움직이는 타이틀바 [4] 김동현 2004.03.18
웹브라우저 상태바가 밑으로 내려오는 소스 [5] 프리서버 2004.03.16
브라우져(윈도우) 창의 크기(사이즈)를 조절하는 소스입니다 [5] 나야 2004.03.15
프레임사이트에서 자식 프레임(URL)로 직접 치고 들어 올경우 다시 프레임 부모로 돌려보내는 소스 나야 2004.03.15
전체 include menu 만들기(롤오버 이미지 사용) [4] Neoyoung 2004.03.14
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] ∑Ztxy 2004.03.10
뉴스티커 [16] file zero 2004.03.10
보안문서 만들기 [5] 민우주 2004.03.07
팝업 창 띄우고 어미창 사라지게 하는 소스 [5] piasol 2004.03.06
방문자 OS보여주기 [5] 구조반 2004.03.05
벅스뮤직 음악듣기 및 시작 정지 버튼 넣기(기타 음악파일도...) [3] 카멜롯™ 2004.03.04
회원 가입 페이지 이젠 끝이다 [5] 2004.03.03
우뚜같은 포워딩 페이지에서 프레임 깨기.(프레임 없애기) [17] 김영성 2004.02.19
벅스뮤직 플레이어 스크립트 추출기 [4] 이녀석 2004.02.16
XML+JS 연동 다중셀렉트 투헤븐 2004.02.16
BGM Player (배경 음악) [17] 장진석 2004.02.16
페이지 내에 주소창 달기 [1] piasol 2004.02.09