Menu

How keystrum turns a QWERTY keyboard into a 6-chord strum machine
πŸ“°
0

How keystrum turns a QWERTY keyboard into a 6-chord strum machine

DEV CommunityΒ·red blueΒ·about 1 month ago
#7oGZ2YNZ
#webaudio#typescript#opensource#showdev#delay#const
Reading 0:00
15s threshold

The QWERTY keyboard already has the right shape: rows of keys, columns of keys. What if each column became a chord, and each row became a strum lane? That's keystrum β€” a browser-based instrument that maps your keyboard to six chords. No external instrument, no samples, no install. Pure Web Audio. The layout Am C Em G Dm F β”Œβ”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β” E4 β”‚ 1 β”‚ 2 β”‚ 3 β”‚ 4 β”‚ 5 β”‚ 6 β”‚ ← highest pitch β”œβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€ B3 β”‚ Q β”‚ W β”‚ E β”‚ R β”‚ T β”‚ Y β”‚ β”œβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€ G3 β”‚ A β”‚ S β”‚ D β”‚ F β”‚ G β”‚ H β”‚ β”œβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€ D3 β”‚ Z β”‚ X β”‚ C β”‚ V β”‚ B β”‚ N β”‚ ← lowest pitch β””β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”˜ Enter fullscreen mode Exit fullscreen mode Each column is one chord. Sweeping a column top-to-bottom β€” say 2 W S X for C β€” fires four notes in fast succession. That's a strum. Strum detection The trick is detecting intent . A user pressing 2 W S X simultaneously is one event; pressing them spread across 200ms is another.…

Continue reading β€” create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More