Piano Radio

• 

  The client

Inspiration

The inspiration for this project is Platform 88, which is a place in London where a piano stands out in the open. Anyone can come along and play on this piano. This facilitates live music with a spontaneous and casual aspect.

What it does

Piano Radio allows a group of users or solo users to enter a virtual room and play virtual piano. This project mimics the Platform 88 where users can take turns playing the piano in front of the public. The default room is a permanent public spot where any user can use the piano. Users can also go to private rooms (by appending a room number to the URL) to play for an invited audience.

How we built it

We wrote a client page in HTML, CSS, and JS. We used the Canvas to render the piano keyboard. We then used the web MIDI API to receive MIDI input from the user's MIDI device. Following that, we used the soundfont-player JavaScript library to generate piano sounds. Then, we began working on a node.js server powered by repl.it to broadcast piano notes to other user. We used socket.io to connect the client to the server, exchange note data, and implement private piano rooms.

Challenges we ran into

A huge challenge was getting the sockets to work. With the help of mentor Alex Krantz, we learned about repl.it which allowed us to easily run a server with sockets and without needing our own VPS service. This tremendously helped us overcome the problem of getting the server and sockets set up.

Accomplishments that we're proud of

We deployed a server-client project for the first time. Furthermore, we used Web MIDI API, Web Audio API, and socket.io for the very first time. The rooms is especially a favorite feature which allows for multiple users to play music at the same time without interference from other groups.

What we learned

We learned how to use Node.js, Express, Socket.io, and repl.it in order to deploy a web project. This project also taught us how to collaborate under scrunch time and to manage our time to effectively design, implement and create a project.

What's next for Piano Radio

Our goal moving forward is to make Piano Radio more interactive and for users to maybe have ghost player to have constant music playing. The project will also have a much better UI for users to work with. In the future, we also want to maybe implement a way for users to learn to play the piano via Piano Radio.

Built With

• html5
• javascript
• midi.js
• node.js
• repl.it
• socket.io
• web-audio