// meditype — typing sound engine (sample-based playback) // softkeys, thocky (sample-bank, 10 keystrokes from a real mech kbd), pen + // synthesized wood block + silent. const THOCKY_BANK = [ 'assets/thocky-01.wav', 'assets/thocky-02.wav', 'assets/thocky-03.wav', 'assets/thocky-04.wav', 'assets/thocky-05.wav', 'assets/thocky-06.wav', 'assets/thocky-07.wav', 'assets/thocky-08.wav', 'assets/thocky-09.wav', 'assets/thocky-10.wav', ]; class TypingSound { constructor() { this.ctx = null; this.master = null; this.volume = 0.4; this.preset = 'softkeys'; this.onMistake = true; this.buffers = {}; this._loading = {}; this._lastThockyIdx = -1; // avoid same sample twice in a row } _ensure() { if (this.ctx) return; const AC = window.AudioContext || window.webkitAudioContext; this.ctx = new AC(); this.master = this.ctx.createGain(); this.master.gain.value = this.volume; this.master.connect(this.ctx.destination); } async _load(id, url) { if (this.buffers[id]) return this.buffers[id]; if (this._loading[id]) return this._loading[id]; this._loading[id] = (async () => { const res = await fetch(url); const arr = await res.arrayBuffer(); const buf = await this.ctx.decodeAudioData(arr); this.buffers[id] = buf; return buf; })(); return this._loading[id]; } setPreset(p) { this.preset = p; this._ensure(); if (p === 'softkeys') this._load('softkeys', 'assets/typing-soft.wav'); if (p === 'pen') this._load('pen', 'assets/typing-pen.wav'); if (p === 'thocky') { // preload bank THOCKY_BANK.forEach((url, i) => this._load(`thocky-${i}`, url)); } } setVolume(v) { this.volume = Math.max(0, Math.min(1, v)); if (this.master) this.master.gain.value = this.volume; } setMistake(on) { this.onMistake = !!on; } // Smooth fade for the typing-sound master gain. After the fade, restore // the gain to user volume so future sessions aren't silent. fadeOut(ms = 1000) { if (!this.ctx || !this.master) return; const fade = Math.max(60, ms) / 1000; const g = this.master.gain; const restoreTo = this.volume; g.cancelScheduledValues(this.ctx.currentTime); g.setValueAtTime(g.value, this.ctx.currentTime); g.linearRampToValueAtTime(0.0001, this.ctx.currentTime + fade); setTimeout(() => { try { g.setValueAtTime(restoreTo, this.ctx.currentTime); } catch {} }, fade * 1000 + 80); } _playSample(id, opts = {}) { const buf = this.buffers[id]; if (!buf) return; const ctx = this.ctx; const src = ctx.createBufferSource(); src.buffer = buf; src.playbackRate.value = opts.rate ?? (0.94 + Math.random() * 0.12); const g = ctx.createGain(); g.gain.value = opts.gain ?? 1; src.connect(g); g.connect(this.master); src.start(); } _playThocky() { // pick a random sample, but not the same one twice in a row let idx = Math.floor(Math.random() * THOCKY_BANK.length); if (idx === this._lastThockyIdx) idx = (idx + 1) % THOCKY_BANK.length; this._lastThockyIdx = idx; const id = `thocky-${idx}`; // No pitch jitter — rate stays at 1.0 so every sample sounds as recorded. // Only tiny gain variation (±8%) keeps consecutive keys from being robotically identical. const opts = { rate: 1.0, gain: 0.92 + Math.random() * 0.16 }; if (this.buffers[id]) { this._playSample(id, opts); } else { this._load(id, THOCKY_BANK[idx]).then(() => this._playSample(id, opts)); } } click(isMistake = false) { if (this.preset === 'silent') return; if (isMistake && !this.onMistake) return; this._ensure(); if (this.ctx.state === 'suspended') this.ctx.resume(); if (this.preset === 'thocky') { this._playThocky(); return; } if (this.preset === 'softkeys' || this.preset === 'pen') { if (this.buffers[this.preset]) { this._playSample(this.preset); } else { const urls = { softkeys: 'assets/typing-soft.wav', pen: 'assets/typing-pen.wav', }; this._load(this.preset, urls[this.preset]).then(() => this._playSample(this.preset)); } return; } // woodblock — synthesized (no sample provided) if (this.preset === 'woodblock') { const ctx = this.ctx; const t = ctx.currentTime; const g = ctx.createGain(); g.connect(this.master); const osc = ctx.createOscillator(); osc.type = 'sine'; const jitter = (a, b) => a + Math.random() * (b - a); osc.frequency.setValueAtTime(jitter(200, 260), t); osc.frequency.exponentialRampToValueAtTime(jitter(140, 180), t + 0.04); g.gain.setValueAtTime(0.6, t); g.gain.exponentialRampToValueAtTime(0.001, t + 0.09); osc.connect(g); osc.start(t); osc.stop(t + 0.1); } } preview(preset) { const prev = this.preset; this.setPreset(preset); const schedule = [0, 90, 180, 320, 410, 500, 650]; schedule.forEach((ms, i) => setTimeout(() => this.click(i === 2), ms)); setTimeout(() => { this.preset = prev; }, 800); } } window.typingSound = window.typingSound || new TypingSound(); // ------------------------------------------------------------ // Icons for typing-sound options (hairline, restrained) const IKey = (p) => } />; // Thocky switch — a square keycap viewed from a slight angle, with the cross-stem visible. const IThocky = (p) => } />; const IPen = (p) => } />; const IWood = (p) => } />; const ISilent = (p) => } />; const ITyping = (p) => } />; const TYPING_PRESETS = [ { id: 'softkeys', name: 'Soft Keys', desc: 'Modern, quiet', Icon: IKey }, { id: 'thocky', name: 'Thocky Switches', desc: 'Deep, satisfying', Icon: IThocky }, { id: 'pen', name: 'Fountain Pen', desc: 'The signature', Icon: IPen }, { id: 'woodblock', name: 'Wood Block', desc: 'Zen mode', Icon: IWood }, { id: 'silent', name: 'Silent', desc: 'Just the ambient', Icon: ISilent }, ]; // ------------------------------------------------------------ // TYPING SOUND POPOVER function TypingSoundPopover({ preset, volume, onMistake, showRainHint, onPreset, onVolume, onMistakeToggle, onDismissHint, tone, bgId }) { const isDark = ['wood','sky','ink'].includes(bgId) || tone !== 'ink'; const COLORS = { paper:{bg:'#EAE2D0',border:'#D5CBB8',text:'var(--ink)',soft:'var(--ink-soft)',rule:'var(--hairline)'}, linen:{bg:'#E2DAC7',border:'#CBBFA8',text:'var(--ink)',soft:'var(--ink-soft)',rule:'var(--hairline)'}, mist:{bg:'#D8D9D1',border:'#C2C4BA',text:'var(--ink)',soft:'var(--ink-soft)',rule:'#B5B9AF'}, wood:{bg:'#38291A',border:'#513C24',text:'var(--paper-warm)',soft:'var(--paper-dim)',rule:'var(--hairline-d)'}, sky:{bg:'#30354A',border:'#3E4560',text:'#DDE0EC',soft:'#9AA0BC',rule:'#44506A'}, ink:{bg:'#221810',border:'#362515',text:'var(--paper-warm)',soft:'var(--paper-dim)',rule:'var(--hairline-d)'} }; const c = COLORS[bgId] || (isDark ? COLORS.wood : COLORS.paper); const ink = c.text; const soft = c.soft; const faint = c.soft; const rule = c.rule; const accent = isDark ? 'var(--ember)' : 'var(--accent)'; const isSilent = preset === 'silent'; const dimStyle = isSilent ? { opacity: 0.5, pointerEvents: 'none' } : {}; return ( p.id === preset)?.name.toLowerCase()} tone={tone} bgId={bgId} />
{TYPING_PRESETS.map(p => { const active = preset === p.id; const IconC = p.Icon; return ( ); })}
Volume {Math.round(volume * 100)}
onVolume(parseInt(e.target.value, 10) / 100)} style={{ width: '100%', accentColor: isDark ? '#D9AE76' : '#B5705A' }} /> {showRainHint && (
Tip — with rain playing, you may prefer Silent.
)}
Play sound on mistakes
 ); } function MinimalSwitch({ on, onToggle, tone }) { const isDark = tone !== 'ink'; const rule = isDark ? 'var(--hairline-d)' : 'var(--hairline)'; const accent = isDark ? 'var(--ember)' : 'var(--accent)'; return ( ); } Object.assign(window, { TypingSoundPopover, TYPING_PRESETS, ITyping });