http://bpsound.com/apps/bpharmony



닉네임과 다양한 색깔을 선택한 후, Join.

Set nickname and select color, then click to "Join Harmony".




-설정된 색깔의 원구름과 그 색깔에 특화된 음색의 사운드가 캔버스에 클릭 시마다 흐르게 된다.

-하단의 다양한 effect를 통해, 다양한 느낌의 사운드를 연출할 수 있다.

-When you click in canvas, you can see circle clouds on color setting and listen to sound specialized for color.

-There are variety of effects below this canvas. And, you can direct your feeling of sound.




-실시간으로 해당 서비스에 접속하는 유저들이 같은 방에 조인하게 되어, 다양한 사운드를 통해 서로 교감하게 된다.

-같은 방엔 최대 4명이 들어갈 수 있다.

-After users connecting to this service join in same room in realtime, they'll be able to interact with each other for varied sound.

-The maximum each room to be entered is 4.



[특징]

다양한 음색의 사운드를 생성할 수 있다.—
—-다양한 느낌의 색깔을 지닌 원구름을 생성할 수 있다.—
—-실시간으로 다른 이용자와 사운드를 통해 교감할 수 있다.



BPHarmony는 이벤트 기반 비동기 방식의 Node.js 와 함께 실시간 소켓 통신이 가능한 socket.io를 이용하여 만든 웹 오디오 어플리케이션 입니다.


실시간 통신 퍼포먼스에 최적화 된 만큼, 이를 여러 방면의 신기술과 결합하여 재미있는 결과물들을 많이 만들 수 있는데, 저는 특히 현재, HTML5 Web Audio API를 활용한 웹 오디오 어플리케이션에 많은 관심을 가지고 있습니다.


현재, webkit 을 기반으로 개발되어진 Audio API는 Chrome Browser 에서 제대로 작동되는 경우가 많습니다. 

최근에 구글이 만든 웹 음악어플리케이션을 보면, 

http://www.jamwithchrome.com/



source: google jamwithchrome


이는 지금까지 나온 웹 오디오 어플리케이션의 기술이 총집합 된 결과라고 볼 수 있으며, 앞으로의 웹 오디오 기술의 미래를 가늠할 수 있는 척도로도 활용할 수 있겠어요.


저도 이런 Web Audio API를 활용한 어플리케이션을 제작하고 있었지만, 이번에는 크롬뿐만 아니라 여러 브라우저에서도 충분히 돌아갈 수 있는 오디오 어플리케이션을 생각하게 되었습니다. 


https://github.com/egonelbre/jsfx

이 라이브러리는 wave file을 생성하는 단에서 여러 audio filter들을 적용하게 되어, 이를 HTML5 Audio Element API 에서 실행할 수 있게 합니다. 따라서, HTML5를 지원하는 대부분의 브라우저에서 실행이 가능합니다.

아직 Canvas에 대한 이슈가 있는 IE를 제외한, Audio Element를 지원하는 Firefox, Chrome, Safari, Opera 브라우저에서 실행이 가능합니다.


사용된 주요 기술에 대해 언급하자면,

HTML5 Canvas API로 View를 그리게 되고, 원의 색깔, 위치, 필터 적용 여부에 따라 다양한 오디오가 생성되도록 매칭시켰습니다. 또한, mouse up-down에 따라 현재의 오디오 객체가 Node 서버로 pushing 되고, 다시 이것을 같은 방에 있는 다른 사용자에게 broadcasting 되어 서로 실시간으로 오디오를 통해 소통할 수 있는 것입니다. 이는 socket.io를 활용하여 무척 간단하게 개발할 수 있었습니다.


이 프로젝트에 사용된 기술은 여전히 학습진행형이며, 더욱 훌륭한 어플리케이션을 만들기 위해 노력해야겠지요.

앞으로 여러 아이디어들이 정립이 되면 다양한 실험 및 프로젝트를 공개해보고, 충분히 여러 곳에서 사용할 수 있는 라이브러리로 패키징되면, 오픈소스로 공유 발전할 계획도 지니고 있습니다. 


비슷하거나 같은 아이디어로 함께 하고자 하는 분들은 언제든지 연락주세요 :>



Posted by Elegant Universe

카테고리

전체 (118)
Programming (15)
Digital Nomad (2)
Projects (7)
Sound (14)
Travel (69)
Think (9)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

글 보관함