#yee #piano #music

Yee Piano 🎹

A single-file playable piano in the same picture-book style as Jumping Yee, Watermelon Game, and Snake (warm brown outlines, pastel fills, rounded panels, Fredoka + Jua type). A big round Yee — the singing green-dinosaur meme — sits in the middle, and a keyboard runs along the bottom. Tap a key and Yee sings that note: the face replays and a pitch-shifted "Yee" sounds at the key's pitch.

It reuses the embedded WebM clip from Jumping Yee — the same base64 data:video/webm (VP9 video + Opus audio) — for both the animated face and the instrument's voice.

How to Play

1. Tap any key — Yee's face replays and sings that note.
2. White and black keys span one octave (C → C). Each key is "Yee" pitched to that note.
3. ◀ / ▶ shift the whole keyboard down/up an octave (Oct 2–6).
4. Drag across the keys for a glissando; press several keys for chords (polyphonic).
5. On a computer, play with A W S E D F T G Y H U J K and shift octaves with ← / →.

How the sound works

• The clip's Opus audio is decoded once into a Web Audio buffer (~0.42 s, stereo, 48 kHz).
• Every key press spawns a fresh AudioBufferSourceNode whose playbackRate transposes the sample: rate = 2^((midi − E4)/12), so E4 plays at the clip's natural pitch and other keys bend up or down. Higher notes are shorter and chirpier; lower notes are longer and deeper — classic sample-piano behavior.
• Because each note is its own voice, the piano is polyphonic — chords and overlapping notes ring together.
• A short attack ramp keeps fast retriggers from clicking.

The face

A live WebM clip clipped to a circle, with a brown outline like the bird body in the sibling games:

• The face is muted — all sound comes from the pitched buffer — and replays from the start on every key press.
• The video's own playback rate follows the note's pitch (clamped 0.5–2.2×), so Yee visibly sings faster on high notes, slower on low ones.
• Each press pops the face (a squash-and-stretch bounce) and flashes the note's rainbow color as a glow + tint (hue mapped across the 12 semitones).

Design

• Portrait (9:16) — fits a phone with no scrolling.
• Sky-blue stage panel, dark-brown outlines on every shape, fully rounded corners.
• Yellow + orange pressable octave buttons; flat 🔊 / 🔇 mute and 🏠 home controls.
• 🦖 Yee Piano 🎹 title; Fredoka + Jua fonts.

Tech

• Single HTML file — no build, no external assets (one Google Fonts link).
• The clip is embedded inline as a base64 data:video/webm URI, shared by the <video> face and the audio decode.
• Web Audio API for pitch-shifted, polyphonic playback; the AudioContext is created on the first gesture, with the clip bytes pre-fetched at load to minimize first-note latency.
• DOM keyboard with Pointer Events (touch + mouse, glissando via elementFromPoint) plus a computer-keyboard mapping. No canvas needed.