주의 : 이번 글은 크롬, 크롬플러스, 파이어폭스, IE9 등 최신 브라우저를 쓰시는 분들에게는 잘 보이구요. IE8이하 버전의 브라우저를 쓰시는 분들에게는 내용확인에 문제가 있을 수 있음을 미리 알려드립니다.

아마도 이 글에서 소개하는 ABC.js Javascript 플러그인은 음악 커뮤니티 사이트나 카페 등에서 상당히 쓰임세가 클 것 같다.
왜냐하면 웹상에서 단순한 코드 입력만으로도 훌륭한 악보를 만들어 낼수 있으며 최신의 브라우저의 경우 만들어진 악보로 연주되는 음악의 미리듣기 및 다운로드가 가능하기 때문이다. 물론 플래시와 같은 여타의 다른 플러그인 없이도 말이다.

백문이 불여일견이다.
아니다... 백견이 불이일 클릭이다.ㅋ

아래의 악보입력 창이라는 빨간 네모 박스속에 담긴 내용은 일단 넘어가고 그 아래의 악보를 먼저 확인해보자.

악보입력 창


만들어진 음악 미디로 듣기 및 다운로드 받기


만들어진 악보


이 곡은 우리에게도 널리 알려진 "We wish you a mery Christmas"라는 곡이다.
이 곡의 악보와 미디가 악보입력창에서 보이는 단순한 코드 입력만으로 완성된 것이다.
실질적으로 악보의 음계만을 표시하기 위해서는

D2|"G" G2 GA GF | "C" E2 C2 E2 | "A" A2 AB AG |
"D" F2 D2 D2 | "B" B2 Bc BA | "Em" G2 E2 DD | "C" E2 A2 "D" F2 | "G" G2 ||

이와 같은 코드만 입력시켜주면 끝난다.

실제로 코드 입력을 통해서 악보가 만들어 지는 것을 확인해보려면 악보입력창의 코드 부분을 편집해보면 된다.
지금 여러분이 보시는 이글에서 바로 실시간 편집이 가능하다.
또한 편집이 끝남과 동시에 바로듣기가 가능한 미디가 생성되며 다운로드도 가능하다.

이 외에도 이 사이트에서 위와 같은 방식으로 만들어진 여러가지 예제를 확인가능하며 코드입력방식에 대해서 상세하게 설명되어 있는 튜토리얼도 존재한다.

예제사이트에서 이런식의 여러가지 악보를 확인가능하다.

예제사이트에서 이런식의 여러가지 악보를 확인가능하다.

여러 커뮤니티 사이트 등에서 게시물에 그림을 그려 올리는 게시판이 유행하였듯이 음악을 좋아하는 사람들이 모인 커뮤니티라면 이 플러그인을 이용해 서로 음악에 대한 여러가지 토론이 가능해질 것이라고 본다. 또한 악보 공유사이트나 기타 관련 사이트 등에서도 여러가지로 활용이 가능할 것으로 보이고 말이다.

특별한 악보편집프로그램이 없이도 웹상에서 실시간 악보를 생성해준다니...
정말 웹의 발전은 무궁무진해지고 있다!ㅋ

최근 한달간 인기글

이 글의 관련글

REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/980
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/980
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/980
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/980
ㄱㄱㅎ 
wrote at 2011/05/06 17:13
오오오..

이거 재밌다~!!!!!
Nes 
wrote at 2011/05/06 17:15
그지? 좀 괜찮치?ㅋㅋ

나도 국딩 때 피아노 학원에 좀 열심히 다닐껄 그랬어.
작곡하는 사람들 너무 부러워~
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *378  *379  *380  *381  *382  *383  *384  *385  *386  ... *1128 
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 11151526 T304 Y3104

7926

1663

google chart api graph

-30 days

today : 304

전체 (1128)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (140)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...