2014. 5. 25. 16:15

네 안녕하세요?

지난jwplayer 제작강좌에 그냥 참고될만한 글을 쓰겠습니다(3.16 버전 기준)


일단 jwplayer 태그가 대충 이런식입니다


<embed width="가로크기" height="세로크기" 
flashvars="config=config.xml 파일주소
&file=playlist.xml 파일주소"
src="http://share.dnip.co.kr/Files/Flash/Player/jw.swf"
type="application/x-shockwave-flash" autostart="true"/>

근데 여기서 config.xml이랑 playlist.xml 파일을 합할수 있습니다
바로 config.xml 파일에 다음과 같이 추가해주면 되는데요..

<file>playlist.xml 파일주소</file>

예제를 보자면

<config>
<allowscriptaccess>always</allowscriptaccess>
<allownetworking>all</allownetworking>
<allowfullscreen>false</allowfullscreen>
<file>playlist.xml 파일주소</file>
<autostart>true</autostart>
<repeat>always</repeat>
<shuffle>true</shuffle>
<icons>false</icons>
<volume>100</volume>
<linktarget>_top</linktarget>
<displayheight>0</displayheight>
<thumbsinplaylist>false</thumbsinplaylist>
<showeq>false</showeq>
<backcolor>0x5868A7</backcolor>
<frontcolor>0xB5DFEF</frontcolor>
<lightcolor>0x0000FF</lightcolor>
<overstretch>false</overstretch>
<usefullscreen>true</usefullscreen>
</config>

대충 위와같이 하면 되는겁니다
이렇게 설정하면 태그는 다음과 같이 줄어들게 됩니다
<embed width="가로크기" height="세로크기"
flashvars="config=config.xml 파일주소" src="http://share.dnip.co.kr/Files/Flash/Player/jw.swf"
type="application/x-shockwave-flash" autostart="true"/>


어때요, 정말 쉽죠?
 

by 死^死=254

Posted by 하늘바라KSND
2014. 5. 25. 16:13

자게에 어떤분이 프레이어 만들고 싶은데 리리슐츠님꺼 보고 못알아보겠다고 해서 다시 올립니다.

최대한 쉽게 풀어놓고 자세하게 설명했습니다

그리고 맨밑에 예제로 플레이어 실행되고 있는데, 듣기 싫으시다면 끄시고 봐주세요...

-------------------------------------------


안녕하세요?

이번 시간엔 jwplayer 를 이용하여 여러 mp3를 재생시켜보겠습니다


준비물: Apache or ngnix(선택), jwplayer(3.16), config.xml, list.xml

jwplayer 3.16: http://share.dnip.co.kr/Files/heartbrea/jw_player316.swf

config 양식: http://share.dnip.co.kr/Files/heartbrea/config.xml

list.xml 양식: http://share.dnip.co.kr/Files/heartbrea/list.xml


여기서 jwplayer는 플레이어 역할을 하고 건들일 필요가 없습니다

config.xml은 제목 그대로 설정 파일입니다. config.xml은 자동 재생, 플레이어 색상, 사운드 크기, 폰트 색상, 순차적 및 랜덤 재생 등... 사람으로 치면 머리겠죠

list.xml은 재생할 음악, 클릭시 이동할 주소, 타이틀을 담당합니다

만약 플레이어를 만들어서 웹에 게시하실땐 이글루스, 티스토리 같은곳에 업로드 하시면 됩니다

파일이름은 임의로 수정이 가능합니다


이제 config.xml를 만들어보겠습니다

양식을 다운받으면 대충 이런식으로 적혀 있을겁니다

-----------------------------------------

<config>
<allowscriptaccess>always</allowscriptaccess>
<allownetworking>all</allownetworking>
<allowfullscreen>false</allowfullscreen>
<autostart>true</autostart>
<repeat>always</repeat>
<shuffle>true</shuffle>
<icons>false</icons>
<volume>100</volume>
<linktarget>_top</linktarget>
<displayheight>0</displayheight>
<thumbsinplaylist>false</thumbsinplaylist>
<showeq>false</showeq>
<backcolor>0x5868A7</backcolor>
<frontcolor>0xB5DFEF</frontcolor>
<lightcolor>0x0000FF</lightcolor>
<overstretch>false</overstretch>
<usefullscreen>true</usefullscreen>
</config>

-----------------------------------------


<allowscriptaccess>always</allowscriptaccess>
<allownetworking>all</allownetworking>
<allowfullscreen>false</allowfullscreen>

