아...좀 문제가 발생할 것 같기도 하지만-_- 괜찮을꺼에요-_-
일단 플러그인을 하나 만들었는데요. 조금 문제가 많습니다만, 기본적인 기능은 다 되는.....-_-
크롬플러그인의 특징은 백그라운드에서 어떤 작업을 계속적으로 실행할 수 있는 특징이 있습니다. 그래서 html + Javascript의 조합을 통해서도 RSS Reader기를 만들 수 있죠. 게다가 html5문법인 audio와 video 등의 태그를 사용하여 백그라운드에서 실행하는 플레이어를 만들 수 있습니다.
html5에서 지원하는 localStorage도 지원을 해서 영속성이 있는 데이터를 저장할 수 있어요.
그 외에 html5에서 지원하는 canvas도 되구요. 번역기와 같이 현재 열려있는 페이지에 플러그인을 이용해서 번역도 되게 가능하구요. 또한 모질라처럼 NPAPI인지뭔지도 지원하는 것 같은데, DLL파일을 사용할 수 있게 하는 것 같아요. ie탭을 보면 dll파일을 이용해서 하는 것 같네요.

그래서 백그라운드에서 돌아가는 뮤직비디오 플레이어를 만들어 봤습니다.
소리바다에는 뮤직비디오를 퍼갈 수 있는 뮤비위젯이 있습니다. 아마 외부에서 재생이 되게 계약이 된 것으로 알고 있습니다. 그래서 이 뮤비위젯을 이용해 크롬플러그인에서 뮤비들을 localStorage에 저장해놓고 백그라운드에서 재생하는 플레이어를 만드는 것이죠.
http://podcast.soribada.com/Widget/Widget.html
뮤비위젯 사이트인데, 이것을 yahoo pipe를 이용해서 html파싱하면 해당 페이지의 뮤직비디오 데이터를 가져올 수 있어요-_- 그 데이터를 가져와서 플러그인에서 재생시키면 됩니다.

이 플러그인은 최신 뮤직비디오를 쉽게 감상할 수 있고, 해당 뮤직비디오만들 모아서 백그라운드 플레이어에서 재생도 할 수 있는 플러그인입니다.
SoribadaMusicVideo.crx

플러그인 설치 파일. 크롬 4.0beta사용자만 가능해요~

사용자 삽입 이미지

우선 크롬플러그인 구조가 백그라운드.html파일이 있고, 크롬플러그인 아이콘을 클릭했을 때 popup.html을 띄워서 컨트롤하는 페이지 2개를 사용할 수 있어요. 이 2개의 페이지는 서로간의 통신이 가능합니다.
[code]var bp = chrome.extension.getBackgroundPage();[/code]
이것은 bp객체를 통해서 백그라운드의 있는 함수같은 것을 호출할 수 있어요.

또한 html + javascript기반이기 때문에 기존에 사용하는 jquery 등의 프레임워크도 사용할 수 있어요. 저도 이것때문에 더욱 빨리 개발한 것 같네요. 역시 jquery가 짱인 것 같아요.

그리고, flash없이 video나 audio파일을 재생할 수 있는 것이 매력적이군요.
video태그는 매우간결한데요.
[code]<video id="video" src="동영상주소"></video>[/code]
이런식으로 해주면 돼요. 그리고 javascript로 컨트롤하려면 여러 함수가 지원됩니다.
그냥 videoid.play()하면 해당 src로 재생합니다.
src을 바꾸려면,
[code]videoid.src = "video주소";
videoid.load();[/code]
형태로 로드해주면 되고, 일시정지하려면 video.pause()인데, 정지함수는 없는 것 같아요. stop하니까 안먹히더라구요-_-

localStorage도 좋은 게 그냥 쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다. 하지만, flash에서 제공하는 SharedObject보다 좀 안 좋은 게 배열을 저장 못합니다-_- object는 저장하는 듯 하는데, array를 저장하려면 json으로 변경해서 저장해야합니다.
localStorage를 사용하기 위해서는 데이터 가져올 때는 getItem, 저장할 때는 setItem, 모두 제거할 때에는 clear()의 함수로 사용합니다.
[code]localStorage.getItem("데이터명");
localStorage.setItem("데이터명", 데이터);
localStorage.clear();
[/code]
크롬 플러그인에서 배열을 저장하기위해서는 json으로 변경할 것이 필요한데, JSON관련된 라이브러리를 제공하더라구요. 스트링화 하고, 파싱하는 함수를 사용하면 됩니다.
[code]localStorage.setItem("저장배열명", JSON.stringify(array));
JSON.parse(localStorage.getItem("저장배열명"));[/code]

나중에 시간되면 크롬용 MP3Player도 만들어봐야겠어요. NPAPI를 제공하는 것 같아 로컬파일 접근도 되는 것 같아요(확실하진 않지만....-_-).
 
Posted by 머드초보

