REMOTE PLAYING-1

우선 (CSS 대충디자인 하고 기능위주로)클라이언트-웹서버 구조만 구현해보았다.

웹앱인데, 사이트에 접속하고 악기버튼을 누르면 서버가 접속해있는 다른 모든 클라이언트들에게도 전송을 해주어서 한 클라이언트가 누른 음이 같이 울린다.(임시로 드럼음으로 넣었다.) 즉, 여러명이서 서로 떨어져있어도 같이 연주할 수 있다. 아직 프로토타입이라서 많이 고쳐야한다.

– node.js- express라이브러리, socket.io 라이브러리를 이용하였다.

콘솔-사이트에 접속한 클라이언트 중 한명이 버튼을 누르면 서버가 모두에게 값을 전달한다.
접속한 클라이언트와 누른 버튼을 출력한 화면

– 동영상에서 볼 수 있듯이, 서버가 동시에 모두 값을 전달해주지만 기기의 반응속도가 다르다. 노트북이 제일 빠르다. 이에 대해 보완해야 한다.

-여러 기기의 화면에 맞게 나타나도록 viewport를 html에 넣었지만 작은 폰에서 보면 한눈에 들어오지 않아 불편하다.

– 이제 오디오나 이미지파일을 데이터베이스로 관리해야한다.

-외부에서도 접속가능하게만들게 해야한다.(포트포워딩)/조사해본바에 따르면 주소창에 기본게이트웨이를 치면 공유기설정사이트가 나와야하는데 여기기숙사에선 보안문제인지 사이트자체가 뜨지 않는다. 더 알아봐야겠다.

-웹사이트 디자인에 대한 계획을 세워야하고 피아노음으로 바꿔야한다

Remote multi-player service 구현계획

웹브라우저나 모바일브라우저를 통해 접속하여 원하는 소리버튼(건반모양? 아님 드럼모양?미정)을 누르면 서버에 보내게 되고 이 서버는 모든 클라이언트들에게 값을 전달하여 접속하고 있는 사람들이 서로 얼굴도 모르지만 같이 연주하게 됩니다. 이 서버는 이에 대한 값들은 78계단쪽 서버에게도 값을 보내고, 계단에서 그 연주곡이 연주되게 하는 것까지가 최종단계입니다. 78쪽 서버와의 통신 전까지에 대한 전체적인 구현계획=>

리듬

https://touchpianist.com/

이건 키보드를 마음대로 아무키나 누르면 누른 리듬대로 클래식음악이 재생되는 웹입니다. 여기서 인풋을 계단 올라가는 모션으로 해서 만들면 좋을 것 같습니다!

http://qiao.github.io/euphony/#17

이건 웹기반 midi player/visulization입니다. 리듬게임에 활용할 수 있을 것같습니다.

https://www.smashingmagazine.com/2018/03/web-midi-api/ => 자바스크립트 midi api 관련 글 (여러 악기 소리로 음악을 만들 수 있는 등 다양한 응용을 다룬 글)

추가적인 interactive performance 구현에 대해