아...좀 문제가 발생할 것 같기도 하지만-_- 괜찮을꺼에요-_-
일단 플러그인을 하나 만들었는데요. 조금 문제가 많습니다만, 기본적인 기능은 다 되는.....-_-
크롬플러그인의 특징은 백그라운드에서 어떤 작업을 계속적으로 실행할 수 있는 특징이 있습니다. 그래서 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  댓글주소  수정/삭제

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

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




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


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

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

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

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

댓글을 달아 주세요