poject Name : MusicBlock

What is Music Block ?

첨부파일 : 발표용 PPT

물개박수2.pptx

1. 프로젝트 소개

Keyword : easy, share, fun

작곡지식이 없어도 '음악블럭'을 '공유'하며 재밌게 음악을 즐길 수 있다.

작곡을 작곡자의 전유물이 아닌 모든 사람의 것으로 만드는 것이 궁극적인 목표.

 기존의 작곡 프로그램들은 복잡한 인터페이스로 일반인의 사용성이 떨어지며, 작곡지식이 필요했습니다.

MusicBlock은 모든 작곡지식을 버리고 단지 시간만이 존재하는 '음악블럭'이라는 개념을 도입하여 작곡지식이 없어도 감각대로 피아노를 치며 음악블럭을 만들 수 있도록 하였습니다. 만들어진 음악블럭을 이리저리 조립해보며 나만의 음악을 완성할 수 있습니다. 

 음악블럭을 만들 자신이 없다면 다른 사람들이 공유해 놓은 블럭을 가져오는 것만으로도 음악을 만들 수 있습니다.

2. Client 기술

대표 기술 : Web Audio API, Indexed Database, Sortable, Swiper

Web Audio AIP : 소리를 내기 위해 사용

Indexed Database : 서버에 연결되지 않더라도 폰 자체에서 동작하고 데이터를 저장해야 하므로 client단의 DB로 사용

Swipter&Sortable : 음악을 만들때 블럭을 순서대로 정렬하기 위해 사용

기타 :

bootstrap, animate, canvas, touch punch, sementic UI

3. Server 기술

사용 서버 : Tomcat

사용 데이터베이스 : Oracle 10g

 

서버는 Spring model2 MVC로 구성하였습니다. 각 Layer 간의 decoupling을 유지하기 위하여 interface를 사용하였습니다.

Mybatis를 통하여 query를 작성하였습니다.

AspectJ를 통하여 AOP를 구현하였습니다.

log4J를 이용하여 Debugging을 확인하였습니다.

4. 문제 해결

1) 소리의 변화

하나의 오실레이터 -> 48개의 오실레이터 -> MP3 파일 재생 -> 소리감소 알고리즘 적용

 Web Audio API를 사용하면서 주파수를 직접 조작하여 소리를 냈습니다.

 소리를 내는 역할을 하는 오실레이터 하나로 우리가 낼 수 있는 48개의 음을 모두 들려주니 음이 서로 섞여 노이즈가 심하게 들렸습니다. 이것을 해결하기 위해 48개의 음에 각각의 오실레이터를 사용하였습니다. 노이즈는 해결하였으나 전자음으로 들렸습니다.

 피아노 음으로 드려주기 위해 주파수를 직접 조작하는 것이 아니라 MP3를 재생하는 것으로 방식을 바꾸었습니다. 하지만 MP3의 재생길이가 2초로 정해져있어 정해진 시간블록에 많은 음을 입력하면 소리가 끊기는 현상이 발생하였습니다. 그래서 단계적으로 소리를 감소시키는 알고리즘을 적용하여 앞뒤의 음이 자연스럽게 들리도록 하였습니다.

2) 로컬저장소의 선택

많은 로컬 저장소( Session Storage, Application cash&Cookie, file I/O, Web SQL Database, Local Storage ) 중 Indexed Database를 사용하게 된 과정.

어플이 종료되어도 정보들이 저장되어야 하므로 Session Storage를 제외하였습니다. 

Application cash와 Cookie는 정보를 저장하는 용도보다는 서버에서 받은 정보를 갱신하는 용도이므로 제외하였습니다. file I/O는 데이터 수정등의 관리의 불편함으로 제외하였습니다.

Web SQL Databbase는 버전지원의 중단으로 사용할 수 없었습니다.

많은 블럭정보와 복잡한 음악정보를 관리하기 위하여 테이블 구조의 저장소가 필요했습니다. Local Storage는 테이블 구조를 지원하지 않아 결국 Indexed Database를 사용하게 되었습니다.

5. 기타 소개

- Ajax를 통하여 Json 형식으로 client와 server의 통신을 하였습니다.

  이때 cross domain 문제가 발생하여 CORS filter를 적용하여 해결 하였습니다.

- bower를 이용하여 server의 library를 관리하였습니다.

- Git을 통하여 팀원들간 소스코드를 저장하고 SVN을 이용하여 실시간으로 공유하였습니다.

4. ofen source

client : https://github.com/keheunhye/musicblockClient.git

server : https://github.com/keheunhye/waterdog.git

5. 프로젝트를 끝내며 

시간이 조금더 있었다면..

- 로그인을 하다 만 것 완성시키기

- 저장페이지에서 Tag 입력란은 NodeJS, MySQL을 이용해서 autocomplete 기능을 구현

- 피아노 이외의 악기 추가하기

- 사람들간의 실시간 릴레이 블럭조립기능을 만들어서 network programming

요즘 대세인 Hybrid를 따르기 위해 html5로 client를 작성하고 그 위에 폰갭을 씌웠다.

우리가 만드는 것은 Native인데 애초에 android programming을 하였다면 시간이 덜 소요되지 않았을까..

왜 많은 사람들이 창업을 하는지 알겠다. 

내가 원하는 것을 기획하고 만들어 낸다는 것이 이렇게 재미있을 줄이야!

Hardware쪽으로도 재미있을 것 같다.

블럭의 높이는 음의 높이, 블럭의 길이는 재생시간, z축으로는 화음, 블럭의 색은 악기들!!

프로젝트 발표영상 보기