Menu

Keyboard Hotkeys for a Browser Soundboard: KeyboardEvent.code, Layout-Proof Labels and Not Hijacking the Search Box
📰

Keyboard Hotkeys for a Browser Soundboard: KeyboardEvent.code, Layout-Proof Labels and Not Hijacking the Search Box

DEV Community: javascript·Abid Ali·1 day ago
#QT1YvexN
#devtojavascript#devto#dev#code#return
Reading 0:00
15s threshold

A soundboard on a phone is a grid of buttons you tap. A soundboard on a laptop, during a stream or a call, is something you want to fire without looking: press Q , hear the buzzer. Streamers usually solve this in OBS with a hotkey per media source, but plenty of people just keep a browser tab open and wish the page itself listened to the keyboard.

Adding that to a web soundboard looks like a five-minute job. A keydown listener, a map from letters to buttons, done. Then someone on a French keyboard reports that the layout is scrambled, someone typing in the search box triggers six sounds, holding a key machine-guns a clip, and a screen reader user loses their own shortcuts.

This post is the hotkey layer I'd write today, in plain JavaScript so it drops into React, Svelte or a static page.…

Continue reading — create a free account

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