블로그에 쥬크박스를 설치하다!!

블로그를 여기저기 돌아다니다 우연히 나비님의 블로그(나비의 일상생활)에 들어가게 되었다.
그 곳에서 나는 보면 안될 것을 보고 말았다. 바로 다름 아닌 쥬크박스!!! -_- 허억..
평소에도 음악을 너무 즐겨듣던 나는 구미가 당기지 않을수가 없었다;;
그래서 곧바로 따라해보기로 하였다.

참고 : 블로그에 쥬크박스를 달아보자! (Add.Tistory tip)

텍스트의 압박이 있었지만 하나하나 실행해보면 금방 하게 된다^^
두근거리는 마음으로 내 블로그에서 쥬크박스를 실행해보니 문제점을 발견하였다.
다행히 나비님의 도움으로 멋진(?) 쥬크박스를 달 수 있었다.

그 문제점 중의 하나는
관리자 모드 | 스킨 변경에서 볼 수 있는 skin.html 에서 쥬크박스를 팝업으로 보여주게끔 하는
아래 소스를 입력하였는데

<a href="javascript:void( window.open('경로', 'jukebox', 'directories=no, height=숫자, width=숫자, location=no, menubar=no, resizable=no, scrollbars=no, left=30 top=0'))" target="_top" onfocus="this.blur()">JUKE-BOX</a>

경로부분이 잘못 되었던 것이다.
일반적으로 나처럼 파일을 티스토리 계정에 올리면 해당 파일의 주소는 images/파일명이 된다.
그래서 나는 쉽게 생각해서 경로를 'http://nashimaryo.tistory.com/images/mp3player.html'로 나타낸 것인데 이는 잘못된 것이다.
올바른 경로는 'http://fs.tistory.com/custom/blog/28765/skin/images/mp3player.html'이다.
28765 숫자는 아직까지는 그 의미를 모르겠다;; +_+
이러한 경로로 지정을 하니 팝업으로 쥬크박스가 생성되었다.

하지만 두번째 문제가 있었다.
마찬가지로 블로그 게시판에 올린 mp3파일이 쥬크박스에서 재생이 되지 않았던 것.
playlist.xml에서 <location>해당 mp3파일명 경로</location> 코드를 볼 수 있는데,
경로를 http://nashimaryo.tistory.com/attachment/bk83.mp3 와 같이 나타냈어야 했던 것.

mp3파일을 블로그 게시판에 올릴 때 글쓰기 창에 있는 EDIT 버튼을 눌러주면 html로 보게 되는데,
그곳에서 해당 곡의 파일명을 볼 수 있다. 그걸 위의 bk83처럼 나타내주면 되는 것이다.
나는 그것도 모르고 헤매고 있었다;;

암튼 다행히 이러한 시행착오와 함께 나비님의 도움으로 쥬크박스를 만들 수 있게 되어서 너무 기쁘다~
playlist.xml에 계속 곡에 대한 소스를 입력해서 올려야 한다는게 불편하긴 하지만~
도토리로 안사는게 어디냐 -_-; 므하하하~