To make beautiful music together, collaboratively, on the same instrument.

What it does

A server hosts a web page with a simple piano layout. When the piano is played, it sends requests back to the server, and the server synthesizes the notes to play. This allows multiple people to play the same instrument at the same time. The piano can be played with either the computer keyboard or the mouse, and each person can select a different octave to play on. This allows a layout similar to multiple people playing on different places on the same piano.

How we built it

This was built using a simple Python web server that serves the web page, takes note requests, and talks to the synthesizer to play notes. We decided to use Python because it provides an easy was to make a simple web server, and we were pretty sure we could find a library to play notes. When a key on the web page piano is pressed, the web page sends a request back to the server with the note to start playing. When it is release, a similar request is made to stop the note from playing. The python web server then talks to the Yoshimi synthesizer with the note to start or stop playing. The web page is built with HTML, CSS, and Javascript. It uses AJAX to send real time requests back to the web server when a key is pressed or released.

Challenges we ran into

At first, there was the challenge of synthesizing notes with python. After a bit of searching, we found one that was meant for a Raspberry Pi. However, we were able to get it to work on a laptop instead of a Raspberry Pi. We also ran into issues writting the web page with the piano, as many of us a had little to no experience with building web pages.

Accomplishments that we're proud of

It works and looks nice. We were able to learn enough html, css, and javascript to make this work in under 24 hours.

What we learned

We learned a lot about making web pages and making them talk to a server. Many of our members had little to no experience with html, css, or javascript, but we were able to learn a lot in the time given and make something that works.

What's next for ProfJAM

The interface could be improved to look better. The web server could also be improved to handle a lot of requests at the same time.

The code is avaiavle on Github here:

Note: The demo URL will play sound on one of our laptops. You will need to be on the profhacks wifi.

Share this project: