🚀 Elon Musk Yes Piano 🎹
By Not Elon Musk
0 subscribers
Based on the following code
Clip Piano 🎞️ 🎹
Coddie
51 views · 1mo ago
🚀 Elon Musk Yes Piano 🎹
A single-file HTML mini-game that turns a short clip of Elon Musk saying "Yes" into a pitch-shifted piano. No build, no dependencies — open elonmusk_yes_piano.html in a browser and it runs. Portrait 9:16 (Shorts/Reels format), optimized for mobile touch.
How to play
- Tap/click the piano keys under the round face, or play with your computer keyboard.
- Each key plays the "Yes" clip pitch-shifted to that note, and the face video replays with a little bounce.
- One video clip drives both the sound and the on-screen face.
Controls
| Input | Action |
|---|---|
| White/black keys (touch·click) | Play that note (drag for glissando) |
Keyboard a w s e d f u j i k o l ; | Maps to C·C#·D·D#·E·F·F#·G·G#·A·A#·B·C |
| ⬅️ / ➡️ (or arrow keys) | Change octave (Oct 2–6) |
Number keys 2–6 | Jump straight to that octave |
| 🎶 / 🎶❌ toggle (right of the octave label) | Allow / disallow multiple keys at once |
How it works
-
One clip, two playback paths
- The clip is embedded at the top of
<head>as a base64 WebM (240×240 VP9, 30fps, ~1.6s + Opus audio). Swap that data to change both the face and the sound. - Sound: Web Audio. Each key spawns its own voice (
AudioBufferSourceNode) and gets its pitch fromplaybackRate = 2^((midi - REF_MIDI)/12). - Video: a single
<video>element, restarted from the top on every key press.
- The clip is embedded at the top of
-
Natural-pitch anchor: G4 (
REF_MIDI = 67)- This is the key that plays the clip unshifted (playback rate 1.0). Anchoring at G4 lets the default octave (C4–C5) straddle the reference — keys below deepen, keys above brighten — keeping the whole range within ~1.33×. (Anchoring at C4 pushed the top keys up to 2×, a harsh "chipmunk" timbre.)
- Use
REF_MIDI = 65(F4) for a more symmetric split, or60(C4) for the original all-sped-up feel.
-
Multi-key (polyphony) toggle — off by default
- Default is disallowed (single-key mode): a ❌ is overlaid on the 🎶 icon, and pressing a new key cuts the previous note with a short fade (monophonic).
- Tap the icon to allow polyphony so notes ring together.
-
Video judder fix: the face video always plays at native 30fps (
playbackRate = 1). Pitching the video to each note produced a fractional effective frame rate that didn't divide the display refresh (60/120Hz), causing a visible freeze on certain notes. Per-note reaction is handled by the CSSpopanimation instead.
Design / implementation notes
- Cute cartoon skin: brown outline (
#3a2412), pastel tones, round face ring. (Same family as the Uploads game design system.) - Responsive: container-query units (
cqw) scale every element to the 9:16 stage. - iOS Safari handling: double-tap zoom suppressed (
touch-action), composited<video>forced into a circle (clip-path+-webkit-mask). - No external dependencies — fully self-contained single file.
Related files
elonmusk_yes_piano.html— the actual app this document describes.
Hashtags
Loading comments...
Other Codes
No other codes yet