Klávesnice, která reaguje
Na virtuální klávesnici můžeš klikat nebo psát fyzickou klávesnicí a sledovat, jak aplikace reaguje na vstup.

Sada aplikací s jednoduchým účelem – přidat vaší klávesnici neobvyklé zvuky a nenápadně tak oplatit spolužákovi či kolegovi s mechanickou klávesnicí jeho nadšení pro archeologii a rytí do hliněných destiček. Aktuální stav je vz 1. tudíž jen webové prostředí, rozšíření a aplikace přijde v následujících měsících
První verze se soustředí na jeden hlavní zážitek: interaktivní klávesnici přímo v prohlížeči. Bez instalace aplikace si můžeš vyzkoušet různé zvuky a přizpůsobit si základní ovládání.
Na virtuální klávesnici můžeš klikat nebo psát fyzickou klávesnicí a sledovat, jak aplikace reaguje na vstup.
Ovládací lišta nabízí výběr zvuku, hlasitost a rozložení klávesnice. Cílem je jednoduché rozhraní, které jde pochopit hned po otevření.
Současná webová verze nabízí několik zvukových charakterů — od známých zvuků klávesnice a psacího stroje až po hravější efekty.
Klasické cvakání pro ty, kterým zvuk mechanických spínačů při psaní chybí.
Výraznější, retro charakter, který obyčejnému textu dodá trochu jinou atmosféru.
Výstřely, kváknutí nebo mňoukání. Protože ne každá klávesnice musí znít stejně.
Verze 1 staví na webovém rozhraní a jeho hlavních interakcích: vykreslení klávesnice, ovládání nastavení a přehrávání vybraných zvuků. Základ je připravený pro postupné rozšiřování funkcí.
Next.js App Router tvoří základ aplikace a TypeScript pomáhá udržet kód přehledný a typově kontrolovaný.
Nejdůležitější částí první verze je propojení vstupu z klávesnice, vybraného zvuku a jednoduchého ovládání přímo v rozhraní.
Současný rozsah je záměrně soustředěný na webovou aplikaci. Rozšíření do prohlížeče a desktopová varianta jsou nápady pro další vývoj, ne funkce této verze.
Jádrem webové verze je propojení uživatelského vstupu s vizuální odezvou klávesnice a přehráním zvoleného zvuku. Následující ukázky pocházejí přímo ze zdrojového kódu projektu KeyGun a ukazují dvě části tohoto propojení: zvukový engine a zachycení vstupu.
Aplikace reaguje na psaní nebo interakci s virtuální klávesnicí.
Rozhraní používá aktuální volbu zvuku, hlasitost a rozložení klávesnice.
Výsledkem je zvuková odezva, která dává běžnému psaní další vrstvu interakce.
// Skutečný výřez z KeyGun: veřejná funkce zvukového enginu.
export function playKeySound(
sound: SoundId,
kind: KeyKind,
volume: number,
) {
const g = ensure();
if (!g) return;
const v = Math.min(1, Math.max(0, volume));
g.out.gain.value = v * v * 0.8;
// Jemná náhodná změna výšky tónu ±5 %
const pitch = 1 + (Math.random() - 0.5) * 0.1;
VOICES[sound](g, g.ctx.currentTime, pitch, kind);
}
// Výřez z obsluhy fyzické klávesnice v komponentě Keyboard.
const onKeyDown = (e: KeyboardEvent) => {
if (!e.code || isTypingTarget(e.target)) return;
// Zkratka pro ztlumení se nepřehrává jako běžný stisk
if (e.altKey && e.shiftKey && e.code === "KeyM") return;
if (e.code === "Space" && e.target === document.body) {
e.preventDefault();
}
// Při podržení klávesy zvuk neopakujeme
press(e.code, !e.repeat);
};
e.repeat brání opakovanému spouštění zvuku při podržení klávesy. Mezerník zároveň neposouvá stránku.První verze se zaměřuje na to, aby šel zvukový zážitek rychle přizpůsobit přímo na stránce.
Základní ovládání umožňuje přizpůsobit hlasitost a zvolit, jakým zvukem má klávesnice reagovat.
Volba rozložení pomáhá přizpůsobit zobrazenou klávesnici tak, aby odpovídala potřebám uživatele.
Aktuální verze ověřuje hlavní nápad v jednoduchém prostředí dostupném z prohlížeče. Další platformy a rozšířené možnosti jsou plánované až pro navazující iterace.
Další kroky jsou zatím plánem, ne hotovými funkcemi. Směr vývoje vychází z jednoduchého cíle: dostat zvukovou odezvu z jedné webové stránky i do dalších situací.
Plánovaná možnost používat zvuky při psaní i na dalších webových stránkách, s vlastním ovládáním a nastavením aktivních webů.
Do budoucna je v plánu samostatná desktopová varianta, která by projekt přenesla mimo samotný webový prohlížeč.
Prostor zůstává i pro další zvuky, pohodlnější ovládání a postupné vylepšování rozhraní podle toho, co bude dávat největší smysl.
Roadmapa popisuje zamýšlený směr. Nejde o příslib konkrétního termínu ani o funkce dostupné v aktuální webové verzi.
Technologický základ první verze je zvolený tak, aby šlo webovou aplikaci postupně rozvíjet a případně na ni navázat dalšími formami použití.
Webová aplikace je výchozím bodem projektu. Vyzkoušej aktuální podobu a sleduj, jak se může postupně rozšiřovat.
Otevřít Keyboard Sounds ↗