KeyGun
Software Development

KeyGun

webbrowser exentionappfunny

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

// Jak to funguje

Jednoduchý nápad.
Zvuk přímo na webu.

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í.

KEYBOARD SOUNDS / WEB 01
ESC1234567890⌫
TABQWERTYUIOP
CAPSASDFGHJKL↵
SHIFTZXCVBNM,.SHIFT
CTRL⌘ALTSPACEALT←→
PREVIEW: MECHANICAL
01 / INTERACTION

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.

02 / PERSONALIZATION

Vyber si vlastní zvuk

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í.

// Zvukový výběr

Od mechaniky po mňoukání.

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.

01 / Tactile

Mechanická klávesnice

Klasické cvakání pro ty, kterým zvuk mechanických spínačů při psaní chybí.

02 / Classic

Psací stroj

Výraznější, retro charakter, který obyčejnému textu dodá trochu jinou atmosféru.

03 / Playful

Nečekané efekty

Výstřely, kváknutí nebo mňoukání. Protože ne každá klávesnice musí znít stejně.

// Jak je postavená

Webová aplikace.
Jeden soustředěný zážitek.

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í.

Keyboard UI→ User settings→ Audio playback
CURRENT WEB APP FLOW
Next.js App Router→ Interactive web app
01 / FRAMEWORK

Next.js + TypeScript

Next.js App Router tvoří základ aplikace a TypeScript pomáhá udržet kód přehledný a typově kontrolovaný.

02 / EXPERIENCE

Interakce jako hlavní funkce

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.

// Detail implementace

Vstup. Reakce. Zvuk.

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.

01 / INPUT

Zachycení vstupu

Aplikace reaguje na psaní nebo interakci s virtuální klávesnicí.

02 / STATE

Vybrané nastavení

Rozhraní používá aktuální volbu zvuku, hlasitost a rozložení klávesnice.

03 / AUDIO

Přehrání zvuku

Výsledkem je zvuková odezva, která dává běžnému psaní další vrstvu interakce.

CODE SPOTLIGHT / AUDIO ENGINE apps/web/src/lib/audio.ts
// 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);
}
Co funkce řešíOvěří dostupnost audio enginu, omezí hlasitost na rozsah 0–1 a předá zvolený zvuk správnému generátoru.
Proč je to zajímavéZvuk se skládá za běhu pomocí Web Audio API. Výška tónu se lehce mění, aby opakované stisky nepůsobily úplně stejně.
CODE SPOTLIGHT / KEYBOARD INPUT apps/web/src/components/Keyboard.tsx
// 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);
};
Ošetření vstupuKomponenta ignoruje psaní v textových polích a zachytává fyzický kód klávesy místo samotného napsaného znaku.
Detail interakceKontrola e.repeat brání opakovanému spouštění zvuku při podržení klávesy. Mezerník zároveň neposouvá stránku.
Zdrojové soubory: audio.ts ↗ · Keyboard.tsx ↗
// Ovládání

Malé nastavení. Velký rozdíl.

První verze se zaměřuje na to, aby šel zvukový zážitek rychle přizpůsobit přímo na stránce.

CONTROL / 01

Hlasitost a výběr zvuku

Základní ovládání umožňuje přizpůsobit hlasitost a zvolit, jakým zvukem má klávesnice reagovat.

LAYOUT / 02

Rozložení kláves

Volba rozložení pomáhá přizpůsobit zobrazenou klávesnici tak, aby odpovídala potřebám uživatele.

Web jako první krok

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.

// Co dál

Verze 1 je začátek.

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í.

NEXT / 01

Rozšíření do prohlížeče

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ů.

LATER / 02

Desktopová aplikace

Do budoucna je v plánu samostatná desktopová varianta, která by projekt přenesla mimo samotný webový prohlížeč.

ONGOING / 03

Vyladění základního zážitku

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.

// Pod kapotou

Technologie, každá se svou rolí.

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í.

WEB FRAMEWORKNext.js · App Router
LANGUAGETypeScript
WEB APPProgressive Web App
INTERACTIONKeyboard · Audio
LANGUAGESČeština · English
// Aktuální verze

První verze. Prostor pro další nápady.

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 ↗