Typiano

Typiano turns everyday typing into a live audiovisual performance. Each keystroke maps to a musical note, drives reactive motion across the interface, animates the crowd, and can trigger short ElevenLabs vocal ad-libs for a playful stage-like feel.

It is intentionally lightweight:

• Node.js + Express backend
• Vanilla HTML, CSS, and JavaScript frontend
• No database
• No login flow
• No build pipeline
• Easy local setup and Replit deployment

Highlights

• Real-time key-to-note mapping across C D E F G A B
• Dispatcher-driven frontend modules for sound, visuals, host state, and voice reactions
• AI-generated note pack bootstrapped from ElevenLabs sound generation
• Tuned Web Audio synth fallback when local or AI note samples are unavailable
• Floating note effects, reactive energy meter, animated audience, and live phrase history
• On-demand vocal hype with short ad-lib style reactions such as Mmm mmm and Oooh yeah
• Graceful fallback behavior when ELEVENLABS_API_KEY is not present or the API is unavailable
• Optional Windows-wide keyboard sound companion via AutoHotkey

Experience

The app is designed to feel like a miniature performance surface:

• click anywhere to arm audio
• start typing to generate notes instantly
• layer multiple keys to build overlapping textures
• watch the scene, crowd, and score react in real time
• trigger Hype Me for an ElevenLabs vocal response

Stack

• Node.js 18+
• Express
• Vanilla JavaScript
• Web Audio API
• ElevenLabs Text to Speech
• ElevenLabs Sound Generation

Project Structure

/
  server.js
  package.json
  package-lock.json
  .env.example
  .gitignore
  README.md
  typiano-global.ahk
  /public
    index.html
    styles.css
    script.js
    /audio
      A.mp3
      B.mp3
      C.mp3
      D.mp3
      E.mp3
      F.mp3
      G.mp3
    /assets
      favicon.png

Local Setup

1. Install dependencies.

npm install

2. Create a local .env from the example file.

cp .env.example .env

3. Add your ElevenLabs API key.

ELEVENLABS_API_KEY=your_key_here

4. Start the app.

npm start

5. Open the demo.

http://localhost:3000

Environment Variables

Variable	Required	Description
ELEVENLABS_API_KEY	No	Enables live AI voice reactions and AI-generated note packs.

If the API key is missing, Typiano still runs locally with:

• the visual experience intact
• Web Audio synth playback active
• safe JSON fallback responses from the backend

API

GET /api/health

Returns basic health status.

{ "ok": true }

POST /api/hype

Requests a short ElevenLabs vocal response.

Request body:

{ "text": "Oooh yeah." }

Returns either:

• audio/mpeg when voice generation succeeds
• fallback JSON when voice generation is unavailable

POST /api/music-pack

Builds and caches an ElevenLabs-generated note pack for the current session mood.

Request body:

{ "mood": "Aurora Hall glossy playable synth one-shots for a typing instrument" }

Notes are generated in small batches to stay under lower-tier ElevenLabs concurrency limits.

GET /api/music-note/:note

Serves a generated AI note sample when available.

Example:

/api/music-note/C?packId=music-pack-123

Audio Behavior

Typiano layers multiple sound paths together:

• AI note samples when available
• local sample files from public/audio/
• synthesized Web Audio notes as a guaranteed fallback

The browser-side synth has extended sustain so overlapping keystrokes blend into a more musical texture instead of sounding purely percussive.

Windows Companion

The web app only reacts to typing inside the page. If you want Typiano-like notes for global keyboard input on Windows, use:

• typiano-global.ahk

Requirements:

• AutoHotkey v2

The script preserves normal typing behavior and skips noisy system shortcut chords.

Replit Deployment

Typiano is deployment-friendly:

• no bundler
• no database
• no native modules
• standard Express server

Recommended flow:

1. Create a Node.js Repl.
2. Upload the project files.
3. Add ELEVENLABS_API_KEY as a secret if you want AI voice and note generation.
4. Run npm install.
5. Run npm start.

Notes for Contributors

• Keep secrets in .env, never in source control.
• Keep frontend behavior event-driven through the dispatcher in public/script.js.
• If you expand the ElevenLabs note pack, preserve batch generation to avoid concurrency-limit failures.

License

MIT