티스토리에서 활용가능한 Web-Based Player

티스토리의 블로그들을 돌아다니다보면 가끔 티스토리 기본 음악 플레이어로 음악 스트리밍을 제공하는 블로그들이 있습니다.
포스트의 분위기에 맞춰서 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 의 기능만 제공하고 디자인이 좀 이쁘다 정도?
예전엔 저도 이 플레이어를 많이 썼는데 어느때인가부터 볼륨 조절 버튼이 빠지면서 릴리즈가 되더군요.
현재 기본 제공하는 세가지 타입의 플레이어는 전부 볼륨 조절이 빠져 있습니다.

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



다운로드

dewplayer-vol.rar

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

<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

사실 쉽다 쉽다 해도 HTML 코드에 경기를 일으키는 분들이 많으실겁니다.
저도 HTML에 익숙하지 않아서 남들이 해놓은거 활용하는 수준인데, 그런 사람들은 그냥 웹에서 음악 화일 업로드하고 플레이어를 위젯 형식으로 제공하는 플레이어를 사용해도 좋습니다.
저는 티스토리의 10메가 업로드 제한 때문에 종종 이용하곤 하는데 - 믹스셋 같은건 mp3 하나가 100메가는 우습게 넘어가죠. -  그중 써보니 버퍼링도 없고 좋더라 하는 곳들을 추천해 드립니다.


1. IMEEM

믹스셋을 올릴때 제가 굉장히 애용하는 곳입니다.
http://www.imeem.com/

예제 :
2009/01/10 - [TrancE] - TATW - Vote for Record of the Year #250
2009/01/06 - [TrancE/ASOT podcast] - A State Of Trance Official Podcast Episode 065

 

크기와 위젯 칼라 등등은 기본적으로 설정되어 있는 몇몇 프리셋에서 선택 가능하고 코드를 수정하여 더 세밀하게 수정할수도 있습니다.
용량 제한이 없고 음악 뿐 아니라 동영상도 버퍼링이 거의 없이 사용 가능하며 전세계적으로 유저층이 막강하며 아티스트들이 직접 홍보 목적으로 자신의 음원들도 많이 올립니다.
검색해서 나오는 수많은 음원들을 자신만의 플레이 리스트로 만들수 있고 그것을 위젯화시켜 코드를 받을수도 있습니다.
상당히 괜찮은 서비스입니다.



2. BOXNET

박스넷은 사실 음원용 사이트는 아니지만 위젯 기능으로 업로드된 음원을 웹에서 플레이 가능하고 다운로드도 가능합니다.
가입과 업로드가 상당히 쉽고 스트리밍에 사용하기엔 해외 서비스지만 충분한 성능을 냅니다.
http://box.net/





3. My Falsh Fetish

http://www.myflashfetish.com/
처음엔 페티쉬라 그래서....잇힝....했는데 그게 그게 아니더군요....ㅡ.ㅡa
비주얼적으로 상당히 즐거움을 줍니다.
쓸만한 서비스이긴 한데 잘 이용은 안하게 되더군요.
작은 크기의 음원들은 그냥 티스토리를 이용하는 습관이 들어서....

 



4. GoEar

http://www.goear.com/index.php
업로드와 함게 위젯을 제공하고 음원 검색도 가능한 곳입니다.
제공 플레이어 위젯이 상당히 깔끔합니다.

블로그 포스팅에 직접 유저가 삽입 가능한 플레이어는 가능한 사용이 쉽고 디자인이 이쁜 것을 위주로 골랐습니다.
제가 자주 사용하는 것들이죠.
웹에서 위젯을 받아오는 형식들의 서비스들은 스트리밍이 느리지 않고 업로드 제한 같은게 없는 그런 서비스를 위주로 골랐습니다.  특히 저는 IMEEM을 애용하는게 여기는 업로드 제한이 아예 없습니다.

티스토리 음원 필터링.....대체 뭐하자는 건지 모르겠습니다.
제 블로그를 자주 방문하시는 분들은 아시다시피 저는 국내 저작권이 있을만한 음원은 아예 취급하지 않습니다.
관심사가 트랜스에만 있어서죠.  (가요나 팝을 안듣기도 하고.... )
그런데 국내 저작권은 커녕 해외에서도 오픈된 저작권 자료도 블라인드 처리되는건 뭔지 모르겠네요.
그러지 않아도 블라인드 처리된 것들을 다시 한번 검색해보니 다 저작권없음으로 나오는데...ㅡ.ㅡa
요즘 불법 음원 문제가 심각하고 대책 마련에 깊이 공감하지만 - 다음과 네이버가 압력을 받는다는 것도 이해하지만  이런 식으로 마구잡이 블라인드는 좀 어이 없습니다.
하도 기가 차서 화일 삭제하고 다시 이름 바꿔 재업로드하니 그건 멀쩡....ㅡ.ㅡa
아무리 급하고 압력이 들어온다 해도 어느정도 서비스의 퀄리티가 보장된 연후에 추진해야 하는거 아닌가 하는 생각을 해봅니다.

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 부록
주소를 따는 문제로 문의가 많이 들어와서 서비스팩을 발행합니다.
참고 바랍니다.

저작자표시비영리동일조건

'괴상망측BOX' 카테고리의 다른 글

티스토리에서 활용가능한 Web-Based Player 부록  (18)	2009.01.26
세이브데이타 20202 외장 하드를 사용해 보다.  (63)	2009.01.22
티스토리에서 활용가능한 Web-Based Player  (55)	2009.01.11
2009년 첫 포스팅 및 새해 선물  (18)	2009.01.01
HanRSS 관련 정보  (1)	2008.12.02
드림스파크...과연 공짜 만세인가?  (0)	2008.12.02