CategoryFolk · Prog · Psych · Retro · World · Non 5070s · Use

Wordpress type Flash MP3 Player for Tistory

Etc/Use 2007/01/13 21:08 by 'P'

사용자 삽입 이미지

설치형 외산 CMS툴인 Wordpress (이하 WP)용 Flash MP3 Player (Audio Player Wordpress plugin)의 최초 배포는 '1Pixelout'에서 이루어져 많은 유저들이 사용하고 있습니다.
티스토리는 유저가 직접 플러그인을 설치하는 개념이 없어서 '1Pixelout'에서 배포하는 플러그인 꾸러미중 재생모듈인 'player.swf'를 가지고 편법으로 티스토리에서 작동시켜 보겠습니다.
티스토리 내장 플레이어도 깔끔하고 이쁘지만 WP에서 건너오신 분들이나 WP용을 선호하시는 분들에게 방법을 추천합니다.
 
그전에 일전에 소개해드린
Dewplayer, XSPF도 같이 비교해봅니다. (이로써 3가지 모두 소개를......)

티스토리 내장 - 여러곡 (O), 볼륨조절 (X)
WP type - 여러곡 (X), 볼륨조절 (X)
Dew - 여러곡 (O), 볼륨조절 (X,일부가능)
XSPF - 여러곡 (O), 볼륨조절 (O)

1. 플래시 플레이어 모듈의 설치 (공개된 무료버젼)

-
http://blog.naver.com/acidheads/90013094806 (1Pixelout Player)
- 방문하시어 Player.swf를 다운로드후 압축을 해재하시고 임의의 계정에 업로드.
- 임의의 계정이 없으신 분들은 티스토리 비공개글이나 비공개 공지글에 엄부화일형태로 업로드하시면 오브젝트 속성보기에서 고정 URL을 따실수있습니다. (티스토리에서 언제 어떻게 변경될지 모르는 단점 존재)

2. mp3를 어디엔가 업로드후 URL 숙지

- 음원의 경우 개인 FTP를 올리는 계정은 필수는 아닙니다. 어디든 고정된 URL만 따면 되거든요.
- 임의의 계정이 없으신 분들은 해당 음원이 소개될 글에 업로드후에 HTML모드로 전환하시면 "##_Jukebox|song.mp3..."가 보이는데 song.mp3가 화일명이며 고정 URL은 '1차블로그주소아이디.tistory.com/attachment/song.mp3'
가 됩니다. (티스토리에서 언제 어떻게 변경될지 모르는 단점 존재)

3. 소스의 적용안내

<object type="application/x-shockwave-flash"
 data="
http://.../player.swf" width="290" height="24"
id="audioplayer1">
<param name="movie" value="
http://.../player.swf" />
<param name="FlashVars" value="soundFile=http://.../song.mp3" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" /></object>

- 상기는 디폴트 플레이어와 곡 등록 설정 : 녹색 (모듈 URL) 주홍색 (곡 URL)
- 세부 설정 (자동재생, 반복, 색상)을 원하시는 분들은 <param name="FlashVars" value="soundFile=..." 에서 밑줄친 이 부분을 수정하시어 사용하면 되는데 밸류값들은 아래와 같습니다.
(밸류의 연속사용은 ""안에서 ';'로 구분자)

autostart=yes 자동재생 (default value is no)
loop=yes : 반복 (default value is no)
bg=0xHHHHHH : 배경색
leftbg=0xHHHHHH : Left background colour 
rightbg=0xHHHHHH : Right background colour
rightbghover=0xHHHHHH : Right background colour (hover) 
lefticon=0xHHHHHH : Left icon colour 
righticon=0xHHHHHH : Right icon colour 
righticonhover=0xHHHHHH : Right icon colour (hover) 
text=0xHHHHHH : Text colour 
slider=0xHHHHHH : Slider colour 
loader=0xHHHHHH :Loader bar colour 
track=0xHHHHHH : Progress track colour 
border=0xHHHHHH : Progress track border colour 

4. 실제 적용 예

- 활용 예제 곡 소개 : 클릭

: 1 : ... 143 : 144 : 145 : 146 : 147 : 148 : 149 : 150 : 151 : ... 242 :