티스토리의 블로그들을 돌아다니다보면 가끔 티스토리 기본 음악 플레이어로 음악 스트리밍을 제공하는 블로그들이 있습니다.
포스트의 분위기에 맞춰서 BGM을 제공하거나 소개하고픈 음악이 주제이거나...기타 여러가지 이유로 음악을 플레이하곤 하는데 문제는 티스토리에서 기본으로 제공하는 음악 플레이어가 볼륨 조절 기능이 없다는 것입니다.

이 문제는 티스토리 초기 때부터 계속 사용되어진 flash 기반 음악 플레이어가 조금의 버전업도 없이 그대로 쓰여져서 발생한 상황으로 여겨지는데 (마이너 업그레이드가 있었는지는 모르겠지만... ) 유저들의 피드백이 없었던지 자체적으로 문제가 될만한 상황이 아니라고 판단했는지 모르겠으나 볼륨 조절이 없다는건 치명적인 문제입니다.

누가 웹에 있는 음악을 들으려고 제어판의 메인 볼륨을 만지작거리고 싶어하겠습니까?
분명히 대부분의 음악들의 볼륨이 너무 크게 터져나오거나 잘 들리지 않는 상황에서 말이죠.

설치형 블로그에서는 디자인 문제라던지 기타 여러가지 문제로 기본 제공 플레이어들을 커스터마이징하는 여러가지 솔루션들이 유저들 사리에서 공유되고 있는데 아시다시피 티스토리는 수정이 상당히 자유롭지만 플러그인에 한해서는 유저가 손댈수 있는 부분이 전무하다고 해도 과언이 아닙니다.
그래서 많은 사람들이 외부 플레이어를 플러그인이 아니라 포스트 할때마다 끌어다 쓰는 방법을 취하고 있고 저도 마찬가지 입니다. - 디자인이 맘에 들고 안들고의 이유도 있지만 많은 부분, 볼륨 조절이 안된다는 핸디캡을 안고 포스팅 하기 싫어서겠지요.

사설이 길었는데 어쨌든 제 블로그를 자주 찾아주시는 시작의 끝님의 블로그를 사진들이 너무 좋아서 자주 방문하다보니 한가지 도움을 드릴려고 이런 포스트를 작성하게 되었습니다.
사실 자동재생 음악이 나오고 게다가 티스토리 기본 플레이어를 써서 볼륨 재생까지 안되는 블로그는 일단 들어가자마자 황급히 빠져나오고 다시는 안가는데 시작의 끝님의 사진이 너무 좋아서 종종 방문하다보니 티스토리의 기본 플레이어에 대한 아쉬움이 점점 커지더군요.
이런 류의 고민을 가지고 있으신 분들이 더 계시다면 이 포스트로 도움을 받으시길 바라며 그간 찾아봤던 외부 플레이어들을 조금 정리해보자면...

1.JW Player

이 플레이어는 이런 류의 웹기반 플레이어 중에서 가장 유명하지 않나 싶습니다.
다양한 변종과 개조버전도 있고 현재는 상용화까지 된 상태입니다. - 개인 유저는 무료
홈페이지 - http://www.longtailvideo.com/players/
거의 어지간한 기능은 하나의 swf 플레이어로 모두 이용 가능합니다. (비디오, 오디오, 사진 등등.......)
저도 이전에 상당히 자주 이용하던 플레이어인데 버전업이 하도 자주 되서 따라가다가 그냥 구 버전 쓰고 있습니다...^^
이 플레이어의 장점 중 하나는 웹에서 세부적인 설정이 가능하다는 것이며 기본 플레이어의 형태는 아래와 같습니다.
2008/07/22 - [TrancE] - Vocal Trances Pres. by Tiesto

설정하기에 따라서는 아래와 같은 모양도 꾸밀수 있습니다.  (단지 설정값에서 숫자만 조금 바꿔주면 가능합니다..)


설정은 http://www.longtailvideo.com/support/jw-player-setup-wizard  에서 가능하며 코드를 얻을수 있고,
스킨은 http://www.longtailvideo.com/addons/skins 에서 쉽게 구할수 있습니다.
다운로드는 http://www.longtailvideo.com/jw/upload/mediaplayer.zip  에서 가능합니다.

