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

HTML5 Web Audio API

2012. 9. 26. 22:12


출처: google - moog doodle


수년전 부터 W3C에서 정립하여 여러 웹,모바일 브라우저에서 그 스펙을 적용하고 있는 HTML5. 

새로운 기술들이 탑재되고, 생각보다 빠르게 여러 브라우저(IE를 제외한)에서도 그 기술이 지원되는 것을 보면, 앞으로의 웹과 모바일의 미래가 무척 기대됩니다.


최신 HTML5 기술의 변천과 튜토리얼을 보시려면, (http://www.html5rocks.com/) 이 사이트가 킹왕짱입니다.


저는 특히, web audio API 에 관심이 많은데, 지금으로부터 약 3여년 전쯤에 andre-michelle(http://andre-michelle.com/)이 Flash 를 이용한 재미난 음악 장난감을 만든 것들을 보고서 무척 감명을 받았는데요. 이런 플래시 음악 어플리케이션을 만들기 위해, 여러 관련 프로그램 구조를 파기도 하고, 소셜 게임을 위한 프로토타입도 만들었지요. 또, flash audio API 에 대한 지원을 제대로 해달라는 캠페인인 Adobe making noise 에도 큰 동감을 하고, 유저들이 협업하여 하나의 음악을 만드는 웹2.0 서비스에 대한 비즈니스모델도 생각을 해봤지만, 전반적인 내공의 한계에 부딪혀 진척이 무척 느려왔었습니다.


불행인지 다행인지, 외국의 그러한 기술로 만들어진 웹서비스는 거의 다 망해서 지금은 흔적조차 찾을 수 없는 서비스가 되었고, 설상가상, 잡스가 아이폰에 플래시를 지원하지 않는다는 공고를 내리면서부터, 플래시에 대한 수요는 급속도로 줄어들었고, 그러한 RIA(Rich Internet Application)는 플래시에서 HTML5로 빠르게 전이되었습니다. 앞으로의 웹의 미래는 HTML5 가 좌우할 거라는 의견이 대세이며, 각 브라우저의 적극적인 동참(특히, 구글 크롬의 주도가 인상적임. http://www.chromeexperiments.com/ )이 이 대세론에 무게를 더하고 있는데요. 요즘 느끼는 Web Audio API 의 기술 적용 속도는 무심코 넘겨볼 수 없을 것 같습니다. 


약 7달 쯤에 Web Audio API Spec ( https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html ) 에 있는 왠만한 오디오 어플리케이션을 개발할 수 있는 다양한 API를 보면서 감탄을 하였는데, 그 때 제대로 돌아가는 브라우저가 크롬 하나뿐이었다면, 지금은 크롬 외에 firefox, opera, safari 등에서도 부분적으로 적용이 시작되고 있는 부분은 무척 호의적입니다.


이와 관련된 기술의 최신 뉴스는 여기있습니다.

http://www.html5audio.org/


이 곳 정보들을 보면 다양하고 새로운 웹 오디오 기술이 빠르게 등장하고 적용되고 있는 모습을 볼 수 있습니다. 

요즘 눈길을 끄는 소식들은 크롬에서 모바일이나 데스크탑에서 마이크 인풋을 받을 수 있다는 것과 얼마전에 web MIDI API를 W3C에서 정의하기 시작했다는(http://dvcs.w3.org/hg/audio/raw-file/tip/midi/specification.html) 것입니다.


어쩌면 멀지 않은 미래에는 웹을 통해서, 음악가들이 실시간으로 연주를 협업하고 공유하는 세상이 찾아올 것입니다. 이는 음악 시장과 문화의 급격한 변화를 초래하는 것은 당면한 사실이겠지요. 앞으로의 행보를 주시해야 하고 기대되는 이유도 여기에 있다고 해도 과언이 아닙니다.


사실, 실시간으로 참여하여, 연주를 협업할 수 있는 음악 웹서비스가 현재 존재합니다.

http://labs.dinahmoe.com/plink/

http://www.technitone.com/

요즘 웹기술의 핫이슈인 nodeJS라는 비동기 이벤트 드리븐 기술을 이용하여, 실시간으로 유저가 발생한 음이 같은 방에 있는 유저 모두에게 들리며 하나의 음악을 합주할 수 있는 어플리케이션으로써, 현재의 최신 웹기술을 모두 활용한 사례라고 볼 수 있습니다. 아직은 크롬을 제외한 브라우저에서 완벽히 지원하지 않지만, 이도 단순히 시간문제이구요. 저도 이에 영감을 받아 다음 달 정도에 음악 웹앱을 퍼블리싱할 계획에 있습니다. 

어떻게 만들어졌는지 궁금한 분들은

http://www.html5rocks.com/en/tutorials/casestudies/technitone/

이를 통해 확인할 수 있습니다.


그밖에 Web Audio API에 대한 기본적인 설명과 예제들은 이렇습니다.

http://www.html5rocks.com/en/tutorials/webaudio/intro/

http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html

http://webaudiodemos.appspot.com/



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

글 보관함