-
티스토리(tistory)에 배경음악(BGM)사용하기 Dewplayer컴퓨터, 인터넷, 전자기기/블로깅팁 2011. 12. 3. 19:36반응형
컴퓨터에 있는 MP3파일을 블로그(Blog) 배경음악(BGM)으로 사용하고 싶은데 어떻게 해야할까요?
그래서 네이버(Naver)형님이나 다음(Daum)형님께 물어 보니, 여러가지 방법이 있다던데요. 그런데 대부분 예전에 한번씩 시도 해봤던 것들이었습니다.
하얀현자님이 만든 Snowsageplayer나 이거랑 비슷한 웹뮤직플레이어(web music player)들은 티스토리(tistory)에선, 블로그(blog)주소가 정상적으로 안나오고 엄청 길고 이상하게 출력됩니다.
그렇지만 snowsageplayer같은 것들은 사이트내(內)다른 링크(Link)를 눌러도 노래가 끊임없이 나온다는 장점은 있지요. 싸이월드(Cyworld) 플레이어도 끌어와서 쓰던데, 그것도 티스토리에선 주소가 이상하게 출력 되더라구요.주소가 제대로 나오는 게 중요하다 생각했기 때문에 예전에 포기했던 기억이 있네요.
그래 이 방법으론 하지말자. 어짜피 방문자도 없고 혼자노는 블로그(blog)에 주소장애까지 격고 싶지 않아!!!
다른 링크(link)를 눌러 재생되던 배경음(BGM)이 초기화 되는 한이 있어도 snowsageplayer 같은 방식은 싫었습니다. 티스토리(Tistory)만 주소 출력 오류있어요.
그래서 다른 방법을 검색하던 중 Dewplayer를 찾았습니다.
이거 마치 예전에 사용했던 스티큐브(sticube) 배경음악 위젯(wiget)이랑 비슷 하더군요.(결과만!)
쉽게 설치가능했던 스티큐브(sticube)가 망하면서 한동안 블로그(blog)배경음악을 설치한 적이 없는데, 이정도면 양호 하네요.<사진:스티큐브(sticube) Event에 응모해서 받았던 큐브 경품>
아직도 제 방명록엔 스티큐브(sticube)비밀 번호를 물어 보던 흔적이 있습니다. 음악파일을 받으려면 비밀번호가 필요했었으니까요. 뭐... 이젠 망했기 때문에 추억속으로 byebye~!
설치하는 방법은 간단하다. 우선 dewplayer 사이트에 접속해 파일을 받자
사이트 접속 귀찮으면 위 다운로드(download)버튼 클릭해서 받으세요.
받은 파일은 원하는 님이 위치에 압축풀고요. 풀고나서 보면 파일이 여러게 있는데, 이 중, 필요한 파일은 swf파일과 playlist.xml파일이에요.다들 알고 있겠지만, 티스토리(Tistory) 관리자 화면에서 html/css편집 메뉴 클릭하면 파일업로드 메뉴가 또 있습니다. 거기서 파일업로드 메뉴클릭하고 아랫쪽에 보면 추가, 삭제 버튼이 있는데 추가를 눌러 압축 풀었던 파일중 swf파일만 모두 업로드 하세요.(일일이 하나하나 알려주는 거 생각보다 귀찮네요;;)
사용하고 싶은 mp3 파일은 새글을 작성하는 화면에서 파일버튼을 눌러 업로드해놓으세요. html/css편집 메뉴의 파일업로드 용량은 20mb밖에 안되요. 요즘 mp3파일 용량이 기본 4~8메가(mb)정도는 하니까. 블로그 스킨(blog skin)업로드 공간 20메가(mb)는 너무 부족하죠. 포스팅에 업로드하면 한 파일당 용량10mb에 개수제한 없이 앨범 모두 업로드 할 수 있으니까...새글쓰기 첨부파일로 업로드 하세요.업로드가 완료되면 글은 우선 저장하고 편집 화면으로 다시 불러오세요. mp3파일 주소를 따낼려면 이화면을 또 사용해야 해요. 순서대로 하면 어렵지 않으니 잘 따라 오면 됩니다!!(설명을 어렵게 해서 ㅈㅅ)
playlist.xml 파일을 메모장으로 열어보면 아래와 같이 적혀 있어요.<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Ounage Playlist</title>
<creator>Dew</creator>
<link>http://www.blup.fr/</link>
<info>The Best Playlist</info>
<image>covers/0.jpg</image>
<trackList>
<track>
<location>mp3/test1.mp3</location>
<creator>Bedrich Smetana</creator> <---삭제
<album>Má Vlast</album> <----삭제
<title>La Moldau (Vltava)</title>
<annotation>I love this song</annotation> <---삭제
<duration>32000</duration> <----삭제
<image>covers/1.jpg</image> <----삭제
<info></info> <-----삭제
<link>http://fr.wikipedia.org/wiki/M%C3%A1_Vlast_(Smetana)</link> <---삭제
</track>
이하 생략
</trackList>
</playlist>
<track></track>에서 <location>mp3/test3.mp3</location> <title>Le Hussard sur le Toit</title>을 제외 하고 모두 삭제 하세요.
무슨 말인지 모르겠다 구요? 해당 테그를 다삭제하면 아래처럼 됩니다. 귀찮은 분은 playlist.xml 내용을 다 지우고, 아래 내용을 복사(ctrl+c) 붙여넣기(ctrl+v)만 해도 되요.
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Ounage Playlist</title>
<creator>Dew</creator>
<link>http://www.blup.fr/</link>
<info>The Best Playlist</info>
<image>covers/0.jpg</image>
<trackList>
<track>
<location> http://티스토리주소.tistory.com/attachment/엠피파일.mp3</location>
<title>파일 제목</title>
</track>
</trackList>
</playlist>
노래 한곡 추가 할때마다 playlist.xml의 <trackList></trackList>사이에
을 추가하세요. 이렇게요.<track>
<location> http://티스토리주소.tistory.com/attachment/엠피파일주소.mp3</location>
<title> 제목 </title>
</track>
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Ounage Playlist</title>
<creator>Dew</creator>
<link>http://www.blup.fr/</link>
<info>The Best Playlist</info>
<image>covers/0.jpg</image>
<trackList>
<track>
<location> http://티스토리주소.tistory.com/attachment/엠피파일.mp3</location>
<title>파일 제목</title>
</track>
<track>
<location> http://티스토리주소.tistory.com/attachment/엠피파일.mp3</location>
<title>파일 제목</title>
</track>
<track>
<location> http://티스토리주소.tistory.com/attachment/엠피파일.mp3</location>
<title>파일 제목</title>
</track>
<track>
<location> http://티스토리주소.tistory.com/attachment/엠피파일.mp3</location>
<title>파일 제목</title>
</track>
<track>
<location> http://티스토리주소.tistory.com/attachment/엠피파일.mp3</location>
<title>파일 제목</title>
</track>
</trackList>
</playlist>
그리고 일일이 파일주소와 제목을 수정해야 합니다. 엠피파일 주소를 어떻게 아냐구요?
잘따라오세요.
새글쓰기로 mp3파일을 업로드 하고 저장했던 글있죠? 그거 편집화면으로 열어 보면 우측위에 html 이라고 적혀있고 체크하는 부분이 있어요. 이부분을 체크하면 아래와 같이 나옵니다.
여기서 cfile1.uf@160E77494ED7787A0BAE03.mp3이 mp3파일 주소에요.
이렇게 일일이 또 수정 해줘야 합니다. 티스토리주소는 본인 티스토리 주소로 적으세요. 저는 1breeze1입니다.즉, http://티스토리주소.tistory.com/attachment/엠피파일.mp3
-> http://티스토리주소.tistory.com/attachment/cfile1.uf@160E77494ED7787A0BAE03.mp3
위 작업이 끝나면 수정한 playlist.xml파일을 꼭 저장하세요. 그리고 swf파일 업로드 했듯이, 티스토리 관리자 화면-> html/css편집 -> 파일업로드->추가를 눌러 playlist.xml파일을 업로드 하세요.
이젠 object테그를 블로그에 입력 하기만 하면 되요 html/css편집에서 원하는 위치에 붙여 넣기 하던지, 사이드 바에서 html베너에 입력하던지 입맛데로 설치하세요. 나는 사이드바에 설치했습니다.
<object type="application/x-shockwave-flash" data="http://cfs.tistory.com/custom/blog/계정마다 다름/skin/images/dewplayer-playlist.swf" width="240" height="200" id="dewplayerpls" name="dewplayerpls">
<param name="movie" value="http://cfs.tistory.com/custom/blog/계정마다 다름/skin/images/dewplayer-playlist.swf">
<param name="flashvars" value="xml=http://cfs.tistory.com/custom/blog/계정마다 다름/skin/images/playlist.xml&autostart=1&autoreplay=1&showtime=1&randomplay=1&volume=100" />
</object>
&autostart=1(자동시작)
&autoreplay=1(자동반복)
&showtime=1(플레이시간 표시)
&randomplay=1(랜덤플레이)
&volume=100(볼륨크기)
위 옵션 중 필요없는건 지워요. 랜덤플래이 같은거 사용하기 싫으면 지우세요.
계정마다 다름 이 부분도 반드시 수정하세요.html/css편집 ->파일업로드로 이동해서 아무 그림 파일을 클릭하면, 왼쪽 미리보기박스에 이미지가 보이는데 마우스 오른쪽버튼 누르면 나오는 메뉴 중, 속성 클릭하면 속성창 나오고 거기에 주소가 보일겁니다.
위 캡쳐화면에서 본인ID라고 된 부분(숫자)만 복사해서 object태그에 "계정마다 다름"을 지우고 꼭 본인 고유 번호로 적어야 됩니다..
http://cfs.tistory.com/custom/blog/23/23***4/skin/images/bg_calendar_bot.gif?=7087275300.17980788244439222
여기서 숫자 /23/23***4/ 이것만 확인하고 수정하세요. 그게 본인 고유번호.
자 이제 테스트 고고!!
여러번 시도 끝에 결국 설치성공!! 나름만족하며 사용하고 있습니다.
<사이드바에 Playlist형으로 설치한 dewplayer>
반응형