아래의 예제는 음악을 넣었을 때의 뮤직 플레이어입니다.
색상과 버튼 배치, 크기는 flash var 를 수정해서 조절할수 있고 아니면 위의 설정 마법사를 통해서 할수 있습니다. 



JW Player는 주크박스를 만들때도 많이 활용하는데 아래와 같이 리스트 플레이가 가능하기 때문이죠.

   (클릭)

위의 뮤직 플레이어의 소스 코드는 다음과 같습니다.

<EMBED src=http://cfs.tistory.com/custom/blog/0/6272/skin/images/player.swf width=300 height=20 type=application/x-shockwave-flash allowscriptaccess="always" allowfullscreen="true" flashvars="height=20&amp;width=300&amp;file=http://liebe.tistory.com/attachment/cfile2.uf@213B1B425879BDBF283C26.mp3&amp;backcolor=0x000000&amp;frontcolor=0xFFFFFF&amp;lightcolor=0xFFFFFF">

view plain 하면 크게 보입니다. 간략히 설명하자면 Embed src="  " 부분에 위의 다운로드한 player.swf 의 주소를 넣으시면 되고 file=" " 부분에 mp3 링크를 넣으시면 됩니다. - 사실 이것만 자세히 알고 있으면 됩니다.
기타 세부적인 코드는 그냥 셋업 마법사에 가서 자신이 직접 플레이어를 꾸미고 결과로 나온 코드를 계속 재활용하는게 속편하겠죠... 써먹을때마다 계속 플레이어 만드는건 귀찮은 일이니까요..

워낙 유명한 플레이어라 구글링하면 수많은 정보가 있고 한국 유저들도 많은 분석을 해놨습니다.
개조 버전도 많고요...
사실 기능적으론 가장 진보한 플레이어라고 생각됩니다.

PS 
Adobe Flash 10 버전의 호환성 문제로 인해 player.swf의 플레이어 이름이 바뀌면 재생이 안되는 사태가 벌어질수 있습니다.
포스트에 업로드 하고 주소를 따지 마시고 skin 업로드 기능으로 올리신후 주소를 따셔서 사용하시기 바랍니다.
mp3 화일명은 관계없습니다.

2. DEW Player

주소 : http://www.alsacreations.fr/dewplayer-en

사실 저 주소를 가보면 JW 플레이어와 별 다를게 없다는걸 아시게 될겁니다.
코드 제너레이터 제공하는 것도 그렇고 코드가 좀 더 깔끔하고 mp3 의 기능만 제공하고 디자인이 좀 이쁘다 정도?
예전엔 저도 이 플레이어를 많이 썼는데 어느때인가부터 볼륨 조절 버튼이 빠지면서 릴리즈가 되더군요.
현재 기본 제공하는 세가지 타입의 플레이어는 전부 볼륨 조절이 빠져 있습니다.

그런데 예전 버전 (재작년인가 릴리즈된 버전...)을 사용하면 볼륨 조절이 가능합니다.



다운로드

위의 볼륨 버전의 소스 코드는 다음과 같습니다.

<object type="application/x-shockwave-flash" data="http://liebe.tistory.com/attachment/4939783beec159O.swf?son=http://liebe.tistory.com/attachment/jk73.mp3" width="240" height="20">
<param name="movie" value="http://liebe.tistory.com/attachment/4939783beec159O.swf?son=http://liebe.tistory.com/attachment/cfile2.uf@213B1B425879BDBF283C26.mp3">
</object>

JW Player 와 마찬가지로 플레이어 swf 와 mp3 주소만 적어주시면 됩니다.
data=" " 플레이어 경로,  son=" "  mp3 경로

깔끔하고 이쁘지만 크기나 칼라 조절이 불가능한 단점이 있습니다.
허나 설정이 굉장히 쉽고 단순한 장점도 있는데 설정이야 초기에 한번만 신경써주고 그후에는 계속 재활용하는 것이니 큰 장점이라 말하긴 힘들듯....

3. NeoLao Player

이 플레이어는 오픈소스 플레이어인데 디자인적으로 조금 안이쁘다 싶기는 하지만 다양하게 설정이 가능합니다.
정말 자기가 원하는 만큼 수정이 가능하고 플레이어 자체를 커스터마이징이 가능해서 사용자의 사용 여부에 따라서 상당히 훌륭한 플레이어가 될 가능성이 높습니다.
- 그림 화일을 즉석 스킨으로 이용도 가능합니다...
제가 사용한 예제는...
10 Tunes of the second Half of '2008 를 보시면 이렇게도 꾸밀수 있구나....싶으실겁니다.

