MuTube
얼마전에 게렉터 블로그의 글 http://gerecter.egloos.com/33... 에서 주제곡이 좋은 TV쇼들과 그 장면들을 http://youtube.com 사이트에서 모아서 보여드렸습니다. 이것을 보다가, http://youtube.com 의 뮤직 비디오들을 모아서, 음악을 들려주는 http://bugs.co.kr/ 이나, http://maxmp3.co.kr 같은 사이트로 꾸며보면 어떨까 하는 생각을 하게 되었습니다.
그리하여, 개인용으로 사용하기 위해 JavaScript 와 AJAX 로 되어 있는 간단한 페이지를 꾸며서 youtube 와 다음TV팟의 링크페이지를 만들었습니다. 이 페이지에서 뮤직비디오를 줄줄이 재생해서 음악을 듣는 용도로 쓸 수 있도록 시도해 보았습니다. 비슷한 것이 나와 있습니다만, 자유롭게 개조하기 위해서 직접 만들어 보았습니다. 이름하여 뮤튜브 muTube 입니다.
아주 간단한 다음TV팟, 유튜브 매쉬 업 이라고 볼 수도 있을 텐데, 현재 http://hehehe.co.kr/mutube/mu... 에서 구경해 보실 수 있습니다. 이곳에는 http://www.pitchforkmedia.com 선정 "100 Awesome Music Video" 를 포함해서, 약 200편 정도의 뮤직비디오가 등록되어 있습니다.
최근에는 비슷한 일을 해주는 FireFoxExtension http://addons.mozilla.org/ko/... 이 나오기도 했습니다.
위와 같이 초기 화면이 나옵니다.
검색창에, 노래(뮤직비디오)를 검색하기 위해서, 가수 이름이나, 제목의 일부를 입력합니다. 예를 들어, "beatles"로 검색하면 다음과 같이 결과가 나옵니다.
이 중에 원하는 곡을 골라서 재생 목록을 만들거나, 혹은 "Play all" 버튼을 눌러서 모든 곡들을 차례로 재생하면 됩니다.
저작권 문제등을 피하기 위해서, 모든 처리는 검색을 포함하여 전부 클라이언트에서 이루어지며 이 때문에 개인용 활용 외에는 많은 한계가 있습니다.
즉, 현재 뮤튜브는 뮤직비디오 즐겨찾기 공유사이트 입니다. 퍼가기 와 embed 가 허용된 뮤직비디오들의 목록을 주욱 모아놓고, 그것을 간단한 JavaScript 로 검색해서 골라 보는 사이트일 뿐입니다. 따라서, 퍼가기/embed 가 허용되지 않은 뮤직비디오들은 원칙적으로 등록하지 않고 있고, 모든 저작권 관련 사항은 처음 뮤직비디오를 퍼갈 수 있게 한 쪽에서 책임을 지도록하는 구조로 되어 있습니다.
새 버전에서는 한글사용과 다음TV팟 동영상이 추가로 지원됩니다.
이렇게 매우 단순한 방식으로 하기 때문에, 재생이 끝났는지 어떤지 알 수가 없습니다. 그래서, 모든 곡들을 등록할 때 곡의 재생시간 까지 함께 기록하고 있습니다. 곡을 재생 시작한지 흐른 시간을 자바스크립트의 Date 객체로 측정하여, 해당 시간에 도달하면 무조건 그 곡이 끝났다고 인식하도록 했습니다.
이 때문에, 곡 재생 시간이 정확히 기록되지 않은 경우나, 재생중에 네트워크가 느려 져서 멈춤이 발생한 경우에는 곡이 다 끝나지 않았는데도 끝났다고 인식하게 되는 치명적인 오류가 있습니다.
황당한 방법인 듯 하지만, 곡 1개당 정보를 기록하는데 50바이트 정도 밖에 되지 않으므로, 불과 500KB 에 1만곡을 담을 수 있습니다. 그렇게 되면 youtube의 거의 모든 유명한 뮤직비디오를 다 다룰 수 있는 정도이므로, 나름대로 유용합니다. 프로그램을 잘 설계해서 쓸데없는 중복 다운로드가 발생하지 않게 하고, 브라우저의 캐쉬 기능까지 활용할 수 있게 한다면, 서버 측에서는 아무 동작 없이 검색하는 느낌을 줄 수 있습니다.
특히, 이렇게 해놓으면, 사용자 컴퓨터 내부에서 서버 없이 돌리는 개인용 활용에 유용합니다.
뮤튜브에 http://hehehe.co.kr/mutube/mu... 페이지에 자기가 발견한 뮤직비디오를 등록할 수도 있습니다. TuBot 을 통해서 해당하는 뮤직비디오를 MP3로 변환하면, 곡정보가 자동으로 뮤튜브에 등록되는데, 이것이 정상적인 것인지 확인하는데 시간이 소요된 후 등록되게 됩니다.
현재, 2,3 에 해당하는 프로그램은 나와 있는데, 쉽게 유튜브 링크들을 수집할 수 있도록 웹브라우저와 연동시켜 놓은 것, 그리고 그렇게 찾은 즐겨찾기를 공유할 수 있는 곳을 보지 못했습니다. 그래서 제가 TuBot 에서 재미삼아 만들어 보았습니다.
뮤직비디오를 올린 사람들은 대체로, music video 가수이름 정도를 태그로 줄 것입니다. 그런데, 이렇게 되면, 태그만 분석해서, 태그 단어들 중에 어느 것이 가수이름이고 어느 것이 music video 라는 뜻인지 알아낼 방법이 없습니다. 태그에 대한 메타 정보가 없다는 이야기입니다.
하지만, 말머리를 사용했다면, 누군가 " {뮤비} 비틀즈 - Hey Jude" 같은 식으로 제목을 붙였을 것이고, 이런 경우가 많다면, 자연스럽게 모든 사람들이 이런 말머리 규칙을 따르게 될 것입니다.
이렇게 되면, {뮤비} 말머리가 있는 것은 뮤직 비디오이고, 그 다음에 가수 이름, "-", 제목 순으로 배열되기 마련이므로 자연스럽게 정보를 분류할 수 있습니다. 사람들이 눈에 잘 뜨이는 제목을 짓느라 자연스럽게 메타 정보를 어순과 기호 속에 표현 하게 된다는 것입니다.
물론 그런 규칙을 어기는 사람도 있을 것입니다. 하지만, 도무지 방도가 없는 태그에 비해서, 말머리는 규칙에 맞지 않는 경우를 배제하고 잡아내도 충분히 적당한 정보가 될 것입니다. 그리고 유용하면 유용할 수록 사람들은 자신의 제목이 규칙에 맞도록 차차 수정해 갈 것이므로, 태그를 수정하는 경우가 많지 않은 경우에 비하면 훨씬 더 발전적이다는 생각도 해봅니다.
(마지막 변경 UNIX clock : 1199028435 / Common clock 2007.12.31, 12:27 am )
다음글 OpenStructure
그리하여, 개인용으로 사용하기 위해 JavaScript 와 AJAX 로 되어 있는 간단한 페이지를 꾸며서 youtube 와 다음TV팟의 링크페이지를 만들었습니다. 이 페이지에서 뮤직비디오를 줄줄이 재생해서 음악을 듣는 용도로 쓸 수 있도록 시도해 보았습니다. 비슷한 것이 나와 있습니다만, 자유롭게 개조하기 위해서 직접 만들어 보았습니다. 이름하여 뮤튜브 muTube 입니다.
아주 간단한 다음TV팟, 유튜브 매쉬 업 이라고 볼 수도 있을 텐데, 현재 http://hehehe.co.kr/mutube/mu... 에서 구경해 보실 수 있습니다. 이곳에는 http://www.pitchforkmedia.com 선정 "100 Awesome Music Video" 를 포함해서, 약 200편 정도의 뮤직비디오가 등록되어 있습니다.
최근에는 비슷한 일을 해주는 FireFoxExtension http://addons.mozilla.org/ko/... 이 나오기도 했습니다.
어떤 모양인가?
간단합니다. 처음 들어가보면, 위와 같이 초기 화면이 나옵니다.
검색창에, 노래(뮤직비디오)를 검색하기 위해서, 가수 이름이나, 제목의 일부를 입력합니다. 예를 들어, "beatles"로 검색하면 다음과 같이 결과가 나옵니다.
이 중에 원하는 곡을 골라서 재생 목록을 만들거나, 혹은 "Play all" 버튼을 눌러서 모든 곡들을 차례로 재생하면 됩니다.
저작권 문제등을 피하기 위해서, 모든 처리는 검색을 포함하여 전부 클라이언트에서 이루어지며 이 때문에 개인용 활용 외에는 많은 한계가 있습니다.
즉, 현재 뮤튜브는 뮤직비디오 즐겨찾기 공유사이트 입니다. 퍼가기 와 embed 가 허용된 뮤직비디오들의 목록을 주욱 모아놓고, 그것을 간단한 JavaScript 로 검색해서 골라 보는 사이트일 뿐입니다. 따라서, 퍼가기/embed 가 허용되지 않은 뮤직비디오들은 원칙적으로 등록하지 않고 있고, 모든 저작권 관련 사항은 처음 뮤직비디오를 퍼갈 수 있게 한 쪽에서 책임을 지도록하는 구조로 되어 있습니다.
새 버전에서는 한글사용과 다음TV팟 동영상이 추가로 지원됩니다.
재생 기능
재생은 youtube 의 embed 태그로 되어 있는 HTML 내용 자체를 span 태그 속에 동적으로 쓰는 자바스크립트 로 동작하고 있습니다. 선택한 곡을 고르면, 선택한 곡에 해당하는 embed 태그를 출력하고, 그 곡을 멈출 때는 그 자리에 공백을 덮어씌워서 다시 아무것도 없는 내용으로 되돌리는 것으로 하고 있습니다.이렇게 매우 단순한 방식으로 하기 때문에, 재생이 끝났는지 어떤지 알 수가 없습니다. 그래서, 모든 곡들을 등록할 때 곡의 재생시간 까지 함께 기록하고 있습니다. 곡을 재생 시작한지 흐른 시간을 자바스크립트의 Date 객체로 측정하여, 해당 시간에 도달하면 무조건 그 곡이 끝났다고 인식하도록 했습니다.
이 때문에, 곡 재생 시간이 정확히 기록되지 않은 경우나, 재생중에 네트워크가 느려 져서 멈춤이 발생한 경우에는 곡이 다 끝나지 않았는데도 끝났다고 인식하게 되는 치명적인 오류가 있습니다.
검색 기능
검색 기능은 뮤직비디오 목록을 기록해 놓은 CSV 파일을 XML 형태로 포장해 놓은 목록 XML 파일을 AJAX 로 통째로 다운로드 한 뒤, 자바스크립트로 검색하는 방식을 취하고 있습니다. 예시 사이트에는 이 파일 http://hehehe.co.kr/mutube/mu... 을 읽도록 되어 있습니다.황당한 방법인 듯 하지만, 곡 1개당 정보를 기록하는데 50바이트 정도 밖에 되지 않으므로, 불과 500KB 에 1만곡을 담을 수 있습니다. 그렇게 되면 youtube의 거의 모든 유명한 뮤직비디오를 다 다룰 수 있는 정도이므로, 나름대로 유용합니다. 프로그램을 잘 설계해서 쓸데없는 중복 다운로드가 발생하지 않게 하고, 브라우저의 캐쉬 기능까지 활용할 수 있게 한다면, 서버 측에서는 아무 동작 없이 검색하는 느낌을 줄 수 있습니다.
특히, 이렇게 해놓으면, 사용자 컴퓨터 내부에서 서버 없이 돌리는 개인용 활용에 유용합니다.
목록 XML 파일
text 태그 하나에 모든 내용을 다 집어 넣어 놓은 파일로, 내용은 콤마로 열을 구분한 CSV 파일 입니다.- 첫번째 열부터, youtube 재생 코드 (/v/ 다음 부분을 말합니다),
- 제목
- 가수
- 앨범
- 장르
- 재생시간 (분:초 형식입니다.) 으로 되어 있습니다.
MP3 변환
유튜브 동영상, 다음TV팟 동영상을 변환해주는 튜봇 TuBot 프로그램을 사용하면, 플래쉬를 통해 웹브라우저로 전송된 뮤직비디오를 AVI, MPG, MP4 혹은 MP3 파일로 바꿀 수 있습니다. 다음TV팟에는 중간정도는 되는 음질의 뮤직비디오가 있기 때문에 활용하기에 따라서는 유용합니다.확장
모든 소스코드와 내용은 웹페이지 속에 그대로 노출되어 있으며, 앞서 말씀드린 대로, 서버 없이 모든 기능은 자바스크립트를 통해 작동되므로 사용자 컴퓨터 내부에 저장한 뒤, 목록 XML 파일만 수정하면 자신만의 뮤직비디오 들을 담아 놓을 수도 있습니다.뮤튜브에 http://hehehe.co.kr/mutube/mu... 페이지에 자기가 발견한 뮤직비디오를 등록할 수도 있습니다. TuBot 을 통해서 해당하는 뮤직비디오를 MP3로 변환하면, 곡정보가 자동으로 뮤튜브에 등록되는데, 이것이 정상적인 것인지 확인하는데 시간이 소요된 후 등록되게 됩니다.
더 유용한 것
사실 유튜브에 있는 뮤직비디오 들을 배경음악으로 듣기 위해서 더 편리한 프로그램은 다음과 같은 것이라고 생각합니다.- 1. 유튜브를 돌다가 재미난 것을 발견하면, 단순히 웹브라우저의 즐겨찾기에 등록해서 모아 놓습니다.
- 2. 프로그램을 가동하면, 웹브라우저 즐겨찾기를 분석해서, 해당하는 유튜브 동영상들을 모두 다운로드할 수 있도록 합니다.
- 3. 다운로드한 파일들을 차례로 재생하면서 여유롭게 들으면 됩니다.
- 4. 다운로드한 파일은 휴대장치에 담기 위해 자동으로 FLV/AVI 로 변환할 수 있는 기능도 프로그램에 지원합니다.
- 5. 검색과 공유를 위해서 프로그램에서 이 동영상들의 유튜브 즐겨찾기를 특정 사이트 (혹은 DelIcioUs 같은 기존 사이트) 에 자동으로 올릴 수 있도록 합니다.
현재, 2,3 에 해당하는 프로그램은 나와 있는데, 쉽게 유튜브 링크들을 수집할 수 있도록 웹브라우저와 연동시켜 놓은 것, 그리고 그렇게 찾은 즐겨찾기를 공유할 수 있는 곳을 보지 못했습니다. 그래서 제가 TuBot 에서 재미삼아 만들어 보았습니다.
유튜브 검색과 Tag
유튜브는 검색을 태그 Tag 로 합니다. 그런데, 전에 Tag 페이지 에서도 언급드렸듯이, 태그 보다 오히려 원시적인 말머리가 더 유리할 때가 있습니다. 이런 점은 뮤직비디오 검색에서도 나타납니다.뮤직비디오를 올린 사람들은 대체로, music video 가수이름 정도를 태그로 줄 것입니다. 그런데, 이렇게 되면, 태그만 분석해서, 태그 단어들 중에 어느 것이 가수이름이고 어느 것이 music video 라는 뜻인지 알아낼 방법이 없습니다. 태그에 대한 메타 정보가 없다는 이야기입니다.
하지만, 말머리를 사용했다면, 누군가 " {뮤비} 비틀즈 - Hey Jude" 같은 식으로 제목을 붙였을 것이고, 이런 경우가 많다면, 자연스럽게 모든 사람들이 이런 말머리 규칙을 따르게 될 것입니다.
이렇게 되면, {뮤비} 말머리가 있는 것은 뮤직 비디오이고, 그 다음에 가수 이름, "-", 제목 순으로 배열되기 마련이므로 자연스럽게 정보를 분류할 수 있습니다. 사람들이 눈에 잘 뜨이는 제목을 짓느라 자연스럽게 메타 정보를 어순과 기호 속에 표현 하게 된다는 것입니다.
물론 그런 규칙을 어기는 사람도 있을 것입니다. 하지만, 도무지 방도가 없는 태그에 비해서, 말머리는 규칙에 맞지 않는 경우를 배제하고 잡아내도 충분히 적당한 정보가 될 것입니다. 그리고 유용하면 유용할 수록 사람들은 자신의 제목이 규칙에 맞도록 차차 수정해 갈 것이므로, 태그를 수정하는 경우가 많지 않은 경우에 비하면 훨씬 더 발전적이다는 생각도 해봅니다.
(마지막 변경 UNIX clock : 1199028435 / Common clock 2007.12.31, 12:27 am )
다음글 OpenStructure
