오픈소스 플래시 mp3 플레이어

tip & tech 2009/09/02 12:56 Posted by 엉뚱이
 
 
제가 운영하고 있는 사이트에 플래시로 된 mp3 플레이어를 달기 위해 이것 저것 찾아 본 끝에 낙점한 것이 바로 MP3 Player 입니다. 




처음에는 flash mp3 player라는 것을 사용하려고 했는데, mp3 파일의 한글 파일명과 한글 태그가 적용되지 않아 포기했습니다. 사실 flash mp3 player의 경우 페이지가 바뀌어도 캐쉬에서 mp3를 호출하는지 재생한 곳부터 다시 시작하는 기능이 있어서 좋은데, 한글 활용에 문제가 있어서 포기했습니다.




1. 설치

설치는 쉽습니다. 다운로드 받은 후에 압축을 풀고, FTP에 업로드하면 됩니다. 그런 후에 플레이어를 호출할 코드를 붙여 넣고자 하는 곳에 넣으면 됩니다.

코드의 종류는 (1) 직접 mp3 파일을 넣는 방법, (2) txt로 된 설정을 사용하는 경우, (3) xml로 된 설정을 사용하는 경우가 있습니다.

저는 (3)번을 사용했습니다. (3)번을 사용하려면 아래와 같은 코드를 플레이어를 붙여 넣고자 하는 곳에 삽입합니다.

<object type="application/x-shockwave-flash" data="player_mp3_multi.swf" width="250" height="150">
<param name="movie" value="player_mp3_multi.swf" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="configxml=configxml_multi.xml" />
<p>Texte alternatif</p>
</object>

그런데 제가 붙여 넣으려고 하는 곳이 XE로 된 것이고, 레이아웃에서 object 태그를 직접 넣으니 인식을 못하는 것입니다. 제가 못해서 그런 것일 수도 있지만, 어쩐지 않되더군요. 

그래서 꼼수를 사용했습니다.


2. 설치 꼼수

일단 mp3player.html 등과 같은 html 파일을 하나 만들어서 그 속에 위의 소스를 붙여 넣고, XE 레이아웃에서는 iframe으로 불러 오는 방식으로 설치를 했습니다. 

mp3player.html이라는 파일은 player_mp3_multi.swf 라는 파일과 같은 폴더에 있어야 합니다. 경로가 바뀌면 위의 소스에서 경로 지정을 다시 해 줘야 합니다. 이렇게 하니 IE, 크롬, 파폭에서 정상적으로 보입니다. 


3. 노래추가

xml을 사용하는 (3)번으로 했기 때문에 xml 코드를 변경하여 노래를 추가할 수 있습니다. 노래를 추가하는 방법은 configxml_multi.xml이라는 파일을 엽니다.

그럼 뭔가 복잡한 소스들이 있는데요.

그 중에 param name="mp3" value="****"이런 항목이 있습니다. ****표 한 곳에 mp3 파일 이름을 적어주면 됩니다. 001.mp3와 002.mp3 등과 같은 2개의 파일이 있다면 001.mp3|002.mp3 와 같이 적어줍니다. 파일과 파일을 구분하는 구분자가 | 입니다.

음악 파일은 player_mp3_multi.swf 라는 파일과 같은 폴더에 업로드 해 주면 됩니다. 업로드된 파일명과 xml에 입력한 파일명은 당연히 같아야 합니다.

param name="title" value="####" 라는 곳은 제목을 입력하는 곳입니다. 파일명과 같은 순서로 입력해 주면 됩니다. 구분자는 역시 | 입니다. 

이렇게 하면 여기에 적힌 파일이름을 플레이어가 인식을 하여 리스트에 뿌리고 선택하면 음악을 들을 수 있습니다.




4. 기타 옵션 설정

xml로 된 설정 파일에 다양한 파라미터(param) 값을 입력해 주면 여러가지 설정으로 활용할 수 있습니다.


플레이어의 가로(width), 세로(height) 크기도 지정할 수 있고, 음악을 랜덤하게 들여주도록 셔플(shuffle)할 수도 있습니다. 소리조정 메뉴의 크기(volumewidth, volumeheight)와 진행바의 길이(sliderwidth) 그리고 버튼의 크기(buttonwidth)까지도 지정할 수 있습니다. 플레이어의 배경, 버튼 등의 색상도 변경할 수 있습니다. 

위의 주소에 보면 기본값이 얼마이고, 어떻게 지정한다라고 적혀 있으니, 이것에 맞게 찾아 변경해 주면 됩니다. 

이렇게 하여 적용하면 아래와 같은 모습으로 나옵니다. 플레이어의 색상은 변경하지 않은 기본값입니다.



<적용 가능한 파라미터 값과 설명>
 

TRACKBACK :: http://www.heybears.com/trackback/2512555 관련글 쓰기

  1. 삼성YEPP MP3 플레이어 YP-U4 1주일 파격가 판매!!!

    Tracked from 감각있는 사람들의 모임, 센플닷컴 블로그  삭제

    세플닷컴 에서는 감성적인 디자인과 직관적인 인터페이스를 적용한 삼성전자의 USB 타입 MP3 플레이어 'U4'(모델명: YP-U4)를 9월 14일~ 9월 15일까지 1주일간 57,900원 이라는 파격적인 가격으로 깜짝 판매에 들어간다고 밝혔다. 'U4'는 지난해 100만 대 이상 판매된 밀리언셀러 MP3 플레이어 'U3'의 후속 제품으로 크리스탈 로즈, 네이비 퍼플, 오션 블루의 세 가지 색상으로 출시됐는데, 삼성전자의 디자인 아이덴티티로 자리잡은..

    2009/09/15 13:50

댓글을 달아 주세요

  1. Favicon of http://yurica.tistory.com BlogIcon Yurica  수정/삭제  댓글쓰기

    저도 이 플래시 mp3 플레이어는 잘 쓰고 있는데 한글도 제대로 나오는지는 미처 몰랐네요. xml이 아니라 txt로 했더니 한글을 못띄우더라고요.
    드디어 한글로 잘 띄워서 쓰게 되었습니다. 감사합니다 //ㅅ//

    2009/12/10 21:16

◀ Prev 1  ... 470 471 472 473 474 475 476 477 478  ... 1772  Next ▶
BLOG main image
e-learning blog : 이러닝 블로그
이러닝으로 세상을 바꾸고 싶습니다. 그리고 그 중심에 서고 싶습니다. 이제 시작입니다!
by 엉뚱이

카테고리

heybears.com (1772)
e-learning (596)
instruction design (109)
human resource (69)
biz trends (209)
tip & tech (310)
talks (370)
quick view (104)
  • 2,804,507
  • 1,0661,334
Statistics Graph
Tatter & Media get rss

e-learning blog : 이러닝 블로그

엉뚱이's Blog is powered by Tattertools / Supported by Tatter & Media
Copyright by 엉뚱이 [ http://www.ringblog.com ]. All rights reserved.

Tattertools Tatter & Media DesignMyself!
엉뚱이's Blog is powered by Tistory.com. Designed by Qwer999. Supported by Tatter & Media.