홈페이지는 http://flash-mp3-player.net/ 이며 베리어스 타입이라 적혀 있는 버튼을 누르면 각각의 기본 모양새가 나오고 수정 가능한 선택 박스가 나옵니다.
거기서 수정하신후에 코드를 받아서 활용하시면 됩니다.



이것은 제가 플레이 기능만 커스터마이징 한 것인데 모든 버튼을 다 없애고 플레이와 볼륨만 남겨둔 것입니다.

<object type="application/x-shockwave-flash" data="http://liebe.tistory.com/attachment/493ee2a66a8079I.swf" width="85" height="20"> <param name="movie" value="http://liebe.tistory.com/attachment/493ee2a66a8079I.swf" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="mp3=http://liebe.tistory.com/attachment/493e822828f7192.mp3&amp;width=85&amp;loop=1&amp;showstop=1&amp;showvolume=1&amp;showslider=0&amp;showloading=always&amp;volumeheight=8&amp;bgcolor1=ffffff&amp;bgcolor2=cccccc&amp;slidercolor2=999999&amp;sliderovercolor=666666&amp;buttoncolor=9999999&amp;buttonovercolor=0&amp;textcolor=0" /></object>

위의 예들과 마찬가지로 swf 플레이어를 업로드한 주소를 적어주고 mp3 경로도 적어주시면 끝납니다.

4. XSPF Web Music Player

 

 http://musicplayer.sourceforge.net/

이 또한 오픈 소스 플레이어인데 해외의 상업적 사이트에서 많이 이용되고 있습니다.
예제 : http://www.armadamusic.com/

위의 플레이어들과 크게 다르지 않은 설정과 기능입니다.

5. 부록

플래시 플레이어 중 워드 프레스용으로 개조되어 많이 쓰이는 플러그인이 있는데 텍스트큐브용으로 재 컨버전해서 쓰이는 것들이 있습니다.



요로코롬 생긴 넘인데 아직까지 볼륨 조절이 되는 플레이어를 못본 것 같습니다.
이뻐서 써볼려고 했다가 볼륨 조절이 안되서 관둔 모델이지요...OTL

홈페이지는 http://www.macloo.com/examples/audio_player/ 입니다.

5. 정리

위의 플레이어들이 소스코드도 나오고 뭔가 복잡하다고 느껴지실테지만 간단하게 정리를 해보자면....

1. 각각의 플레이어의 홈페이지에서 툴킷을 다운로드 받는다.
2. 홈페이지들에서 제공하는 설정 위자드를 통해 자신에 맞게 설정하고 코드를 받는다.
3. swf 화일이 플레이어 화일이므로 각자의 계정에 업로드를 하거나 티스토리 스킨 업로드 기능으로 업로드한다.
4. 업로드한 주소를 딴다.
5. mp3 도 티스토리에 업로드하고 그 주소를 딴다.
6. 이전에 받았던 코드에 swf 주소와 mp3 주소를 잘 입력한다.
7. 코드를 잘 보관했다가 필요할때마다 mp3 주소만 바꿔가며 써먹는다...
8. 끝.

Web-Embeded Player

Alternative content

2009.01.14 Updated

link 님의 제보에 따라 워드프레스용 플러그인의 테스트를 해보았고 잘 플레이 됩니다.
티스토리 유저는 http://wpaudioplayer.com/standalone 여기를 참고하시어 설치하시면 됩니다.
볼륨 버전이 늘 아쉬웠는데 정말 희소식입니다....^^
swfobject의 크로스 도메인은 문제가 안되는거 같은데... js와 mp3의 경로가 문제가 되어 ID 태그와 프로그레스바 작동이 안되는거 같네요. 티스토리에 응용하는걸 조금 더 연구해봐야 할듯....


2009.01.14 Updated
2009/01/26 - [괴상망측BOX] - 티스토리에서 활용가능한 Web-Based Player 부록
주소를 따는 문제로 문의가 많이 들어와서 서비스팩을 발행합니다.
참고 바랍니다.