댓글을 달아 주세요

  1. 지나가다 2010.01.14 18:34  댓글주소  수정/삭제  댓글쓰기

    쿠키같이 서버에서 컨트롤하는 데이터가 아니라 클라이언트 단에서 저장할 수 있어서 좋습니다.<---- 쿠키도 클라이언트에 저장됨.

    • 머드초보 2010.01.16 00:38  댓글주소  수정/삭제

      아...js에서도 쿠키를 생성할 수 있군요 ㅠㅠ
      지금까지 php나 jsp 등에서만 생성할 수 있는 줄 알았어요 ㅠㅠ
      감사합니다 ^^

  2. 달빛발광 2010.02.09 21:59  댓글주소  수정/삭제  댓글쓰기

    와우! 크롬에서 쓸수있는 플러그인이라니요 ㅠㅠ 저는 친구들한테 크롬 추천했다가 ㅠㅠ 안되는거많다고 욕만먹엇는데 님께서는 정말 대단하시군요 ㅠㅠㅠ

    • 머드초보 2010.02.12 00:07  댓글주소  수정/삭제

      음...사실 아직 베타고 안되는 게 많기는 합니다-_-
      아직은 추천할만하지 못한듯 ㅠㅠ
      그래도 속도하나만은 최강이죠^^

 
사실 소리바다에서 신규서비스를 베타오픈한 것에 대해서 리뷰를 쓰려고 했는데, Talk Soribada에 너무 자세히 설명이 되어있어서 앨범리뷰를 하게 되었습니다-_-;

소리바다 신규서비스 앨범퍼가기 기능 - 간단하게 설명하자면, 블로그나 카페에 앨범을 삽입할 수 있는 기능인데요. 1분미리듣기가 가능하구요. 소리바다 이용권이 있으면 전체곡도 감상이 돼요 ^^
http://talk.soribada.com/?p=117

암튼 제가 리뷰할 앨범은 M.C The Max의 첫번째 라이브앨범!


M.C the MAX - 사랑의 시


저도 2007년 전국투어 콘서트할 때 갔었는데요. 인천에 왔을 때 갔었습니다^^ 5집발매 기념으로 콘서트를 열었는데, 저기 삼산월드체육관에서 했죠. 라이브앨범을 들어보니....조금 녹음이 안습인 곡들도 좀 있고-_-; 잘 된 것도 있고^^ 암튼, 맘에 듭니다^^ 다만, 목이 쉬어서 목소리가

1. Returns
제가 5집에서 제일 좋아하는 노래인데요. 녹음이 가장 잘 된 것 같습니다. 불러보면 굉장히 힘든 노래인데, 매우 잘 소화해냈습니다. 티비에서 라이브할 때에는 좀 안습인 영상이 몇 개 있었는데^^

2. Delete
문차일드 때 노래인데, 랩이 있습니다-_-; 이수씨는 노래를 해야합니다-_-;

3. 사랑을 믿어요
쉰 목소리가 들립니다.

4. 해바라기도 가끔 목이아프죠
5집 CD2에 실린 버전입니다. 오리지널 버전이 훨씬 좋습니다-_-

5. 별
2집에서 좋아하는 노래. 나름 낮아서 부르기 쉬운....

6. 그대는 눈물겹다
이수가 눈물겹습니다. 초반에 쉰 목소리가 들립니다. 하지만 후반부를 잘 마무리 짓는군요^^ 상당히 고음이 많이 나오는데, 시원시원 하군요^^

7. 사랑하고 싶었어
전민혁(전홍만-_-)씨가 불렀군요. M.C The Max에서 노래를 담당하고 있는 만수입니다! 하지만, 저는 이수씨가 부르는 게 더 좋군요^^

8. 사랑은 아프려고 하는거죠
타이틀곡들은 너무 많이 들어서-_-

9. 가슴아 그만해
이것도-_-;

10. Doesn't Matter
1집의 명곡을 이상한 리믹스로 망쳐놨군요. 제 기억으론 콘서트 때 Club분위기를 만든다고 해서 몇 곡을 ClubMix한 걸로 알고 있는데, 완전 실패작입니다.

11. Moment
이곡도 같이 ClubMix된걸로 알고 있는데(맞나?), 이건 맘에 드네요. 대체적으로 싫었던 노래가 없던 1집, 5집노래가 전 좋네요.

12. Sixth Sense
2집 때 후속곡으로 가지고 왔다가 바로 접고 들어갔던 그 곡이군요. 중간에 이수씨가 박자를 놓칩니다-_- 가사도 가끔 안하는 것보니, 안좋은 추억이 있는 노래인 것이 분명합니다.

13. 태양은 가득히
문차일드 때 한참 아이돌이라고 불리우던 그때 그 노래입니다. 이들도 아이돌이였죠. 지금은 아저씨들이군요-_-

14. 사랑의 시
엠씨더맥스를 정상에 서게 하고, 대중들에게 많이 알리게 된 노래였죠.

15. 잠시만 안녕
MC THE MAX를 좋아하게 만든 노래군요. X-JAPAN의 노래를 즐겨들었는데, Tears와 비슷한 노래가 나오길래 노래를 듣고 매력에 빠지게 되었죠^^ 시원시원한 노래입니다^^ 중간에 힘들었는지 관객에게 마이크를 넘깁니다. 중간에 저음에서 음정도 불안하군요. 하지만, 마지막에 마무리는 확실하게 하는군요^^

