Jwplayer로 mp3 플레이어 만들기

어제 카라1집mp3 플레이어를 올렸는데 만드는법을 문의하신 분이 계셔서 아예 강좌로 만들었습니다~~ㅎㅎ

 mp3 Player 만들기의 순서는

첫째:mp3파일을 구글드라이브에 올려 주소따기

둘째:xml과 config 짜기

세째:jw2.3플레이어를 드라이브에 올려 주소따기

네째:jw플레이어를 이용해 게시판에 올리기  순으로 진행합니다~

먼저 아래파일들을 다운 받으세요

jw2.3 player

https://www.dropbox.com/s/e8runo08gtcg5a2/jw23.swf

config xml짜기

https://www.dropbox.com/s/l11pz0jd53a168o/1st%20mini%20config.xml.txt

xml짜기

https://www.dropbox.com/s/g5jdkvcu5i0uie0/1st%20mini.xml.txt

구글드라이브에 파일 올리기

아래 아키버드님의 블로그 보시고 따라하시면 됩니다

http://rrss.tistory.com/3

티스토리는 mp3파일을 올릴수 없어 구글드라이브를 이용합니다

올리고자 하는 mp3 파일을 확장자를 jpg로 바꿔 올립니다

ex) kara rock u.mp3  ->kara rock u.mp3.jpg  그냥 요렇게 .jpg만 붙여서 변경하면 됩니다

파일을 올리고 공유설정을 "웹에 공개"로 바꿔주시고 

키보드의 ctrl을 누른 상태에서 게시글을 클릭하면 새탭이 뜹니다

새탭의 주소창을 보면 아래와 같이 뜨는데

https://docs.google.com/file/d/0B-ktbWchFrY0WUhLMFdNbzd3RFk/edit

요주소에서 d/ 와 /edit 사이의  0B-ktbWchFrY0WUhLMFdNbzd3RFk 

를 https://www.googledrive.com/host/ 에 붙여 넣으면 주소가 됩니다

완성된 주소예

https://www.googledrive.com/host/0B-ktbWchFrY0WUhLMFdNbzd3RFk

이런식으로 올린 mp3파일의 주소를 다 따신후에

맨처음 다운받은 xml짜기 파일을 보면

<?xml version="1.0" encoding="UTF-8" ?>

<playlist version="1" xmlns="http://xspf.org/ns/0/">

 

<trackList>

<track>

<annotation>01.Rock U</annotation>

<location>https://www.googledrive.com/host/0B-ktbWchFrY0WUhLMFdNbzd3RFk</location>

</track>

<track>

<annotation>02.Baby Boy</annotation>

<location>https://www.googledrive.com/host/0B-ktbWchFrY0dTFXTzdTUDBncTQ</location>

</track>

<track>

<annotation>03.이게뭐야</annotation>

<location>https://www.googledrive.com/host/0B-ktbWchFrY0Z0JDaGdxNkZxWEE</location>

</track>

<track>

<annotation>04.Good Day</annotation>

<location>https://www.googledrive.com/host/0B-ktbWchFrY0dHRqWFY0SHhSOUU</location>

</track>

<track>

<annotation>05.Wait</annotation>

<location>https://www.googledrive.com/host/0B-ktbWchFrY0eFVrN1V6am8zSjQ</location>

</track>

</playlist>

<annotation>  </annotation> 사이에 곡명을 적어주고

<location> </location> 사이에 위에서 딴 mp3 파일의 주소를 적어주시면 됩니다

메모장의 파일에서 다른이름으로저장 클릭

파일이름 적당히 영어와 숫자로 적어주고 반드시 확장자는 .xml로 저장합니다

파일형식은 모든파일로,인코딩은 UTF-8로 지정합니다

이렇게 만든 xml 파일을 확장자를 jpg로 바꿔 구글 드라이브에 올리고 주소를 따둡니다

구글드라이브가 xml 이나 config등을 더이상 지원하지 않습니다

그래서 티스토리 스킨에 올려 주소를 따둡니다

다음은 배경화면으로 쓸 사진파일을 올리고 주소를 땁니다

그리고 처음에 다운받은 config xml파일을 열여보면

<mp3config>    

    <autostart>false</autostart>

    <shuffle>false</shuffle>    

    <repeat>all</repeat>  

    <volume>100</volume>  

    <showdisplay>true</showdisplay>

    <showplaylist>true</showplaylist>  

    <backcolor>0xffffff</backcolor>

    <frontcolor>0xffffff</frontcolor>

    <lightcolor>0xffffff</lightcolor> 

    <jpgfile>https://www.googledrive.com/host/0B-ktbWchFrY0X1QxdjFGZFFjOWM</jpgfile>      

</mp3config>

 요렇게 되어 있는데

<jpgfile> </jpgfile>사이에 배경사진 주소를 넣고 

xml짜기 파일의 경우처럼 저장하고 구글드라이브에 올려 주소를 땁니다. 

이것도 티스토리에 올립니다

마찬가지로 첨에 다운받은 jw2.3.swf파일을 jpg로 바꿔 드라이브에 올린후 주소를 땁니다

플레이어도 티스토리에 올립니다

플레이어와 xml파일 config파일은 반드시 같은 계정에 올려야합니다

이제 준비가 다 끝났습니다

아래 태그에 각각의 주소들을 넣고

<Embed src="jw2.3 플레이어 주소 넣는 곳"

autostart="false" invokeURLs="false" EnableContextMenu="false" allowscriptAccess="never" 

allowNetworking="internal" enableHtmlAccess="false" AllowHtmlPopupwindow="false"  

width="플레이어 가로 크기" height="플레이어 세로크기" 

type="application/x-shockwave-flash" 

flashvars="config=컨피그 파일 주소 넣는 곳

&file=xml 파일 주소 넣는 곳" 

wmode="transparent" />

완성된 태그 예

<Embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/23.swf?"

autostart="false" invokeURLs="false" EnableContextMenu="false" allowscriptAccess="never" 

allowNetworking="internal" enableHtmlAccess="false" AllowHtmlPopupwindow="false"  

width="480" height="480" 

type="application/x-shockwave-flash" 

flashvars="config=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/1st%20mini%20config.xml?=1980644029

&file=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/1st%20mini.xml?=556051572" 

wmode="transparent" />

완성된 태그를 복사해 카게 글쓰기에서 플래시동영상 아이콘을 클릭해서

붙여넣기 하시면 요렇게 결과물이 나옵니당~