몇일전에 포스팅한 '집에 있는 mp3를 회사에서 들어보자'에서 소개했던 VibeStreamer를 4일째 사용중입니다. 아주 만족하고 있습니다. :-)

다만 한글 mp3 파일이 제대로 플레이되지 않는 문제가 있어 확인해보니, 파일시스템 및 ID3 tag에서는 cp949를 사용하는데 javascript에서는 (아시다시피) 유니코드를 사용하는게 원인이더군요.

(javascript의 escape(), encodeURI() 함수가 euc-kr 인코딩을 지원하지 않죠)

웬만하면 vibe streamer 서버 티어에서 해결하고 싶었는데, 그쪽 스크립트 엔진에 iconv()를 얹자니 도저히 방법이 없어서, 그냥 '%EB%82%98' 형태로 인코딩된 한글 utf8 문자열을 '%B3%AA' 형태의 cp949 인코딩 문자열로 변환하는 자바스크립트 함수를 하나 만들었습니다.

만든 방법은,

1) 먼저 PERL로 cp949 코드리스트를 출력하는 방법을 mwultong님의 블로그 포스트에서 발견, 조금 수정해서 (PERL의 Encode 모듈과 URI::Escape 모듈을 사용했습니다) 전체 cp949 캐릭터와 utf8 캐릭터의 대응 테이블을 만들었고, (mwultong님 감사합니다 ^^)

2) 이 대응 테이블을 다음과 같은 형태의 자바스크립트 object로 변환한 뒤에,

var codeTable = {
   E38080 : '%A1%A1',
   E38081 : '%A1%A2',
   E38082 : '%A1%A3',
   ...(생략)
}

3) 간단한 스트링 파서를 하나 만들고, 다음과 같은 방식으로 값을 꺼내왔습니다.

var result = eval('codeTable.' + utf8);

VibeStreamer 사용하시는 분들은 다음 첨부파일을 다운로드받아서 c:\Program Files\VibeStreamer\skins 아래에 압축을 푸시고, 서버의 스킨을 'Korean'으로 선택해주시면 됩니다.


VibeStreamer 따위에는 관심없고 자바스크립트 함수만 쓰시겠다는 분들은 다음 자바스크립트를 참조하세요: (10분만에 만든 소스라 개판입니다. 누가 개선해주신다면 대환영입니다)



ps. 지금 올해초에 나온 임재범님의 라이브콘서트 mp3 듣고 있습니다. 역시 임재범 ;-x
신고
  1. 김종규 2007.11.19 13:27 신고 댓글주소 | 수정 | 삭제 | 댓글

    vibestreamer 를 잘 사용하고 있는 1人 입니다.
    안 그래도 답답하던 한글을 해결하고자 말씀해주신 방법을 시도해 보았는데 웹페이지에서 디렉토리 내용이 뜨질 않네요.
    자바 스크림트를 실행하도록 하려면 따로 설정이 필요한 건지요.
    웹 프로그래밍 쪽으로는 아는 게 없어서 뭘 더 어떻게 해 봐야 할 지 난감합니다 --;;.
    혹시 문제가 될 만한 게 떠오르는 게 있으시면 감사하겠습니다.
    좋은 하루 되세요 ^^

  2. Favicon of http://hkjinlee.tistory.com BlogIcon 진이헌규 2007.11.23 09:21 신고 댓글주소 | 수정 | 삭제 | 댓글

    김종규 / 자바스크립트 에러가 발생하여 화면이 아예 뜨지 않는 상황이 아닌가 싶습니다. (브라우저 환경 따라 다소 차이가 있더군요) 혹 Firefox를 사용하신다면 Bugzilla라는 플러그인을 설치하시고 자바스크립트의 어디에서 에러가 나는지 확인을 해보셔야 할 것 같습니다.

  3. Favicon of http://pluto.ecplaza.net:8080/tt/river BlogIcon 리버 2008.08.20 15:45 신고 댓글주소 | 수정 | 삭제 | 댓글

    좋은 스크립트 올려주셔서 감사합니다. 가져다가 잘 썼네요. 고맙습니다.

  4. 그래피티 2010.04.06 19:26 신고 댓글주소 | 수정 | 삭제 | 댓글

    안녕하세요.
    2010년이 되서야 검색해서 이 글을 봤습니다.
    그런데 vibe streamer가 업그레이드 되서 그런지,
    올려주신 파일 적용이 어렵더군요.

    최근 버젼의 vibe streamer에서 한글 지원이 어려울까요?