16. You're Falling In Love
이 노래를 찾아보고 알았는데, 문차일드 때 노래더군요. 콘서트하면 꼭 부릅니다. 제가 MC THE MAX콘서트 2번 갔는데, 두번 다 불렀습니다-_- 그냥 콘서트에 맞는 노래여서 부르는 것 같습니다. 신나는 노래거든요^^

17. 붉은 노을
이 노래도 콘서트 때 꼭부릅니다. 마지막에 이 노래로 장식할 때 정말 감동이였는데^^ 중간에 가사 살짝 까먹습니다-_- 아...노래에서 "난 너를 사랑해~" 이 부분에서 안부르는 이유는 콘서트를 가보신 분들은 알지만, 저기서 이수씨가 하트를 그려야 하기 때문입니다...............후....-_-

우와 곡 마다 그냥 생각나는대로 타이핑했더니 상당히 긴 글이 되버렸네요. 최근 이수씨가 카인과 아벨에서 OST에 참여했던데, 군대가기 전 막바지 활동을 하는 듯 합니다. 2년동안 엠씨더맥스의 새로운 정규앨범을 들을 수 없다니 슬프군요. 2년 뒤에 7집이 기다려지네요^^
 
Posted by 머드초보

댓글을 달아 주세요

  1. 이충현 2009.04.17 22:52  댓글주소  수정/삭제  댓글쓰기

    으헝 엠맥 앨범을 2년간 들을수 없다니!..

    그저 눈물만 ㅠ

    • 머드초보 2009.04.19 02:31  댓글주소  수정/삭제

      그렇죠!
      정말 슬픈 현실입니다 ㅠ
      2년 뒤에 7집을 볼 수 있다니요 ㅠ

  2. 얼짱 2009.06.21 17:29  댓글주소  수정/삭제  댓글쓰기

    7집나왔는데 -_- 어이없네

    • 머드초보 2009.06.21 23:44  댓글주소  수정/삭제

      안녕하세요~
      이 글을 작성할 때에는 마지막 앨범인줄 알았어요 죄송합니다^^
      그리고, 이번에 나온 Rewind & Remind는 7집이 아닌걸로 알고 있습니다.
      그냥 스페셜앨범으로 알고 있습니다.
      방문해주셔서 감사해요~ ^^

 
소리바다에서 뮤직비디오 위젯을 제공을 합니다. 자기 블로그에다가 뮤비위젯을 달려고 하면 소리바다 사이트가서 선택한 후 퍼가기버튼을 누르고 나서 자기 블로그에 붙여넣어야 하는데요.
이게 귀찮아서 플러그인을 만들게 되었습니다
(사실...그냥 플러그인을 한번 만들어보고 싶었습니다-_-)
문제가 된다면 삭제하겠습니다ㅠ




소리바다 뮤비위젯 :  http://podcast.soribada.com/Widget/Widget.html
소리바다 뮤비위젯 공식블로그 : http://sobawg.tistory.com/


사용법입니다.
압축파일을 풀고, 폴더 통채로 plugins폴더에 넣습니다.

텍스트큐브 관리자 화면으로 갑니다.
플러그인 -> 플러그인 목록 -> 목록 중 소리바다 뮤비위젯 플러그인을 클릭하여 활성화 합니다.
그리고, 환경설정을 클릭 합니다.
사용자 삽입 이미지
위와 같은 화면이 뜨는데요.
첫번째 옵션은 자동재생여부를 선택하는 건데요. '네'를 하게 되면, 페이지가 로딩되자마자 뮤비가 재생이 됩니다.
두번째, 세번째, 네번째는 직접입력하는 것이 아닙니다.
아래 뮤직비디오 리스트가 있는데, 원하는 뮤직비디오의 선택버튼을 클릭합니다.
사용자 삽입 이미지
위처럼 자동으로 채워지게 됩니다. 그리고, 저장버튼을 누르면 '사고쳤어요-다비치'의 뮤직비디오가 셋팅이 된 것입니다. 아직 뮤직비디오 제목, 가수명 검색은 안됩니다 ㅠ 차후 버전에 추가를 할 생각입니다(언제가 될까-_-)

그럼 위젯을 달아봅시다.
텍스트큐브 관리자화면에서 꾸미기 -> 위젯 -> 추가가능한 플러그인에서 '소리바다 뮤비 위젯'이 있는데, 오른쪽에 원하는 위치에 올려 놓습니다.
사용자 삽입 이미지
이제 블로그에서 뮤직비디오 위젯이 보일꺼에요.
다른 컴이나 다른 버전에서는 전혀 테스트하지 않았습니다--;
제 텍스트큐브는 1.7.7입니다.

PS. 텍스트큐브 플러그인 올리기가 안되네-_-;
 
Posted by 머드초보

댓글을 달아 주세요