========================================================================= ▒ ExoBUD™ MP(I) v4.1 스크립트 사용설명서 ▒ ========================================================================= Version : ExoBUD™ MP(I) v4.1 plus Compatibility : Internet Explorer(이하 IE) v5.5 이상 (Netscape 비호환) MicroSoft Windows Media Player(이하 wmp) v 6.4 이상 Windows98 이상 (ME,NT,2000,XP 계열사용가능) Full Size : 폭(Width) 640 이상 / 높이(height) 25 (자막사용시: 80 이상) (C)Copyright ExoBUD™(Pe) 2001-2003, Design by Jinwoong, Yu. ========================================================================= ▒ ExoBUD™ MP(I) v4.1 사용상의 주의 사항 ▒ ========================================================================= 주의1 : Netscape에서는 본 스크립트가 작동하지 않습니다. 주의2 : Javascript(Jscript)로 제작된 만큼 대.소 문자 구별에 특히 유의하세요. ※ 본 스크립트의 저작권은 ExoBUD™에 있으며 저작권과 관련된 글을 삭제할 수 없습니다. ※ 본 스크립트를 응용 또는 수정한 2차 저작물에 대하여 저작권을 인정받을 수 없습니다. ※ 본 스크립트에 포함된 파일명 및 고유 명칭 등을 임으로 변경하여 사용할 수 없습니다. ※ 본 스크립트는 무료이며, 배포권은 배포에 대한 허가를 받은 사람에 국한됩니다. (배포를 원하시는 분은 메일로 문의해 주십시요 (exobud@hanmail.net)) ※ 본 스크립트의 사용으로 발생된 어떠한 문제에 대해서도 저작자는 책임지지 않습니다. ========================================================================= ▒ ExoBUD™ MP(I) v4.1 plus 특징 ▒ (참고사항이 많으므로 끝까지 읽으세요) ▒ ========================================================================= [1] 본 스크립트는 윈도우즈 미디어 플레이어(이하 wmp) v6.4개체를 사용한 스크립트로, wmp에서 재생이 가능한 모든 미디어 형식에 대하여 연속재생(선택재생)을 할수 있습니다. (인테넷 상에서 서비스를 할 경우 wma,asf 등의 스트림파일 형식을 사용하세요) [2] 미디어의 URL등록만으로도 "타이틀 추척기능"에 의한 미디어 정보 출력및 자막출력이 가능합니다. ("타이틀 자동복구기능"은 한번이상 재생을 시도한 미디어에 대하여 Author및 Title이 복원됩니다.) [3] 캡션(자막)기능을 설정하여 가사출력및 자막을 표시할 수 있습니다. (SMI 파일사용) (캡션관련 옵션 설정에 따라 캡션 출력 영역을 설정.해지할수 있습니다.) [4] 플레이리스트에서 재생할 미디어 목록을 체크한 후에 선택된 미디어만 재생할 수 있습니다. (플레이리스트 구성 : 선택을 위한 '체크박스' 및 '링크', 페이지분할,전체선택및해제, 선곡재생) ※ 재생도중 플레이리스트에서 선택 변경이 발생하면 동적으로 재생로직에 반영되어 자동재생됩니다. ※ 플레이리스트에서 링크를 클릭하여 재생한 경우 해당 미디어 재생후 대기모드로 전환합니다 [5] SEQUENTIAL, RANDOM 플레이 모두 가능합니다. (방문자가 언제든지 [S]또는 [R]버튼을 눌러서 모드를 변경할 수 있습니다) [6] 재생 진행 시간(elapse, lapse 형식 모두)을 표시할 수 있습니다. (방문자가 재생시간 표시부를 눌러서 Elapse, Lapse 형식을 동적으로 전환할 수 있습니다) (인테넷 익스플로러(이하 IE) 상태바에 재생중인 미디어의 타이틀및 재생 진행 시간 표시도 가능합니다) ※ 시간출력은 (시:분:초)형식이며 1시간 미만인 경우 (분:초)형식으로 출력됩니다 ※ 시간출력 부분은 플레이어 상태가 변경될 때마다 팁(Tip)을 표시하는 기능도 포함되어 있습니다. [7] 재생관련 오류 처리기및 오류 표시기능이 포함되어 있습니다. (재생오류가 발생하면 3회 재시도 후에 자동으로 다음 미디어의 재생을 시도합니다) [8] 관리자를 위하여 등록한 미디어 파일에 대한 실제 정보를 획득할 수 있는 Alert기능을 지원합니다. (Alert 기능은 음악 등록후 정상적으로 해당 미디어에 접근할 수 있는지 확인하는데도 유용합니다) [9] 볼륨조절이 가능하며 볼륨량을 표시할 수 있습니다 (Mute, Volume Up, Volume Down) (Mute[M] 버튼은 토클버튼입니다. 따라서 Mute 상태의 해지는 [M] 버튼을 누르거나, Volume Up, Volume Down 을 누르면 Mute 상태는 해지됩니다. ) [10] 재생에 꼭 필요한 Optimized Logics 를 제공합니다. ※ 등록한 트랙 전체를 1회만 재생하거나, 또는 연속 재생을 하도록 설정할 수 있습니다. ※ 재생이 진행중인 경우 재생버튼을 눌러도 처음부터 재생되지 않도록 키락이 설정되어 있습니다. ※ [L]버튼은 Repeat 기능을 갖는 토글키이며 랜덤모드에서도 현재 재생중인 곡을 다시 재생합니다. ※ [Ⅱ] 버튼은 Pause 및 Play 가 가능한 토글버튼입니다. ※ 플레이어 상태 변화에 따른 메시지 팁을 출력합니다. [11] 재생가능한 미디어 파일 형식은 윈도우 미디어 플레이어에서 재생 가능한 모든 형식입니다 (인터넷상에서 미디어 서비스를 할 경우 반드시 스트림파일형식(asf,wma 등)을 사용하세요) [12] 뮤직비디오 (wmv와 같은 VOD) 플레이어로도 사용이 가능합니다. VOD로 사용할 경우 WMP 개체 파라미터및 그 개체에 적용된 스타일의 width,height를 변경하세요 (exobud.js 파일에서 뮤직비디오 사용을 위한 변수 설정 부분이 있으므로 참고하시기 바랍니다) ====================================================================== ▒ ExoBUD™ MP(II) v4.0 plus 를 홈페이지에 넣는 첫걸음 ▒ ====================================================================== (1단계 : 압축풀기) 배포되는 플레이어 파일은 모두 알집(ALZip)으로 압축된 것입니다. zip, alz 파일 형태로 받으신 분은 반드시 알집(ALZip)으로 풀으셔야 합니다. exe 파일로 받으신 분은 실행후 압축을 풀 드라이브 위치만 지정하시면 됩니다. 압축을 푼 폴더는 *.html,*.js 파일및 img 폴더와 sample 폴더로 구성되어 있습니다 (2단계 : 미디어 준비) 인터넷에 음악이나 비디오를 서비스 하기 위해서는 스트림형식(asf,wma 등)의 미디어를 준비해야 합니다 ※ wmtools 4.x 를 이용하여 비스트림파일(예:avi,mp3,wav등)을 asf 형식으로 바꾸거나, ※ 윈도우즈 미디어 인코더 v7.x 이상으로 wma 등의 스트림 파일 형식으로 바꾸세요 (http://exobud.nayana.org 로 오시면 간단히 asf형식으로 변환하는 방법이 기술되어 있습니다) asf,wma등으로 인코딩한 미디어는 사용자님의 웹사이트에 업로드하시기 바랍니다. (각 미디어의 이름은 가능한 영문소문자로만 구성되도록 하세요(공백,특수문자 사용금지)) 일부 웹서버의 경우 스트림 파일을 지원하지 못하는 경우가 있으므로, 이 경우 다른 웹서버를 선택하세요 (mms서버가 아니면 일반 웹서버에서는 버퍼링을 지원하지 않으며, 완벽한 스트리밍 처리는 못합니다) ====================================================================== ▒ 옵션(Option) 설정 및 재생 미디어 등록 ▒ ====================================================================== (주의) 옵션설정 및 미디어 등록을 위한 사용자 편집 작업은 "메모장" 에서 이루어 집니다. 다수의 스크립트로 구성된 관계로 특정 웹에디터로 편집하는 경우 오류가 발생할 수 있습니다. 어렵지않은 작업이므로 반드시 아래 절차에 따라 수정하시기 바랍니다. (1단계 : 플레이어 확인) exobud.html 을 인터넷 익스플로러(이하 IE)로 오픈합니다. ※ 재생 버튼을 눌러 샘플 미디어가 재생이 되는지 확인 합니다. (아래 옵션 설정 부분의 var blnUseSmi=true 로 설정하면 자막을 볼 수 있습니다) 재생이 되지 않는다면 샘플로 등록된 음악의 경로가 바뀌었거나 없는 경우입니다. (^^;) ※ IE 버전이 낮거나 윈도우즈 미디어 플레이어(이하 wmp) 버전이 낮은 경우 작동하지 않습니다. (IE 5.5 이상 / wmp 6.4 이상이 요구되며, Netscape에서는 작동하지 않습니다) ※ IE 설정 언어가 한국어가 아닌 경우 비정상적으로 보일수 있습니다. (IE 메뉴의 [보기]>[인코딩]에서 자동선택및 한국어로 바꾸세요) (2단계 : 플레이어 옵션설정) exobud.html 을 인터넷 익스플로러(이하 IE)로 오픈한 상태에서 소스보기를 합니다. (마우스 우클릭 후 "소스보기" 또는 메뉴의 [보기]탭의 [소스]를 선택하세요) "메모장"으로 플레이어의 소스인 exobud.html 의 내용이 출력될 것입니다. 아래 부분을 찾아서 사용자의 취향에 맞게 설정하시기 바랍니다. (※주의 :스크립트 변수 설정이므로 true 또는 false로 반드시 소문자에 유의하세요) // 토글 버튼(Loop, Pause, Mute)들의 On/Off 상태에 대한 색상을 정의하세요 // (주의) btnOffColor 은 스타일 정의부의 .buttons 의 background-color 와 같아야 합니다. // 16진 형식(#cccccc)의 color 값은 반드시 #를 떼고 넣으세요 var btnOffColor = "ffffff" ; var btnOnColor = "cccccc" ; // 플레이어가 로드된 후에 바로 재생을 시작할 것인지 결정하세요: 자동재생(true) | 대기모드(false) // 기본값은 false이지만 웹상에서는 일반적으로 true로 설정하여 자동재생을 하는 경우가 많습니다. var blnAutoStart = false; // 재생을 목록순으로 할 것인지, 무작위로 할 것인지 결정하세요: 순차재생(false) | 랜덤재생(true) // 초기의 기본 설정일뿐, 사용자가 언제든 재생 모드를 변경할 수 있습니다. var blnRndPlay = false; // 타이틀 출력부분을 사용할 것인지 결정하세요: 타이틀 출력(true) | 타이틀 감춤(false) var blnShowTitle = true; // 타이머 출력부분을 사용할 것인지 결정하세요: 타이머 출력(true) | 타이머 감춤(false) var blnShowTime = true; // 웹브라우저의 상태바에 타이틀 내용을 출력할것인지 결정하세요: 내용출력 (true) | 내용감춤(false) var blnStatusBar = true; // 볼륨 컨트롤러를 보여줄 것인지 결정하세요 : 볼륨조절기(true) | 볼륨조절생략(false) var blnShowVolCtrl = true; // 플레이리스트 버튼을 감출것인지 결정하세요 : 플레이리스트 버튼(true) | 버튼감춤(false) // false 설정하면 플레이리스트에서 사용자가 미디어 선택을 할 수 없게 되므로 유의하세요. var blnShowPlist = true; // 자막(SMI 캡션파일)을 사용할 것인지 결정하세요 : 자막사용(true) | 자막없음(false) // true로 설정하면 자막영역이 표시되며, 샘플미디어의 자막도 확인이 가능합니다. var blnUseSmi = false; // 전체 트랙을 재생할 회수를 결정하세요 : 전체 트랙 반복 재생(true) | 한번만 재생(false) // 배경음악 플레이어로 사용할 경우 true로 설정하는 것이 좋을 듯 합니다. var blnLoopTrk = false; // 재생중인 미디어 자체가 갖는 실제 정보를 얻고자 한다면 아래 값을 true 로 설정하세요 // Alert형식으로 정보가 제공되며, 음악등록에 오류가 있는 경우 정보 출력은 되지 않습니다. // 음악등록이 정상적인지 확인하기 위한 관리팁이므로 실제 웹사이트에 업로드할땐 false로 설정하세요 var blnShowMmInfo =true; (3단계 : 미디어 등록 하기) 위 옵션설정이 끝나면 곧바로 이어서 아래 형식으로 스트림 형식의 미디어를 등록하시기 바랍니다. 아래의 샘플로 등록된 부분을 찾은 후에 그 부분에 이어서 등록하면 됩니다. (물론 샘플로 등록된 부분은 실제 인터넷에서 사용할 때는 삭제해야 합니다) mkList("./sample/seattle.wmv" ,"시애틀 이야기", "./sample/seattle.smi"); mkList("http://my.netian.com/~exobud/asf/remakeup.asf" ,"왁스-화장을 고치고" ,"http://my.netian.com/~exobud/asf/remakeup.smi"); 위 부분을 찾으신 후에 아래형식을 참고하셔서 웹상에 업로드한 미디어를 등록을 하세요 물론, exobud.html 에 기본적인 설명이 추가되어 있으므로 음악등록이 어렵지는 않을 것입니다 음악 등록 전체 형식 : mkList("미디어URL","타이틀명","자막파일명", "선택제외플래그(f)"); ※ 일반 음악 등록 형식 : mkList("미디어URL","타이틀명"); ※ 등록 후 선택은 제외 : mkList("미디어URL","타이틀명","", "f"); 자동 제목 추적 형식 : mkList("미디어URL"); 주의(1) : 미디어 경로입력시 " "사이에 (특히 앞.뒤에)공백을 넣으면 경로가 바르게 인식되지 않습니다. [필독] 대다수 사용도중 발생하는 스크립트의 오류는 미디어 등록과정에서의 사용자 실수 때문입니다. 한곡한곡 정확히 등록및 테스트하면 한꺼번에 등록한 후에 오류를 찾는 것보다 용이합니다. 옵션설정및 미디어 등록이 완료된 후에는 반드시 "저장"을 하신후에 IE로 다시 불러오거나 "새로고침"을 하여 정상적으로 미디어가 등록되었는지, 오류는 없는지 등을 필히 확인하시기 바랍니다. ====================================================================== ▒ 홈페이지에 플레이어 넣기 ▒ ====================================================================== 옵션설정및 재생할 미디어 등록이 완료되었다면 웹사이트에 플레이어 파일 전체를 업로드해야 합니다. (플레이어에 포함된 sample 폴더를 제외한 모든 html, js 파일및 img 폴더를 업로드하세요) FRAME 테그를 이용하여 위에 업로드된 exobud.html 을 원하는 html의 프레임에 넣으면 됩니다. (플레이어 사이즈가 폭(width)이 대략 640, 높이(height)가 25(자막사용시 80)정도 입니다) (프레임 영역의 크기는 플레이어가 다 볼일 수 있도록 적절히 조절하세요) FRAME및 IFRAME의 사용법은 HTML 테그이므로 관련 서적이나 인터넷을 참고하세요 IFRAME을 사용할 경우 아래 부분을 참고하세요(홈페이지 제작 초보자는 IFRAME 사용에 유의) IFRAME 테그는 일종의 레이어(Layer) 처럼 어떤 html 에서든 쉽게 사용될 수 있지만, 방문자 네비게이션에 의한 플레이어의 실종이 발생하지 않도록 유의하셔야 합니다. 가능한 index.html 에 FRAME을 구성하여 플레이어를 고정적으로 배치하시기 바랍니다. ====================================================================== ▒ 고급사용자 : 플레이어 배경색 및 이미지 관련 ▒ ====================================================================== 각 html 파일들은 style 정의를 해놓았기때문에 해당 style 테그부분을 보시면 쉬울 것 같습니다. 이미지 위주인 경우 해당 이미지를 편집하거나 바꾸어 주시면 됩니다. (a) 플레이어 색상 바꾸기 (exobud.html) exobud.html 를 IE에서 소스보기를 하면 style 테그 부분에 항복이 보일 것입니다. BODY { margin: 0px 0px 0px 0px; background:white; cursor:crosshair;} .title{ BORDER-LEFT: silver 1px solid; BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-BOTTOM: silver 1px solid; COLOR:black; BACKGROUND-COLOR:white; FONT-FAMILY: 굴림,돋움, verdana;FONT-SIZE:11px; } .time{ BORDER-LEFT: silver 1px solid; BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-BOTTOM: silver 1px solid; COLOR:black; BACKGROUND-COLOR:white; FONT-FAMILY: 굴림, 돋움,verdana;FONT-SIZE:11px;} .buttons { BORDER-LEFT: silver 1px solid; BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-BOTTOM: silver 1px solid; COLOR:#555555; BACKGROUND-COLOR:#ffffff; FONT-FAMILY: 굴림, verdana; } ※ 플레이어 전체배경색은 BODY 항목의 background 값을 변경하세요 ※ .title 는 플레이어의 타이틀 표시부분의 스타일을 정의합니다. ※ .time 는 플레이어의 타이머 출력부분의 스타일을 정의합니다. ※ .buttons 는 플레이어의 컨트롤 버튼에 대한 스타일을 정의합니다. (주의) .buttons 에 정의된 background-color 값은 환경설정변수 btnOffColor 과 같은 값이어야 합니다. (b) 자막 영역 세부설정 (exobud.html) 캡션을 사용하지 않더라도 아래 코드를 삭제하면 오류가 발생합니다. 캡션을 사용하지 않을 경우 옵션설정부분에서 아래 부분을 false로 설정하면 캡션은 사라집니다. // 자막(SMI 캡션파일)을 사용할 것인지 결정하세요 : 자막사용(true) | 자막없음(false) var blnUseSmi = false; 자막의 위치를 바꾸고자 한다면 위 코드부분을 원하는 위치에 옮기면 됩니다. width및 height 값을 적절히 바꾸어서 사용하시면 원하는 사이즈로 자막영역을 설정할 수 있습니다. smi 파일의 텍스트를 대부분은 "흰색"으로 사용하므로 배경색은 진회색계열의 #555555 입니다. smi 파일의 텍스트를 검정계열로 할경우 background-color 를 밝은색으로 바꾸시기 바랍니다. font-size는 smi 파일의 캡션과 무관하므로 수정하지마시기 바랍니다. 출력되는 캡션의 글꼴 색상및 크기 등등은 smi 파일을 수정하셔야 합니다. (c) 플레이리스트에서 배경변경 (exobudpl.html) 스타일 정의부분에서 body 부분을 정의한 곳을 보시기 바랍니다. BODY { scrollbar-face-color: #eaeaff; scrollbar-shadow-color: #44a0f0; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #44a0f0; scrollbar-darkshadow-color:#44a0f0; scrollbar-track-color:#55b0ff; scrollbar-arrow-color: #666666; font-size:12px; background:url(lhouse_l.jpg) white no-repeat fixed right 94%;} scrollbar 란 접두어가 붙는 것은 스크롤바에대한 색상정의 부분입니다. background:url(bg_skin1.jpg) white no-repeat fixed center 340; 이 부분을 변경하세요 배경에 사용될 이미지 경로(url부분)와 그 다음이 배경색이 됩니다. (d) 플레이리스트에서 각 음악 리스트의 색상 (exobudpl.html) 스타일 정의부분에서 아래의 anchor 정의 부분을 보시기 바랍니다. A:visited { color: #444444; text-decoration: none } A:active { color: #444444; text-decoration: none } A:hover {color:darkblue; text-decoration: none ; cursor:w-resize;} A:link { color: #444444; text-decoration: none } 각 음악의 색상은 일반적인 링크색상 변경과 같습니다. A:visited :는 한번이상 클릭한 적이있는 경우의 색깔... A:active : 현재 활성화된 링크색깔... A:hover : 마우스가 해당 목록에 놓여질때의 색상 A:link : 원래 링크색깔... color 값을 원하는 색상으로 바꿀수 있습니다. (f) 플레이리스트에서 트랙번호 색상 (exobudpl.html) 스타일 정의부분에서 아래의 TD 정의 부분을 보시기 바랍니다. TD {font-family:굴림;font-size:12px; color:silver;} 플레이어에서 바꾸듯이 이곳을 바꾸어 주시면 플레이리스트의 트랙번호 글자색 크기 글꼴을 바꿀수 있습니다. ====================================================================== ▒ 기타 참고 사항 ▒ ====================================================================== ExoBUD 홈페이지에 오시면 최신 업데이트된 소스를 받으실수 있습니다. 문제점이 있거나 궁금한 점이 있다면 아래 홈주소로 직접 오시면 감사하겠습니다. 홈페이지 : http://exobud.nayana.org e-mail : exobud@hanmail.net icq : 96138429 (authorization mode 이므로 사유를 밝혀주셔야 Add 됩니다.)