Soribada_Widget0.1.zip
- notice 스킨변경~
[Javascript?] 크롬플러그인개발 후기 - 소리바다 뮤직비디오 플레이어
Posted in 자바스크립트(Javascript) // Posted at 2010/01/10 19:41일단 플러그인을 하나 만들었는데요. 조금 문제가 많습니다만, 기본적인 기능은 다 되는.....-_-
크롬플러그인의 특징은 백그라운드에서 어떤 작업을 계속적으로 실행할 수 있는 특징이 있습니다. 그래서 html + Javascript의 조합을 통해서도 RSS Reader기를 만들 수 있죠. 게다가 html5문법인 audio와 video 등의 태그를 사용하여 백그라운드에서 실행하는 플레이어를 만들 수 있습니다.
html5에서 지원하는 localStorage도 지원을 해서 영속성이 있는 데이터를 저장할 수 있어요.
그 외에 html5에서 지원하는 canvas도 되구요. 번역기와 같이 현재 열려있는 페이지에 플러그인을 이용해서 번역도 되게 가능하구요. 또한 모질라처럼 NPAPI인지뭔지도 지원하는 것 같은데, DLL파일을 사용할 수 있게 하는 것 같아요. ie탭을 보면 dll파일을 이용해서 하는 것 같네요.
그래서 백그라운드에서 돌아가는 뮤직비디오 플레이어를 만들어 봤습니다.
소리바다에는 뮤직비디오를 퍼갈 수 있는 뮤비위젯이 있습니다. 아마 외부에서 재생이 되게 계약이 된 것으로 알고 있습니다. 그래서 이 뮤비위젯을 이용해 크롬플러그인에서 뮤비들을 localStorage에 저장해놓고 백그라운드에서 재생하는 플레이어를 만드는 것이죠.
뮤비위젯 사이트인데, 이것을 yahoo pipe를 이용해서 html파싱하면 해당 페이지의 뮤직비디오 데이터를 가져올 수 있어요-_- 그 데이터를 가져와서 플러그인에서 재생시키면 됩니다.
이 플러그인은 최신 뮤직비디오를 쉽게 감상할 수 있고, 해당 뮤직비디오만들 모아서 백그라운드 플레이어에서 재생도 할 수 있는 플러그인입니다.
이 플러그인은 최신 뮤직비디오를 쉽게 감상할 수 있고, 해당 뮤직비디오만들 모아서 백그라운드 플레이어에서 재생도 할 수 있는 플러그인입니다.
SoribadaMusicVideo.crx플러그인 설치 파일. 크롬 4.0beta사용자만 가능해요~
우선 크롬플러그인 구조가 백그라운드.html파일이 있고, 크롬플러그인 아이콘을 클릭했을 때 popup.html을 띄워서 컨트롤하는 페이지 2개를 사용할 수 있어요. 이 2개의 페이지는 서로간의 통신이 가능합니다.
var bp = chrome.extension.getBackgroundPage();이것은 bp객체를 통해서 백그라운드의 있는 함수같은 것을 호출할 수 있어요.
또한 html + javascript기반이기 때문에 기존에 사용하는 jquery 등의 프레임워크도 사용할 수 있어요. 저도 이것때문에 더욱 빨리 개발한 것 같네요. 역시 jquery가 짱인 것 같아요.
그리고, flash없이 video나 audio파일을 재생할 수 있는 것이 매력적이군요.
video태그는 매우간결한데요.
<video id="video" src="동영상주소"></video>이런식으로 해주면 돼요. 그리고 javascript로 컨트롤하려면 여러 함수가 지원됩니다.
그냥 videoid.play()하면 해당 src로 재생합니다.
src을 바꾸려면,
형태로 로드해주면 되고, 일시정지하려면 video.pause()인데, 정지함수는 없는 것 같아요. stop하니까 안먹히더라구요-_-
videoid.src = "video주소";
videoid.load();형태로 로드해주면 되고, 일시정지하려면 video.pause()인데, 정지함수는 없는 것 같아요. stop하니까 안먹히더라구요-_-
localStorage도 좋은 게 그냥 쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다. 하지만, flash에서 제공하는 SharedObject보다 좀 안 좋은 게 배열을 저장 못합니다-_- object는 저장하는 듯 하는데, array를 저장하려면 json으로 변경해서 저장해야합니다.
localStorage를 사용하기 위해서는 데이터 가져올 때는 getItem, 저장할 때는 setItem, 모두 제거할 때에는 clear()의 함수로 사용합니다.
localStorage.getItem("데이터명");
localStorage.setItem("데이터명", 데이터);
localStorage.clear();
크롬 플러그인에서 배열을 저장하기위해서는 json으로 변경할 것이 필요한데, JSON관련된 라이브러리를 제공하더라구요. 스트링화 하고, 파싱하는 함수를 사용하면 됩니다.
localStorage.setItem("저장배열명", JSON.stringify(array));
JSON.parse(localStorage.getItem("저장배열명"));나중에 시간되면 크롬용 MP3Player도 만들어봐야겠어요. NPAPI를 제공하는 것 같아 로컬파일 접근도 되는 것 같아요(확실하진 않지만....-_-).
Tags chrome,
chrome plugin,
javascript,
js,
music video,
plugin,
SORIBADA,
뮤직비디오,
소리바다,
자바스크립트,
크롬,
크롬 플러그인,
플러그인
4 Comments
-
지나가다
쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다.<---- 쿠키도 클라이언트에 저장됨.
-
머드초보
아...js에서도 쿠키를 생성할 수 있군요 ㅠㅠ
지금까지 php나 jsp 등에서만 생성할 수 있는 줄 알았어요 ㅠㅠ
감사합니다 ^^
-
-
달빛발광
와우! 크롬에서 쓸수있는 플러그인이라니요 ㅠㅠ 저는 친구들한테 크롬 추천했다가 ㅠㅠ 안되는거많다고 욕만먹엇는데 님께서는 정말 대단하시군요 ㅠㅠㅠ
-
이게 귀찮아서 플러그인을 만들게 되었습니다
(사실...그냥 플러그인을 한번 만들어보고 싶었습니다-_-)
문제가 된다면 삭제하겠습니다ㅠ
소리바다 뮤비위젯 : http://podcast.soribada.com/Widget/Widget.html
소리바다 뮤비위젯 공식블로그 : http://sobawg.tistory.com/
사용법입니다.
압축파일을 풀고, 폴더 통채로 plugins폴더에 넣습니다.
텍스트큐브 관리자 화면으로 갑니다.
플러그인 -> 플러그인 목록 -> 목록 중 소리바다 뮤비위젯 플러그인을 클릭하여 활성화 합니다.
그리고, 환경설정을 클릭 합니다.
첫번째 옵션은 자동재생여부를 선택하는 건데요. '네'를 하게 되면, 페이지가 로딩되자마자 뮤비가 재생이 됩니다.
두번째, 세번째, 네번째는 직접입력하는 것이 아닙니다.
아래 뮤직비디오 리스트가 있는데, 원하는 뮤직비디오의 선택버튼을 클릭합니다.
그럼 위젯을 달아봅시다.
텍스트큐브 관리자화면에서 꾸미기 -> 위젯 -> 추가가능한 플러그인에서 '소리바다 뮤비 위젯'이 있는데, 오른쪽에 원하는 위치에 올려 놓습니다.
다른 컴이나 다른 버전에서는 전혀 테스트하지 않았습니다--;
제 텍스트큐브는 1.7.7입니다.
PS. 텍스트큐브 플러그인 올리기가 안되네-_-;
[M.C The Max] Fall... In Love (Digital Single)의 사랑을 외치다 뮤비
Posted in M.C The Max // Posted at 2007/10/27 00:18아... 뭔가 갑자기 나와서 당황스럽군요-_-;
우선 노래를 들어보시면 알겠지만, 엠씨더맥스 스러운 발라드입니다.
처음에 Fall... In Love라고 해서 엠씨더맥스 콘서트를 가면 항상 부르는 Falling in Love가 생각났어요-_-;
그 노래는 없네요-_-; 그 노래 제목이 대체 뭐지-_-; 제목도 모르고있었네-_-;
월아 카페 가니까 무슨 파트3를 낸다고 하는데.....-_-;
이건 뭐 말도 안되는 거 같네요. 어차피 사는 사람들은 팬들 밖에 없을 것이고...
이거를 또 낸다는 것 자체가 웃긴거 같아요-_-; 팬으로부터 돈을 더 뜯는 것 같아서 찜찜하네요.
똑같은 노래로 앨범을 3번 내다니 이거 세계최초일 것 같은데-_-;
전 그래서 파트2도 안샀어요.
참 분위기가 안 좋군요 ^^ 뭐 어쨌든 즐거운 마음으로 신곡을 감상해봅시다 ^^
오래된것같아요 아파했던 시간들
사랑이란 이렇게 지치지 않는지..
내게 등을 보여도 눈물로 밀어내도
그모습이라도 난 보고싶죠..
마음을 속이고 가슴을 닫아도
우리를 웃게했던 모든게 눈물이 돼요
그댄아닌가요 나만이 이렇게 우나요
잊으려다 버리려다
끝내는 그댈찾아요
왜 사랑하면 안돼요
왜 그댈사랑할순 없나요
그대를 잊어가며 살아갈 자신이 없는데
난 그대밖에 몰라서 그하나 밖에 알지 못해서
가질수없다는걸 잊은채로 또 바라보죠..
지나치는 사람들 행복해보이네요
이런사랑해 본적 없나봐요
스치는거라고 추억일거라고
사랑은 사랑으로 잊으란 말을 말아요
멀어지지 않게 그대를 가슴속으로
불러보다 외처보다 끝내는 울고말아요
왜 사랑하면 안돼요
왜 그댈사랑할순 없나요
그대를 잊어가며 살아갈 자신이 없는데
난 그대밖에 몰라서
그하나밖에 알지못해서
가질수 없다는걸 잊은채로또 바라보죠..
그대곁에 그사람 모르고살겠죠
누군가를 이렇게 아프게 하는지
그사랑도 지치겠죠 그사랑도 미울때있겠죠
그때는 그대마음나에게로 돌아올테니
난어쩌면더 좋아요 난 이렇게 사랑하면 돼요
그대로 일수없어도 마음은 내게
와 있으니...
-
ahha
신곡은 너무나 좋아요...전 앨범을 안산지라 파트 3만 살려구요..좋은곡만 다 들어있는것 같은..앨범이 안팔려서 어쩔수 없는것 같아요.
-
머드초보
네 신곡 좋네요 ^^
앨범을 아직 안사셨군요 ^^
전 1집과 5집이 제일 좋더군요 ^^
하긴 이번 5집은 좀 심하게 안팔렸다고 하죠 ^^
방문해주셔서 감사합니다 ^^
-
인터넷 하다가 월아카페에 들어갔는데 영화 "리턴"의 홍보뮤직비디오를 MC THE MAX의 RETURNS의 음악을 쓰겠다고 한 공지사항을 보았습니다.
그래서, 영화 리턴이 뭘까해서 네이버에 검색을 해보니 뭐 수술중 각성이네 어쩌고 뭐 스릴러스러운 미스터리장르의 영화였습니다.
정말 이건 아니라고 생각합니다-_-; 제가 5집 앨범에서 가장 좋아하는 노래인데...
MC THE MAX의 RETURNS는 가사내용을 보면 알지만 그냥 사랑얘기입니다-_-; 근데 이런 영화와 짬뽕해서 뮤직비디오를 만들다니...
제목만 같지 전혀 다른데.. 어쨌든 제 생각이었습니다-_-;
감상해보시면 알지만, 전혀 안 어울립니다! 감상해봅시다-_-;