Casio-Inspired Virtual Piano
A working version of a piano replicating the user’s beloved Casio red keyboard. This project features interactive keys, sustain pedal support, real-time volume control, and keyboard shortcuts for an authentic musical experience.
Project Overview
Created to replicate the experience of playing on a classic Casio red keyboard while exploring the Web Audio API for interactive music applications. The goal was to learn about audio synthesis, event handling, and dynamic UI updates in a single cohesive project.
Implementation
Structured with three main files—index.html, style.css, and script.js—this piano leverages p5.js and the Web Audio API: - **HTML Layout (index.html)**: Defines the piano keys (white and black) with unique IDs for each note (C, C#, D, etc.), plus a volume slider and sustain pedal indicator. - **Styling (style.css)**: Showcases a bold red keyboard background with layered absolute-positioned black keys. The fixed “controls” section includes the volume slider and sustain indicator styling. - **Audio & Logic (script.js)**: 1. **AudioContext Setup**: Creates an AudioContext and a masterGainNode to manage overall volume. 2. **Key Mapping**: Binds each physical keyboard key (Q, W, E, etc.) to the corresponding piano note. Mouse/touch events also trigger notes. 3. **Sustain Pedal**: Uses the Shift key to enable/disable sustain, preventing notes from stopping immediately. 4. **Volume Control**: A range slider updates masterGainNode.gain in real-time. 5. **Black Key Offsets**: Precisely positions black keys using absolute coordinates for accurate layering. 6. **Dynamic Labels**: Automatically appends labels (e.g., “Q”, “W”, “E”) to each key for easy reference.
Challenges
Implementing a realistic piano feel came with unique hurdles: - **Sustain Logic**: Ensuring notes continue ringing when the sustain pedal (Shift key) is active, then properly releasing them afterward. - **Concurrent Notes**: Managing multiple oscillators so pressing several keys simultaneously doesn't conflict or abruptly cut off sounds. - **Accurate Black Key Placement**: Achieving correct alignment on a fluid layout required absolute positioning with custom offsets. - **Visual Feedback**: Changing key colors on press and release needed careful event handling to avoid “stuck” states. - **AudioContext Timing**: Scheduling note stops after a certain duration while also handling pedal logic introduced edge cases in timing.
Outcome
Successfully created a virtual piano that authentically mimics a real Casio keyboard. Users can click or use keyboard shortcuts to play multiple notes, adjust volume on the fly, and even hold notes with the sustain pedal. The final project offers a fun, interactive way to explore the fundamentals of audio synthesis and event-driven JavaScript programming.
Project Gallery
