Pianogram

Inspiration

We are a group of music enthusiasts and producers who are passionate with the world of music. We love how music can bring people together even through language and distance barriers, and we use it as a medium for us to express ourselves personally and creatively. We have resources and software that allow us to do so, but we know that it is not the case for everyone. Thus, this project was inspired.

What it does

Pianogram is a playable piano keyboard that people can play either by clicking on the keys with their mouse, touching the touch screen, or typing on their computer keyboard. There are 5 sound selections: piano, guitar, flute, synth, and bass. This is a great way for people to start to explore into the world of music.

How we built it

Our project primarily focused on front-end implementation with HTML, CSS, and JavaScript. We used our Digital Audio Workstation software Ableton Live to produce the sound library for Pianogram.

Challenges we ran into

It was not easy to come up with an idea, learn new technology, and implementing a product in such a short amount of time. There are tons more features we wanted to include, but just was not able to due to time constraints.

Accomplishments that we're proud of

Pianogram is a functional, playable, virtual keyboard with 5 sounds through 3 octaves, as well as a volume control for the loudness of the sounds. We're also proud that we created something that can be enjoyed by others.

What we learned

We refined our HTML, CSS, JavaScript knowledge. But more importantly, we learned to communicate with one another, as well as effective collaboration on a project using Git.

What's next for Pianogram

Fine tune the project with new technology that we discovered late like other APIs and Tone.js for a wider selection of sounds and more musical effects. As well as a tutorial for people who are not familiar with the world of music creation so they can learn the basics and be more confident in themselves. We will also aim to make Pianogram more responsive on different devices.

Built With

• ableton
• css
• git
• github
• html
• javascript