메뉴 건너뛰기

조지아주닷컴

2013.03.06 22:06

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

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

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

 




처음에는 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)까지도 지정할 수 있습니다. 플레이어의 배경, 버튼 등의 색상도 변경할 수 있습니다. 

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

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



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

Who's 운영자

profile
저희 조지아주닷컴에서는 이곳 서명란에 자신을 나타내는 간단 프로필 정보를 입력하는 것을 권장합니다.

회원정보 수정을 통해 입력이 가능합니다. 링크 및 광고는 삭제처리됩니다.

회원정보수정하러가기

공지사항 자유게시판 이용에 대하여 운영자
List of Articles
번호 제목 글쓴이 조회 수
731 미국 명문대 - 성적순?? file Steven 7
730 [Emory 대학교 간호학과 온라인연구 참여자 모집] 대장·직장암을 진단받은 아시아 여성들을 대상 기술 기반의 정보 및 코칭/지지 프로그램 (50달러 기프트카드 증정) file sontcola 29
729 2024년도 H-1B 고용주 사전등록 3월1일부터 17일까지 file 그늘집 18
728 미국 투자이민개혁법안(EB-5 Reform and Integrity Act of 2022) file 그늘집 13
727 검은토끼의 해 기념 NewJeans 블랙버니 이벤트 file musinsa.global 40
726 11학년 2학기 학생들!! 올해 지원하지요?? file Steven 7
725 전 세계 항공권(관광)정보(213-388-4141) file 양인혜 12
724 미국 취업이민 3순위 비숙련직(EW-3) file 그늘집 26
723 AP 시험 대비반 오픈! file Steven 13
722 2023년 2월중 영주권문호 file 그늘집 6
721 [공맵대학백과]예일대학교 (Yale University) 공맵 9
720 [공맵대학백과]스탠포드대학교 (Stanford University) 공맵 8
719 [공맵대학백과]옥스퍼드대학교 (University of Oxford) file 공맵 6
718 [공맵대학백과]텍사스 대학교 오스틴 (The University of Texas at Austin, UT Austin) 공맵 18
717 리딩은 모든 성적의 기본이 된다 file Steven 9
716 교차 청구 규정(Cross-Chargeability Rule) file 그늘집 5
715 무신사 시즌 오프 세일 file musinsa.global 160
714 [공맵대학백과]존스홉킨스 대학교 (Johns Hopkins University) file 공맵 9
713 [공맵대학백과]노스웨스턴 대학교 (Northwestern University) 공맵 11
712 [세계대학백과]코넬대학교 (Cornell University) file 공맵 21
Board Pagination Prev 1 ... 10 11 12 13 14 15 16 17 18 19 ... 51 Next
/ 51
위로