Computer Piano

This is a web art piece I made for my final web design project. My concept was a "computer piano," or a website that allows the user to play different notes when different computer keys are pressed. Designed and programmed from scratch by me. Utilizes HTML, CSS, and Javascript and is hosted on my personal server. A lot of my art explores the idea of combining traditional art and technology, and as a music minor I love looking at ways that technology and music can work together. This web piece asks the viewer to consider the link between programming, technology, and music.

The home page of the project

The second page that the user is taken to after clicking the description box. The "press any letter" text is on a timer that fades out after 3 seconds. The buttons on the bottom are contained within a css flex-box.

This project uses p5.js and p5.sound.js. Using Javascript, individual note MP3 files are fixed to different keyboard letters. When a letter is pressed, its corresponding note plays.

Simultaneously, each note is assigned a color using sketch.js. When a letter on the user's keyboard is pressed, the note plays and the background changes color.

Go to the Project

↑Back to Top