이 위에 3개를 이렇게 설정시, >| 누르면 순차적 재생되고, 자동으로 노래가 끝나고 다음 재생으로 넘어갈땐, 랜덤으로 됨.(suffle 값을 ture 기준. 사용안할시, 위에 3개 없애도 무방)



autostart: 자동 재생 유무 설정입니다. true 하면 자동재생, false 하면 수동재생입니다

shuffle: true 설정시 랜덤 재생, flase 설정시 순차적 재생

icons: 아이콘 파일 유무 설정. 현 버전에서 지원되는지는 의문.

volume: 0~100 사이 값으로 설정. 100은 최대 음령

displayheight: 상단에 이미지 표시할 공간을 설정합니다. 0일시 표시가 되지 않습니다(이미지 표시를 할시, list.xml 수정)

showeq: 이퀄라이전가 뭐 그거 막대기 같은거 막 움직이고 하는거. true일시 표시

backcolor: 배경 색상

frontcolor: 맨앞에거 색상

lightcolor: 글자 마우스 커서 대면 색상




list.xml

-----------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title></title>
<info></info>
<trackList>
<track>
<creator></creator>
<title></title>
<location></location>

<image></image>
<link rel="captions"/>
<info></info>
</track>
<track>
<creator></creator>
<title></title>
<location></location>

<image></image>
<link rel="captions"/>
<info></info>
</track>
<track>
<creator></creator>
<title></title>
<location></location>

<image></image>
<link rel="captions"/>
<info></info>
</track>
</trackList>
</playlist>

-----------------------------------------


title: 제목

creator: 앨범재목

location: 음악파일 주소(http)

image: 플레이어 상단 이미지. 표시할시, config.xml displayheight 값 설정. 사용하지않을시

<image></image>

삭제해도 무관.


info: 오른쪽 화살표를 누를시 이동할 주소. 네이버 같은곳에선 통하지 않음. 사용하지 않을 시,

<link rel="captions"/>
<info></info>

둘다 지워도 됨



 

이때 크기는 480x360 로 가정할때 주소는

<embed type="application/x-shockwave-flash" src="jwplayer 주소" 
flashvars
="config=config.xml주소&amp;file=list.xml 주소"
wmode
="transparent" autostart="true" height="360" width="480">


============================================
============================================

이제 예제를 봅시다

config.xml (blog_config.xml로 사용)
-------------
<config>
<allowscriptaccess>always</allowscriptaccess>
<allownetworking>all</allownetworking>
<allowfullscreen>false</allowfullscreen>
<autostart>true</autostart>
<repeat>always</repeat>
<shuffle>true</shuffle>
<icons>false</icons>
<volume>100</volume>
<linktarget>_top</linktarget>
<displayheight>0</displayheight>
<thumbsinplaylist>false</thumbsinplaylist>
<showeq>false</showeq>
<backcolor>0x5868A7</backcolor>
<frontcolor>0xB5DFEF</frontcolor>
<lightcolor>0x0000FF</lightcolor>
<overstretch>false</overstretch>
<usefullscreen>true</usefullscreen>
</config>
--------------