집 pc에 약 OOGB정도의 mp3가 있습니다. (뭐 집에서 직접 뜬것도 아주 약~간 있고 다운받은 것도 있습니다) 회사에서 이걸 어떻게 들을 수 있는 방법이 없을까 고민하다가, 일단 Winamp Remote를 깔아봤습니다.

별 기능도 없는 것 같은데, 설치파일이 13MB나 되더군요. 게다가 이 서비스를 호스팅하고 있는 Orb라는 회사에 회원가입까지 하라고 합니다. 직접 집 PC의 IP로 접속하는게 아니라, 회원 ID를 이용해서 우회적으로 집 PC에 접속하는 구조더군요.

사용자 삽입 이미지

Winamp Remote


저런식으로 우회하는 구조라면 방화벽 설정은 따로 안해줘도 되겠다 싶어서 한번 깔아봤는데, 웬걸 완전히 헤맵니다. mp3 목록까지는 어떻게 불러오는데(그것도 무지하게 느립니다), 도저히 play를 할 수가 없군요. 바로 삭제. 절대 비추입니다.

그 뒤에 딜리셔스를 검색하다보니 Vibe Streamer라는 제품이 눈에 들어왔습니다. 일단 용량이 0.6MB밖에 안돼서 마음에 들더군요. 이 프로그램은 특이하게 - 이미 대세는 이쪽으로 넘어갔는데 제가 몰랐던건지도? - 프론트엔드를 flash를 씁니다.

사용자 삽입 이미지

Vibe Streamer Server


PC에 위와 같이 생긴 서버를 설치하고, 이런저런 접속권한을 준 다음에 브라우저로 집 PC의 IP 주소를 직접 치고 들어갑니다. (당연한 얘기지만, DDNS 설정해두면 더 편합니다) 서버 프로그램은 인덱스서버 + 웹서버 역할을 하는 것 같습니다.

사용자 삽입 이미지

Flash와 AJAX를 이용한 클라이언트 UI


클라이언트가 flash이기 때문에 무슨 고차원적인 스트리밍 기술같은건 사용하지 않고, 그냥 다운로드받아서 플레이하더군요. 방화벽 걱정할 필요가 없어서 마음에 들었습니다. 집이 무슨 광랜도 아니고 하*포스 케이블 라이트 쓰고 있어서 대역폭이 모자라지는 않을까 걱정했는데, 2시간째 별 문제 없네요. (뭐 하긴 평범한 128kbps 44KHz짜리 mp3가 1분에 1MB 정도 나오니까, 웬만한 대역폭에서는 별 문제 안되겠죠)

한글곡은 플레이되지 않는 난감함이 있습니다만, 웹 UI를 사용자가 직접 수정할 수 있게 해주니 시간나면 직접 수정해도 될 것 같습니다. (php-like한 스크립트언어를 사용합니다) 이거 참 신선하네요.

01: <HTML>
02: <BODY>
03: <FONT size=1>
04:
05: <? print("Hello World!"); ?>
06:
07: </FONT>
08: </BODY>
09: </HTML>

지금은 디렉토리기반 브라우징만 가능한데, 서버 기능을 좀 보강해서 ID3 tag에 기반한 검색을 할 수 있게 해주면 좀더 쓸만할 것 같네요.

(여담이지만, 디렉토리형 브라우징은 웹 애플리케이션에는 잘 맞지 않는 것 같다는 생각입니다. 탐색기 역할을 해주는 컨트롤을 플래쉬든 AJAX로 똑같이 만들어줘야하는데, 그걸 native 애플리케이션보다 더 잘 만들기 쉬울까요? 웹 애플리케이션이라면 tag cloud든 무엇이든 primitive한 엔트리들을 한단계 위에서 묶어줄 수 있는 형태의 UI가 더 맞는것 같습니다)

어쨌든 대세는 역시 RIA인 것 같습니다. native 애플리케이션은 서버 컴포넌트로 만들어서 뒤로 숨기고 프론트는 웹기반으로 가져가는 애플리케이션들이 요새 한참 유행인데, 음악 플레이어 쪽에서도 이런 반가운 애플리케이션을 만나게 되네요.


ps.

여담이지만, 역시 구형 노트북이 홈시스템 서버로는 쵝오인 듯. 프린터공유기능, FTP서버기능 등 네트웤 공유기로 해결하려면 추가로 돈이 들어가는 기능을 소프트웨어 깔아서 해결할 수 있죠, 신문클리핑 등 주기적으로 스케줄링해야 하는 작업 처리 가능하죠, 노트북이니까 계속 켜놓아도 전기 별로 안먹죠.
신고





티스토리 툴바