1. 집중력 회복 : 우리가 만든 소리 들려주기
방금 들은 소리는 우리가 발표할 프로젝트를 이용하여 제작한 멜로디다.
지금부터 우리는 이 소리를 어떻게 만들어냈는지 소개해 드리려 한다.
시작합니다. 뮤직블럭.
2.현황 및 문제점
1) 복잡한 작곡 프로그램 2~3개 보여주기 : 사용하기 어려움을 강조
소개에 먼저 이미 상용화 되고있는 프로그램을 보여드리겠다.
개러지밴드나 큐베이스는 작곡은 하고 싶은데 음악에 대한 배경지식이 부족하거나 인터페이스가 복잡한 단점을 가지고있다.
이러한 문제점에서 착안하여 (여기서 페이지 넘기기)
3. Keyword : 레고블럭영상
이러한 키워드를 가진 어플을 제작하였다.
fun, 내가 직접 음악을 만들며 즐거움을 느끼고
share, 나의 음악지식을 함께 듣고 공유하고 다른 사람의 음악을 공유받으며
easy, 블럭이라는 우리 어플만의 개념으로 쉬운 작곡을 하고
그것이 바로 뮤직블록이다.
그렇다면 어떻게 곡이 완성될지 보여드리겠다.
4. 간단시연 : (영상)
main-making-compose-community
메인페이지 들어가서 블럭을만들고 compose 가서 조립(미리 블럭 몇개 만들어 놓음)하고 커뮤니티에올림(emotion & 내가 올린것 서버 확인)
앞서 말한 다른 작곡프로그램과 달리 접근성이 쉽다.
그 증거로 두가지의 컨텐츠를 보면 알 수 있다. 멜로디를 제작하는것. 그것들을 조합하는 것이다. 마치 레고블럭처럼.
멜로디를 제작하는 과정에서 우리는 박자라는 개념을 없애고 이용자가 시간을 선택하여 그 시간안에 멜로디를 제작한다. 완성된 멜로디들을 블럭이라 부르고 이것들을 조합하여 음악을 만든다.
5. 사용기술 : 각페이지를 보여주며 그 페이지에서 설명, 영상
네이티브어플인 관계로 가장 집중된 부분은 UI와 localStorage 부분이다.
블럭들을 이동하는데에 소터블과 스와이퍼를 사용하고, 인터넷이 되지 않아도 어플을 동작시키기 위해 indexedDB를 사용하였다.
이제 각자 page에서 사용한 기술,lib 소개
<영상?PPT?>
메인페이지 - 음악조립페이지 - 조립해봄 - 마음에드는게 없음 커뮤니티로감 - 커뮤니티에서 좋아요 재생 해보고 다운 받음 - 메이킹하러감 - 메이킹장면 : 공백, 옥타브, 해봄 - 컴포즈와서 들어보니 박자가 마음에 안들어서 메이킹화면으로감 - 공백버튼을 보여주며 박자개념 알려주기 - 컴포즈 - 저장 - 커뮤니티 : 내가올린거뜬거확인, 감정별블럭보기
6. 아키텍쳐 : core 기술 설명, 데이터흐름
1) main에서 부터의 흐름 : 강사님이 말한 dynamic한 page / 데이터의흐름
서버측 기술은 스프링, 오라클, 톰캣 등 이 사용되었다.
웹 환경에서 소리를 내기위해 web audio api를 사용했다.
indexedDB 사용했당 ㅎ.ㅋ 뀨^뀨 ㅇ_ㅇ?? 흐규흐규 뉴3뉴 ?_?
(은혜 : 데이터 흐름 보여주기)
ppt animation으로 구현
저장하고다운받기 서버,local 저장
7. 문제 사항 : 해결 완료된 것들을 얘기해주자
1) 로컬저장소 : 여러개중 indexedDB사용했다
2) 소리의 변화 : noise - 전자음 - 피아노/소리의변화 직접들려주기
주파수 이용해서 하는데 소리가겹침(오실레이터 1개로 48가지 음으로 하니 소리섞임)
소리겹치는거 해결 전자음(오실레이터를 48개 사용함으로 각각의 음을 소리냄)
주파수 버리고 mp3 재생
3) conflicted lib : customizing
jquery 외에 다양한 써드파티라이브러리를 적용하니 중복된 변수명의 사용으로 인한 충돌이 발생
웹브라우저가 라이브러리를 순서대로 읽기때문에 오버라이딩하였다 !
8. 아쉬운점 : 해결 못한 것들을 얘기해주자
1) NOdeJS : OracleDB 연동실패
2) 파편화 : Test 환경의 다양화, 시간낭비
3) Spring : Test driven
4) 여러악기&화음
기계음과 비교해주며 이만큼이나 했지만 우리가 원하는 만큼의 소리는 나오지 않았다
발사믹으로 보여주며 이런 기능을 하고싶었지만 시간상 못했고 앞으로 해나갈 용의가 있다.
9.팀원소개
1) 각자 맡은 역할
프론트작업 강조하기
http://okky.kr/article/301900
http://kipid.tistory.com/entry/Programmer-Developers-Portfolio#secId1-1-2
http://genesis8.tistory.com/m/post/175
http://m.thisisgame.com/webzine/news/nboard/4/?n=56305
http://java21c.tistory.com/m/post/entry/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%B0%EC%B6%9C%EB%AC%BC-%EB%A6%AC%EC%8A%A4%ED%8A%B8
http://kipid.tistory.com/entry/Programmer-Developers-Portfolio#secId1-1-2
http://genesis8.tistory.com/m/post/175
http://m.thisisgame.com/webzine/news/nboard/4/?n=56305
http://java21c.tistory.com/m/post/entry/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%B0%EC%B6%9C%EB%AC%BC-%EB%A6%AC%EC%8A%A4%ED%8A%B8
반응형
'Project > MusicBlock' 카테고리의 다른 글
musicBlock 추가 진행사항 (0) | 2016.06.26 |
---|---|
poject Name : MusicBlock (0) | 2016.05.28 |
[NodeJS] NodeJS 적용하기 (0) | 2016.05.03 |
[4/15] 수업내용 (0) | 2016.04.14 |
[4/12] 회의록 (0) | 2016.04.12 |