list.xml(blog_list.xml)
--------------
<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>unknown</title>
<info>unknown</info>
<trackList>
<track>
<creator>Fear, and Loathing in Las Vegas</creator>
<title>Burn the Disco Floor with Your “2-step”!!</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/01 - Burn the Disco Floor w...mp3</location>
</track>
<track>
<creator>Fear, and Loathing in Las Vegas</creator>
<title>Love at First Sight</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/04 - Love at First Sight.mp3</location>
</track>
<track>
<creator>SEAMO</creator>
<title>Kimini1nichi1kaisukitoiu</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/01 Kimini1nichi1kaisukitoiu.mp3</location>
</track>
<track>
<creator>Alexander Brandon</creator>
<title>Two Steps</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/01 Two Steps.mp3</location>
</track>
<track>
<creator>Alexander Brandon</creator>
<title>Snowstorm</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/06 - Snowstorm.mp3</location>
</track>
<track>
<creator>Simple Plan</creator>
<title>Take My Hand</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/02 Take My Hand.mp3</location>
</track>
<track>
<creator>Avril Lavigne</creator>
<title>Smile</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Avril Lavigne - Smile.mp3</location>
</track>
<track>
<creator>DJ Sammy</creator>
<title>Heaven</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/02. DJ Sammy - Heaven.mp3</location>
</track>
<track>
<creator>Ronald Jenkees</creator>
<title>Throwing Fire</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/05._Ronald_Jenkees_-_Throwing_Fire.mp3</location>
</track>
<track>
<creator>Italobrothers</creator>
<title>So Small (Dance Radio Edit)</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/08-italobrothers-so_small_(dance_radio_edit).mp3</location>
</track>
<track>
<creator>Maroon 5</creator>
<title>Payphone</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/02 - Maroon 5 - Payphone.mp3</location>
</track>
<track>
<creator>Boys Like Girls</creator>
<title>The Great Escape</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Boys Like Girls - The Great Escape.mp3</location>
</track>
<track>
<creator>Dash Berlin</creator>
<title>Go It Alone - Radio Edit</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/01. Dash Berlin - Go It Alone - Radio Edit.mp3</location>
</track>
<track>
<creator>Donkeyboy</creator>
<title>Stay</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/12. Stay.mp3</location>
</track>
<track>
<creator>DJ Manian</creator>
<title>Darren Styles - Outta My Head</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/13.Manian___Darren_Styles_-_Outta_My_Head.mp3</location>
</track>
<track>
<creator>DJ Manian</creator>
<title>Sky</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/32.Manian_-_Sky.mp3</location>
</track>
<track>
<creator>Sascha Grunwaldt</creator>
<title>alles was ich fuhle (cubase) improvised</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/alles_cubase.mp3</location>
</track>
<track>
<creator>David Defeis; Tobias Sammett</creator>
<title>Avantasia - The Final Sacrifice</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Avantasia - The Final Sacrifice.mp3</location>
</track>
<track>
<creator>B.O.B</creator>
<title>Airplanes (Feint Drum & Bass Remix)</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/B.O.B - Airplanes (Feint Drum & Bass Remix).mp3</location>
</track>
<track>
<creator>Feint</creator>
<title>Clockwork Hearts [forth. Subsphere Records]</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Feint - Clockwork Hearts [forth. Subsphere Records].mp3</location>
</track>
<track>
<creator>Pendulum</creator>
<title>Encoder</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/pendulum - encoder.mp3</location>
</track>
<track>
<creator>Siren & Sirrus</creator>
<title>Snowfall</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Siren & Sirrus - Snowfall.mp3</location>
</track>
<track>
<creator>Owl City</creator>
<title>Fireflies</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/09.Owl City-Fireflies.mp3</location>
</track>
<track>
<creator>Owl City</creator>
<title>Honey and The Bee</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/05 - Honey and The Bee.mp3</location>
</track>
<track>
<creator>Sum 41</creator>
<title>Still Waiting</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Sum 41 - 04. Still Waiting.mp3</location>
</track>
<track>
<creator>Sum 41</creator>
<title>Summer</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/08 - Sum 41 - Summer.mp3</location>
</track>
<track>
<creator>Muse</creator>
<title>New Born</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/03.New Born.mp3</location>
</track>
<track>
<creator>Muse</creator>
<title>Plug In Baby</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/05.Plug In Baby.mp3</location>
</track>
<track>
<creator>Nickelback</creator>
<title>When We Stand Together</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Nickelback - When We Stand Together.mp3</location>
</track>
<track>
<creator>Usher</creator>
<title>DJ Got Us Fallin' In Love Feat Pitbu</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/Usher - DJ Got Us Fallin' In Love Feat Pitbu.mp3</location>
</track>
<track>
<creator>Green Day</creator>
<title>21 Guns</title>
<location>http://share.dnip.co.kr/Files/blog/bgm/0000/16. 21 Guns.mp3</location>
</track>
</trackList>
</playlist>
------------

주소:
<embed type="application/x-shockwave-flash" src="http://share.dnip.co.kr/Files/Flash/Player/jw.swf" flashvars="config=http://share.dnip.co.kr/Files/Flash/Player/blog_config.xml&amp;file=http://share.dnip.co.kr/Files/Flash/Player/blog_list.xml" wmode="transparent" autostart="true" height="360" width="480">

by 死^死=254

Posted by 하늘바라KSND
2014. 5. 25. 15:21

 

 

우선적으로 준비해야할껀

jw 플레이어!

다만 jw 플레이어 종류도 여러가지며 버전도 여러가지다 =_=;;;
다만 우리가 계획하는건 뮤직플레이어!

내가 쓰고있는버전을 토대로 설명합니다.

일단 다음과 같은 재료가 필요합니다.

뮤직플레이어 swf
xml

[해당 swf는 일반 jw 플레이어와 다르니 혼동금지! 해당 swf 는 뮤직전용!]

업로드할공간
[업로드공간은 나중에 말해주겠습니다.]


