How Online Piano Works

This tool combines two browser-native technologies: SVG for crisp, responsive keyboard graphics, and Web Audio for low-latency sound synthesis. SVG makes it easy to draw white and black keys as rectangles, position them precisely, and scale the whole keyboard without blurry images. Web Audio provides an audio graph where you can create oscillators, route them through gain nodes, and schedule volume changes with sample-accurate timing.

When you press a key, the script calculates the target frequency from the note name and octave, creates an oscillator for that note, and applies an ADSR envelope by ramping gain up and down over time. When you release the key, the note fades out smoothly and the oscillator is stopped to avoid leaking resources. The generator outputs a single-file HTML template with these pieces wired together so you can copy it into any project and adapt it easily.

Step-by-Step Overview

• 1) Choose a range: Set the base octave and the number of octaves so the keyboard fits your screen and your use case.
• 2) Pick a waveform: Select sine, triangle, square, or sawtooth to shape the timbre, from soft to bright.
• 3) Dial in ADSR: Attack, decay, sustain, and release determine how each note starts, settles, and fades.
• 4) Preview and play: Use the on-page SVG keyboard with mouse or touch, and optionally use computer-keyboard shortcuts.
• 5) Generate the file: Click Generate to produce a single-file HTML version with your settings embedded.
• 6) Copy or download: Copy the generated code into your project or download it as an HTML file for immediate hosting.

Key Features

Playable SVG Keyboard

The keyboard is drawn as SVG, which means it stays sharp on any device and scales smoothly for responsive layouts. White and black keys are layered so the layout resembles a real piano, and pressed keys can be visually highlighted for clear feedback while playing.

Because keys are SVG elements, you can add labels, change corner radii, adjust spacing, and even animate key presses using CSS classes. This approach also keeps the hit targets consistent across screen densities, which helps on touch devices.

Web Audio Synth Engine

Sound is generated using the Web Audio API, typically by creating an oscillator and gain node for each active note. This approach keeps latency low, supports polyphony, and allows envelope shaping by scheduling gain changes over time.

The exported code uses the audio context clock to schedule gain ramps, which is more stable than relying on UI timers. You can extend the graph with filters, delay, or reverb later, but the baseline engine remains intentionally small and easy to read.

ADSR Envelope Controls

ADSR makes a simple oscillator feel musical. A short attack reduces clicks, decay and sustain shape the body of the note, and release controls the tail when you let go. The exported code schedules envelope transitions using the audio context time for consistent playback.

If you are teaching synthesis, ADSR is one of the most important concepts to demonstrate because it explains why the same pitch can feel percussive, plucky, pad-like, or organ-like. The generator keeps the controls straightforward so you can hear changes immediately.

Range, Octaves, and Note Mapping

You can set a base octave and the number of octaves to render, which is useful for matching the intended interaction. A narrow range is great for mobile-friendly interfaces and mini-games, while a wider range works better for demos and lessons where students need to explore pitch relationships.

The template uses a standard equal-temperament frequency formula, mapping notes to MIDI numbers and deriving frequency from A4 = 440 Hz. This is a widely used approach and makes it easy to integrate with other audio code or MIDI input later.

Single-File Export for Easy Sharing

The generator produces a standalone HTML document that you can paste into a code sandbox, upload to static hosting, or drop into a teaching demo. Because everything is inline, it is easy to share, version, and embed in documentation.

A single file also makes audits and reviews easier. You can see exactly what runs in the browser, which is useful for classrooms, workshops, and teams that prefer simple examples over complex toolchains.

Use Cases

• Music education demos: Explain pitch, octaves, and basic synthesis without installing software.
• UI prototyping: Test how a virtual instrument might look and feel before building a full product.
• Interactive landing pages: Add a playful element to a portfolio or product page with a small, safe script.
• Workshops and tutorials: Teach Web Audio fundamentals (oscillators, gain, scheduling) using a tangible example.
• Hackathon projects: Start with a working keyboard and expand into sequencers, arpeggiators, or effects.
• Accessibility experiments: Prototype alternative input mappings and focus behavior for musical UIs.
• Game jam sound toys: Build simple musical mechanics, like matching melodies, with instant visual feedback.

Whether you are building a serious instrument or a tiny interactive widget, a simple SVG + Web Audio piano is a reliable foundation that stays understandable and easy to customize. You can begin with an oscillator-based synth and then iterate toward richer sounds by adding filtering, subtle detune, or sample playback—without changing the keyboard rendering logic. For teams, it is also a clean “shared reference” implementation that everyone can read, test, and improve.

Optimization Tips

Start Audio on User Gesture

Most browsers require an explicit user interaction before audio can play. The exported code includes a simple “Enable Audio” action, and it can also initialize the audio context the first time a key is pressed to keep the experience smooth. If you embed the piano in a page with other interactive elements, consider placing the enable button near the keyboard so users understand why sound is initially muted.

Balance Polyphony and CPU

Each active note uses an oscillator and gain node, so very high polyphony can increase CPU usage on mobile devices. Keep the octave range focused, set a reasonable polyphony limit, and prefer lighter waveforms when you want maximum performance. If you want to support lots of simultaneous notes, you can also reuse nodes or implement a simple voice-stealing strategy that releases the oldest note when the limit is reached.

Prevent Clicks with Envelope Scheduling

Clicks usually happen when gain changes instantly. Use a small attack and schedule gain ramps with the audio context time. For note-off, ramp down over the release period and stop oscillators after the envelope reaches silence. You will get cleaner results if you cancel previous scheduled values on the gain node before scheduling a new envelope, especially when a user rapidly taps keys.

FAQ