[Javascript] 모든 브라우저(아이폰포함) 재생할 수 있는 jQuery용 Audio 재생플러그인 jPlayer
자바스크립트(Javascript) 2010. 9. 14. 21:06사실....-_-
아이폰이나 아이패드, 아이팟터치는 html5의 audio로 재생하고 나머지는 flash로 재생하면 다되는거죠.
이건 그렇게 귀찮게 구분하는 것을 알아서 해주는플러그인이에요.
이런 종류의 플러그인이 SoundManager라고도 있는데, 얘는 재생할 때 UI같은 것이 재미있는 것이 많아서 좋긴한데, 조금 무거운 것 같습니다. min파일이 50k정도 하는 듯.
그에 반에 jPlayer는 물론 jquery기반이라서 jquery를 먹고 가지만, jPlayer만 16k정도 하네요.
현재 브라우저가 지원하는 오디오 코덱이 다 다른데요.
크롬은 mp3/ogg 지원하고, 사파리는 mp3만, opera와 firefox는 ogg만 지원을 해요.
그래서 mp3에 대한 재생을 할 때에는 opera와 firefox는 플래시로 재생시키도록 하게 되는 것이죠.
게다가 UI연동같은 것도 progress callback함수나 complate callback함수 등 재생, 일시정지, 정지 이런 것이 너무 함수로 잘되어있어서(마치 as3의 sound클래스를 보는 듯한...) 쉽게 쓸 수 있어요~
공식사이트
대충 써보니까 매우 좋네요. 저는 이렇게 문서화랑 demo가 잘되어 있는 사이트가 너무 좋아요!ㅠㅠ
[code]
$("#player").jPlayer({
ready:function(){
this.element.jPlayer("setFile", "http://mudchobo.tomeii.com/html5/jPlayer/aa.mp3").jPlayer("play");
},
swfPath:"/html5/jPlayer/"
})
.jPlayer("onSoundComplete", function(){
// 다음곡 처리~
})
.jPlayer("cssId", "play", "btnPlay")
.jPlayer("cssId", "pause", "btnPause")
.jPlayer("cssId", "stop", "btnStop");
$("#player").jPlayer({
ready:function(){
this.element.jPlayer("setFile", "http://mudchobo.tomeii.com/html5/jPlayer/aa.mp3").jPlayer("play");
},
swfPath:"/html5/jPlayer/"
})
.jPlayer("onSoundComplete", function(){
// 다음곡 처리~
})
.jPlayer("cssId", "play", "btnPlay")
.jPlayer("cssId", "pause", "btnPause")
.jPlayer("cssId", "stop", "btnStop");
[/code]
이런식으로 jQuery문법에 충실하도록 제작되었네요~
게다가 css랑 연동도 저렇게 play버튼을 지정해주고 btnPlay태그가 재생버튼이 바로 되어버리죠!
최고인 듯.
암튼 잘 쓰세요~
게다가 css랑 연동도 저렇게 play버튼을 지정해주고 btnPlay태그가 재생버튼이 바로 되어버리죠!
최고인 듯.
암튼 잘 쓰세요~