일단 swf 와 xml 을 받아두고 바탕화면에 저장해두자!
그리고 xml을 열어본다.
되도록이면 노트패트++사용하자
메모장으로도 수정해도 상관무! [ 간혹 오류가떠서 인식이 안될때가있음 ]

<playlist>
<trackList>
<track>
<creator>뮤직앨범명</creator>
<title>뮤직명</title>
<location>음악주소</location>
<image>플레이어상단이미지</image>
<link rel="captions"></link>
<info>버튼을누르면갈링크</info>
</track>
<track>
<creator>뮤직앨범명</creator>
<title>뮤직명</title>
<location>음악주소</location>
<image>플레이어상단이미지</image>
<link rel="captions"></link>
<info>버튼을누르면갈링크</info>
</track>
</trackList>
</playlist>

이와같이있을껍니다.
그럼 해당 칸안에 적혀있는대로 본인이 수정!

어? 2개만 쓸수있나요?
아닙니다. 더욱더 추가하시면됩니다.
즉! <info>버튼을누르면갈링크</info> 여기서 한칸을 내린뒤

<track>
<creator>뮤직앨범명</creator>
<title>뮤직명</title>
<location>음악주소</location>
<image>플레이어상단이미지</image>
<link rel="captions"></link>
<info>버튼을누르면갈링크</info>
</track>

이렇게 새로 추가하면된다는것!


다됬으면 저장을하시고
swf 와 xml 을 업로드합니다
[네이버,다음,파란등 외부링크를 지원안하는곳이 많습니다. 티스토리or이글루스에 올리는걸추천!]

다만 플레이어의경우 저작권책임은 나에게없습니다^^;

그리고 swf와xml 링크를 따오도록합시다.
파일을 올린것에보면 swf와xml 오른쪽클릭후 링크저장하면



이런식입니다. 그럼 다음과 같이 아래의 태그를 만들고 본인이 올릴게시판의 html 로 들어가서 붙여넣기후 해보시면 잘됩니다!


<embed style="WIDTH: 520px; HEIGHT: 310px" id="J-pop" height="310" type="application/x-shockwave-flash" width="520" src="swf주소" quality="high" flashvars="width=520&height=310&file=xml주소&autostart=true&volume=100&linktarget=

_blank&amp;displayheight=175&amp;repeat=true&amp;shuffle=true&thumbsinplaylist=false&showeq=true&backcolor=0x000000&frontcolor=0x666666&lightcolor=0xf6521c&overstretch=false&usefullscreen=true" wmode="opaque" allowfullscreen="true" bgcolor="#ffffff"/>





게소게소게소!

by 리리슐츠

'핱브팁게백업' 카테고리의 다른 글

JW Player 를 일체화 해보자  (0) 2014.05.25
플레이어 태그 길이를 좀 줄여보자!  (0) 2014.05.25
jw플레이어22  (1) 2014.05.25
외부링크와 트래픽  (0) 2014.05.25
음짤 플래시 만드는 방법  (0) 2014.05.25
Posted by 하늘바라KSND
2014. 5. 25. 15:19

일단 트래픽에대해서 먼저 설명합니다.


특정 전송로상에서 일정 시간내에 흐르는 Data의 양을 말한다. 스트리밍 서비스의 경우, 네트웍을 통해 움직이는 Data의 양이며 예를 들어 10M짜리 동영상 파일을 10명이 동시에 볼 경우 트래픽은 10M x 10 = 100M 로 계산되는 것이다.

이외에도 어떤 통신장치나 시스템에 걸리는 부하(負荷)를 트래픽이라고 하기도 한다. 따라서 시스템 관리자의 중요한 작업 중 하나가 트래픽 상황을 감시하고, 트래픽이 늘어나면 이에 따른 적절한 조치를 취해야 한다.


즉 트래픽이 몰리면 해당 트래픽을 짤라버리면 더이상 재생이 안된다.

이것이 외부링크의 최대단점.



외부링크는 무엇인가?



예를들어 네이버,다음,파란등 여러 포털사이트의 업로드는 외부링크를 허용하지않는다

외부링크를 허용하게되면 너도나도 파일올리고 님들 이거 다운받으세영 ㅋ

하고 여러가지 법적문제등이 발생한다.


그래서 대부분의 포털은 용량제한등이있기때문에포기하는것이좋다.



대표적인것으로 티스토리,이글루스 가 편하긴하지만..

티스토리랑 이글루스도 일부파일에대해서는 외부링크가 포풍 차단!


아 설명이 엉뚱한곳으로 빠져나갔군


예를들어 1.mp3라는 파일을 업로드했다고 가정하에

