Virtual Ukulele Player

This is project is a website that hosts a virtual ukulele, creating an interactive browser-based musical instrument. With a visual representation of a 19-fret ukulele, computer keyboard input and mouse interaction map to musical note playback. The sounds of the virtual instrument are samples I recorded in Ableton Live plucking my ukulele in low-g tuning. 

My framing of the digital ukulele or the digital piano is one as an adaptive instrument, designed for accessibility. After interviewing many people in the disability community, I have found that there is a persistent issue where music performance is physically inaccessible. Particularly for those with progressive conditions or acquired disabilities, many have limitations in playing instruments that they once were professional performers in. Problems such as becoming paralyzed and unable to press a piano foot pedal, dealing with chronic fatigue and being unable to sit upright with a guitar for extended periods of time, developing tendonitis and being unable to pluck a ukulele, or having severe neck and shoulder pain and being unable to hold a viola up against the neck are some examples of what leads to inaccessibility. This specific topic of losing the ability to play an instrument is also related to aging and repetitive strain injuries. This was recently portrayed in the movie Wake Up Dead Man (2025). Thus, the idea of the virtual instrument is one where someone can still use all the knowledge of their instrument to make music, without being physically challenged by it. With my own lived experience of disability, I chose to focus on my own instrument, the ukulele. 

The application generates a dynamic fretboard interface using JavaScript, where each row corresponds to a string and each column represents a fret. The visible portion of the fretboard is controlled by a sliding “window,” allowing users to navigate across different note ranges. The user uses their keyboard- where the four rows of the keyboard are mapped to the four strings of the ukulele- to play the notes selected in the scrolling window. Much like a real ukulele, open strings are always available to play no matter where the window is set.

The Web Audio API is used to handle audio playback with the samples. The system includes logic to ensure realistic instrument behavior, such as preventing multiple notes from overlapping on the same string and cutting off previously played notes when a new one is triggered on that string. Visual feedback is provided through hover states, active fret highlighting, and string vibration effects when notes are played. Additional features include optional note labels, fret markers, and a live updating ukulele chord chart diagram.

Overall, the project combines DOM manipulation, event handling, audio processing, and CSS styling to simulate key aspects of a real ukulele in an interactive web environment. The code is hosted on GitHub, found here.