The Band

Screen Shot 2020-10-19 at 1.59.39 AM.png

This is a class final project for 05-430 Programming User Interface taught by Professor Jason Hong. Try it live here.


The purpose of my website is to make multiple musical instruments (piano, guitar, bass, and drum) interactive and playable on a web page. People would not need to buy expensive instruments or software, or bring their heavy guitar when traveling — instead, they can simply open up this website, play, and create music. When designing this website, I investigated different ways of mapping piano keys, guitar frets, and drums to keyboards or computer-based interactions, and I designed three different ways of interaction. The target audience is people who play an instrument, or who are just curious about how music works.

What it does

  • navigate to different web instruments

    • standard web page

    • click on different instruments on the homepage to go to instrument pages


  • play piano

    • standard web page

    • click on piano keys or use keyboards on the piano page


  • play guitar

    • real guitar line in

    • line in your guitar and play on guitar page

    • effects can be added by adjusting virtual pedals

  • play bass

    • real bass line in

    • line in your bass and play on bass page

    • effects can be added by adjusting virtual pedals

  • build and loop a drum pattern

    • standard web page

    • click on squares in web step sequencer on drum page to create a drum pattern

How I built it

  • tone.js

    • It is designed for creating and modifying web audio. 

    • I used it to generate piano sounds from sinusoid waves. 

    • Sounds of a piano.

  • pedaboard.js

    • It is a library of building guitar pedals.

    • I used it to create the pedals and used its built-in interface.

    • The javascript implementation of pedals and some interface structure of the pedalboard.