해당 업로드된파일을 우클릭->링크복사하고 다른곳에다가올리는방법을 외부링크방법.


그러나 순순히 트래픽을 허용한 기업들이아니기때문에


swf 로 변환해서 해야만 어느정도 원할하다고 하더라 카더라통신



즉 외부링크허용안되는곳은 일정주기마다 파일링크주소가 바뀌기때문에 잘찾는것이 관건

 

 

by리리슐츠

Posted by 하늘바라KSND
2014. 5. 25. 15:17

우선 아래의 두 프로그램이 필요하다. 다운 받아서 설치한다.

Goldwave 5.54 (받기)
Mp3 to Swf Converter (받기)


프로그램이 설치 되었으면 이제 아래처럼 음짤을 만들 음원을 준비한다.
굳이 mp3 가 아니어도 상관없다. Goldwave는 어지간한 음악 포맷은 다 인식한다.
157A1B0E4B02ADE2086DA6


Goldwave를 실행하고, 준비한 음원을 끌어다 떨궈 넣어주면 아래와 같은 그래프가 나타난다.
2068ED0F4B02A878191F04


콘트롤 박스의 재생버튼을 눌러서 귀로 확인해가며
추출하길 원하는 부분을 마우스를 클릭한 후 잡아 끌어서 선택해준다.
114D81124B02B1E32A22EE
1868ED0F4B02A8781A88DC


메뉴에서 File - Save Selection As... 를 선택하고
파일 이름은 니 맘대로 넣고, 파일 형식과 Attributes(음질)은 아래와 똑같이 설정한 후 저장 버튼을 누른다.
2068ED0F4B02A8791B0535


파일 추출이 완료되었으면, mp3 to swf Converter를 실행해서 추출된 파일을 끌어다 넣은 다음
Options 버튼을 누른다.
1968ED0F4B02A87A1C0F41


SWF 옵션을 설정한다. 몇몇 중요한 옵션에 대한 설명은 다음과 같다.
길어서 읽기 귀찮으면 아래 그림과 똑같이 설정해주면 된다.

Frame rate : 1 (음짤 전용이므로 프레임을 1로 설정하여 최대한 용량을 줄여준다.)
SWF type : playback controllable SWF (재생,일시정지,정지 버튼 넣기)
no interfaces SWF (버튼 안넣기)
Steaming sound (다운받는 도중에도 재생)
Event sound (다운이 완료되어야 재생)
Play automatically (자동으로 재생)
Loop play (반복 재생)
2068ED0F4B02A87A1D6D77

Sound Option 으로 넘어가서 음질을 설정해준다.
Sample frequency : 44100 Hz 로 설정한다.
Bit rate : 보통 128kbps 를 권장하고, 고음질로 만드는 경우 192kbps 이상을 권장한다.
그 이상으로 설정하면 용량 커져서 서버 터진다.
업로드는 2.00 MB 까지 올릴 수 있지만, 디시나 블로그에 올리려면 대부분 500KB 미만이어야 올릴 수 있다.
귀를 썩게 만들지 않는 한도내에서 비트레이트를 적절히 올리거나 낮춰가며
되도록이면 500KB 미만으로 맞춰서 범용성도 높이고 서버의 부하를 줄일 수 있도록 하자.
Volume : 소리가 너무 크거나 작은 경우 소리 크기를 조절해 줄 수 있다.
Change volume 을 체크하고 coefficient 에 적절한 퍼센트를 입력한다.
(예: 소리를 반으로 줄이려면 50%로 설정, 1.5배로 키우려면 150%)
1168ED0F4B02A87A1E3BE4

세팅이 끝났으면 확인을 누르고 Convert All 버튼을 클릭하면 변환이 시작되고
swf 확장자를 가진 음짤이 완성된다.
1368ED0F4B02A87B1F50DC


완성된 음짤을 아래와 같이 마우스 우클릭 - 속성 으로 들어가서 파일 크기를 확인한다.
크기가 2MB을 넘었다면, 윗 단계로 다시 돌아가서
음원에서 추출할 구간의 범위를 줄여서 재작업해주거나
swf 변환시에 bitrate 를 낮춰서 파일 크기가 2MB 가 넘지 않게 해주면 된다.
1268ED0F4B02A87B20DA98

1368ED0F4B02A87B217837

끗.



이렇게 만들어진 브금은 티스토리나 이글루스와 같은 블로그에 글 작성시 첨부파일로 첨부하고

주소를 따오면 된다.


by/ 4camel.net의 펠피쉬

Posted by 하늘바라KSND