Online Virtual MIDI Keyboard & Piano Synthesizer

Overview

A high-performance, browser-based musical instrument that allows users to play a piano interface using their computer keyboard or touchscreen. Built using the Web Audio API, this tool provides low-latency sound synthesis directly in the browser.

Core Features

• Responsive Piano Interface: A full-octave visual keyboard that highlights keys when played.
• QWERTY Key Mapping: Map computer keyboard keys (A, S, D, F, etc.) to specific musical notes.
• Web Audio Synthesis: Use the Web Audio API to generate waveforms (Sine, Square, Sawtooth, Triangle) for distinct sound profiles.
• Octave Control: Buttons to shift the octave up or down, allowing for a broader range of musical expression.
• Sustain & Volume Controls: On-screen controls to adjust volume and toggle sustain for lingering notes.
• Visual Feedback: CSS-animated key presses providing immediate interaction satisfaction.

Technical Constraints & Directives

• Single File: All HTML, CSS (Tailwind CDN), and JS must be contained within one file.
• No Storage: Due to sandboxed iframe limitations, do not use localStorage, sessionStorage, or cookies. Keep all state (current octave, sound settings) in memory.
• Light Mode Only: Enforce a professional, clean light-mode aesthetic. Do not include dark mode toggles.
• No Popups: Do not use alert(), prompt(), or confirm(). Use custom DOM-based modal elements if feedback is required.
• External Links: All links must use target="_blank" rel="noopener noreferrer".

UI/UX Specification

• Layout:
  • Header: Simple, descriptive title and small settings panel (Volume, Waveform selector, Octave display).
  • Main: Large, centered piano keyboard area with responsive keys.
  • Instructions Section: Below the keyboard, display the key-mapping guide.
• Color Palette (Light Mode):
  • Primary Background: #F8FAFC (Slate 50)
  • Piano White Keys: #FFFFFF (White) with #E2E8F0 borders.
  • Piano Black Keys: #1E293B (Slate 800).
  • Active/Highlight Color: #3B82F6 (Blue 500) for visual feedback on active notes.
  • Text Color: #0F172A (Slate 900).
• Animations:
  • Key Press: Use CSS transform: translateY(2px) and box-shadow changes to mimic a physical mechanical key depression.
  • Transitions: Use transition: all 0.1s ease-out; for all interactable elements to ensure responsiveness.

Development Guidelines

1. Audio Context: Ensure the AudioContext is only initialized on user interaction (e.g., first click/key press) to adhere to browser autoplay policies.
2. Responsive Handling: Use grid-template-columns for the keyboard to ensure it wraps correctly on mobile devices without overflowing.
3. Performance: Utilize requestAnimationFrame for any visual animations to keep the UI smooth.