How to Play Piano With Your Computer Keyboard

Getting Started: Start Piano

Modern browser privacy rules require an explicit user gesture before playing web audio. When you visit the home page, click the ▶ start piano button. This initializes the Web Audio context, triggers Core sample loading, and arms the input listeners.

Computer Keyboard Controls

Ensure the browser window is active. Notes correspond to your typing keyboard keys.

• Play Notes: Press the mapped keys (QWERTY, UIOP, number, and letter rows).
• Sustain Pedal: Hold down the Spacebar to sustain notes, and release to damp them.
• Transpose Mapped Region: Press the Left Arrow (←) and Right Arrow (→) keys to shift the mapped octave range down/up.
• Zoom Visible Keyboard: Press the Up Arrow (↑) and Down Arrow (↓) keys to display more or fewer visible octaves.

Mapping Modes & Custom Mapping

Toggle between presets by opening the Settings panel:

• Default Profile: Maps 3 octaves (C4-C6), using standard keys for flats/sharps.
• Max Profile: Maps 5 octaves (C2-C7), requiring you to hold Shift to play black accidental keys.
• Custom Editor: Let's you assign specific key codes to piano keys manually. Re-binds are saved to your browser cache.

Sustain & Transposition

Sustain acts as the mechanical damper pedal. When sustain is engaged (via Spacebar, the visual sustain button on-screen, or a MIDI sustain pedal CC64), notes will continue to ring out after you release the piano keys. Releasing sustain dampens all active, un-held voices.

Transpose: Shifts the internal tuning of the piano by semitone increments. Adjust this in the Audio Settings drawer to match the key of a song without changing your finger patterns.

Metronome & Tempo Sync

The metronome offers a high-precision lookahead click track:

• Click the quarter-note ♩ pill widget in the toolbar to expand metronome settings.
• Select time signatures (2/4, 3/4, 4/4, 6/8) and set your volume level.
• Use the stepper buttons, type a numeric value, or click “tap” to calculate tempo dynamically.
• Toggle “record clicks” if you want metronome clicks to be included in your audio recordings.

Recording Audio Clips

To record, click the circle Record button in the toolbar. Play your performance, then click the button again to stop. Your browser will compile the stream and trigger a download prompt for the recorded file (saved in high-quality .webm format). Record paths tap directly from the synthesizer, ensuring clean audio without capturing environmental microphone noise.

MIDI Controllers, Mouse & Touch Inputs

Octype is built with versatile input routing:

• MIDI Input: Connect hardware controllers for full velocity mapping and sustain pedal capture. Read our MIDI guide for browser compatibility and configurations.
• Mouse: Click individual on-screen keys. Clicking the bottom edge produces a loud velocity strike; clicking the top of the key generates a soft, quiet strike.
• Touch & Glissando: Tap keys on touchscreen smartphones and tablets. Drag your finger across keys to play a slide (glissando). Touch interactions automatically disable browser gestures like scrolling and zooming, enabling comfortable play.