import React, { useState, useEffect, useRef, useCallback } from "react" import { useFireproof } from "use-fireproof" export default function TouchKeyboardSynth() { const { database, useLiveQuery, useDocument } = useFireproof("touch-keyboard-synth") const [isActive, setIsActive] = useState(false) const [volume, setVolume] = useState(0.4) const [selectedBank, setSelectedBank] = useState('modern') const [showSoundBanks, setShowSoundBanks] = useState(false) const [dragOver, setDragOver] = useState(false) const [isRecording, setIsRecording] = useState(false) const [recordedSamples, setRecordedSamples] = useState([]) const audioContextRef = useRef(null) const masterGainRef = useRef(null) const loadedSamplesRef = useRef({}) const fileInputRef = useRef(null) const { docs: sampleLibrary } = useLiveQuery("type", { key: "audio-sample" }) const { doc: synthSettings, merge: updateSettings } = useDocument({ _id: "synth-settings", volume: 0.4, selectedBank: 'modern', customSamples: [] }) // Touch screen keyboard sound definitions const soundBanks = { modern: { name: "Modern Touch", description: "Contemporary touch screen keyboard sounds", color: "#70d6ff", sounds: { tap: { type: "modernTap", freq: 2200, click: { freq: 4500, duration: 0.008 }, tone: { freq: 1100, duration: 0.025 }, envelope: { attack: 0.001, decay: 0.02, sustain: 0.3, release: 0.03 } }, swipe: { type: "swipeSound", sweep: { start: 1500, end: 2500, duration: 0.15 }, filter: { cutoff: 3000, resonance: 2 } }, longPress: { type: "holdTone", freq: 800, duration: 0.3, modulation: { rate: 8, depth: 0.1 } } } }, mechanical: { name: "Mechanical Click", description: "Physical keyboard-inspired digital sounds", color: "#ffd670", sounds: { tap: { type: "mechClick", click: { freq: 3200, duration: 0.012 }, resonance: { freq: 1800, q: 8, duration: 0.04 }, noise: { freq: 8000, duration: 0.006 } }, swipe: { type: "mechSwipe", clicks: 5, spacing: 0.02, freqRange: [2000, 4000] }, longPress: { type: "mechHold", sustained: { freq: 1200, duration: 0.25 } } } }, soft: { name: "Soft Touch", description: "Gentle, muted keyboard sounds", color: "#e9ff70", sounds: { tap: { type: "softTap", primary: { freq: 1000, attack: 0.005, decay: 0.04 }, harmonic: { freq: 1500, amplitude: 0.3 }, filter: { type: "lowpass", cutoff: 2000 } }, swipe: { type: "softSwipe", gentle: { start: 800, end: 1200, duration: 0.2 } }, longPress: { type: "softHold", warm: { freq: 600, duration: 0.4, warmth: 0.8 } } } }, futuristic: { name: "Futuristic UI", description: "Sci-fi interface keyboard sounds", color: "#ff70a6", sounds: { tap: { type: "futureBeep", digital: { freq: 1760, harmonics: [1, 1.68, 2.52] }, phase: { shift: Math.PI/4, modulation: 0.15 } }, swipe: { type: "futureSwipe", quantum: { frequencies: [1000, 1587, 2520], phase: true } }, longPress: { type: "futureHold", complex: { baseFreq: 440, layers: 4 } } } }, custom: { name: "Custom Samples", description: "User-uploaded audio samples", color: "#ff9770", sounds: { tap: { type: "customSample", sampleIndex: 0 }, swipe: { type: "customSample", sampleIndex: 1 }, longPress: { type: "customSample", sampleIndex: 2 } } } } // Initialize audio context const initAudio = useCallback(async () => { try { if (!audioContextRef.current) { audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)() masterGainRef.current = audioContextRef.current.createGain() masterGainRef.current.gain.value = volume masterGainRef.current.connect(audioContextRef.current.destination) } if (audioContextRef.current.state !== 'running') { await audioContextRef.current.resume() } } catch (error) { console.error('Audio initialization error:', error) } }, [volume]) // Modern touch tap sound const createModernTap = useCallback((config) => { if (!audioContextRef.current || !masterGainRef.current) return try { const now = audioContextRef.current.currentTime // High frequency click const clickOsc = audioContextRef.current.createOscillator() const clickGain = audioContextRef.current.createGain() const clickFilter = audioContextRef.current.createBiquadFilter() clickOsc.type = 'square' clickOsc.frequency.value = config.click.freq clickFilter.type = 'bandpass' clickFilter.frequency.value = config.click.freq clickFilter.Q.value = 15 clickGain.gain.setValueAtTime(0, now) clickGain.gain.linearRampToValueAtTime(0.6, now + 0.001) clickGain.gain.exponentialRampToValueAtTime(0.001, now + config.click.duration) clickOsc.connect(clickFilter) clickFilter.connect(clickGain) clickGain.connect(masterGainRef.current) clickOsc.start(now) clickOsc.stop(now + config.click.duration) // Tonal component const toneOsc = audioContextRef.current.createOscillator() const toneGain = audioContextRef.current.createGain() const toneFilter = audioContextRef.current.createBiquadFilter() toneOsc.type = 'sine' toneOsc.frequency.value = config.tone.freq toneFilter.type = 'lowpass' toneFilter.frequency.value = config.tone.freq * 2 toneFilter.Q.value = 1 toneGain.gain.setValueAtTime(0, now) toneGain.gain.linearRampToValueAtTime(0.3, now + config.envelope.attack) toneGain.gain.exponentialRampToValueAtTime(0.3 * config.envelope.sustain, now + config.envelope.attack + config.envelope.decay) toneGain.gain.exponentialRampToValueAtTime(0.001, now + config.envelope.attack + config.envelope.decay + config.envelope.release) toneOsc.connect(toneFilter) toneFilter.connect(toneGain) toneGain.connect(masterGainRef.current) toneOsc.start(now) toneOsc.stop(now + config.tone.duration) // Cleanup setTimeout(() => { try { clickOsc.disconnect() toneOsc.disconnect() clickGain.disconnect() toneGain.disconnect() clickFilter.disconnect() toneFilter.disconnect() } catch (e) {} }, 100) } catch (error) { console.error('Modern tap error:', error) } }, []) // Mechanical click sound const createMechClick = useCallback((config) => { if (!audioContextRef.current || !masterGainRef.current) return try { const now = audioContextRef.current.currentTime // Sharp click const clickOsc = audioContextRef.current.createOscillator() const clickGain = audioContextRef.current.createGain() clickOsc.type = 'square' clickOsc.frequency.value = config.click.freq clickGain.gain.setValueAtTime(0, now) clickGain.gain.linearRampToValueAtTime(0.8, now + 0.001) clickGain.gain.exponentialRampToValueAtTime(0.001, now + config.click.duration) clickOsc.connect(clickGain) clickGain.connect(masterGainRef.current) clickOsc.start(now) clickOsc.stop(now + config.click.duration) // Resonance const resOsc = audioContextRef.current.createOscillator() const resGain = audioContextRef.current.createGain() const resFilter = audioContextRef.current.createBiquadFilter() resOsc.type = 'sine' resOsc.frequency.value = config.resonance.freq resFilter.type = 'bandpass' resFilter.frequency.value = config.resonance.freq resFilter.Q.value = config.resonance.q resGain.gain.setValueAtTime(0, now + 0.002) resGain.gain.linearRampToValueAtTime(0.2, now + 0.005) resGain.gain.exponentialRampToValueAtTime(0.001, now + config.resonance.duration) resOsc.connect(resFilter) resFilter.connect(resGain) resGain.connect(masterGainRef.current) resOsc.start(now + 0.002) resOsc.stop(now + config.resonance.duration) // Cleanup setTimeout(() => { try { clickOsc.disconnect() resOsc.disconnect() clickGain.disconnect() resGain.disconnect() resFilter.disconnect() } catch (e) {} }, 100) } catch (error) { console.error('Mechanical click error:', error) } }, []) // Soft tap sound const createSoftTap = useCallback((config) => { if (!audioContextRef.current || !masterGainRef.current) return try { const now = audioContextRef.current.currentTime // Primary tone const primaryOsc = audioContextRef.current.createOscillator() const primaryGain = audioContextRef.current.createGain() const filter = audioContextRef.current.createBiquadFilter() primaryOsc.type = 'triangle' primaryOsc.frequency.value = config.primary.freq filter.type = config.filter.type filter.frequency.value = config.filter.cutoff filter.Q.value = 1 primaryGain.gain.setValueAtTime(0, now) primaryGain.gain.linearRampToValueAtTime(0.4, now + config.primary.attack) primaryGain.gain.exponentialRampToValueAtTime(0.001, now + config.primary.attack + config.primary.decay) primaryOsc.connect(filter) filter.connect(primaryGain) primaryGain.connect(masterGainRef.current) primaryOsc.start(now) primaryOsc.stop(now + config.primary.attack + config.primary.decay) // Harmonic if (config.harmonic) { const harmOsc = audioContextRef.current.createOscillator() const harmGain = audioContextRef.current.createGain() harmOsc.type = 'sine' harmOsc.frequency.value = config.harmonic.freq harmGain.gain.setValueAtTime(0, now) harmGain.gain.linearRampToValueAtTime(0.4 * config.harmonic.amplitude, now + config.primary.attack * 0.7) harmGain.gain.exponentialRampToValueAtTime(0.001, now + config.primary.attack + config.primary.decay * 0.8) harmOsc.connect(harmGain) harmGain.connect(masterGainRef.current) harmOsc.start(now) harmOsc.stop(now + config.primary.attack + config.primary.decay) } // Cleanup setTimeout(() => { try { primaryOsc.disconnect() primaryGain.disconnect() filter.disconnect() } catch (e) {} }, 100) } catch (error) { console.error('Soft tap error:', error) } }, []) // Play custom sample const playCustomSample = useCallback((sampleIndex) => { if (!audioContextRef.current || !masterGainRef.current) return const samples = Object.values(loadedSamplesRef.current) if (!samples[sampleIndex]) return try { const source = audioContextRef.current.createBufferSource() const gain = audioContextRef.current.createGain() source.buffer = samples[sampleIndex] gain.gain.value = volume source.connect(gain) gain.connect(masterGainRef.current) source.start() // Cleanup after sample duration setTimeout(() => { try { source.disconnect() gain.disconnect() } catch (e) {} }, samples[sampleIndex].duration * 1000 + 100) } catch (error) { console.error('Custom sample playback error:', error) } }, [volume]) // Create sound based on bank configuration const createSound = useCallback((soundType) => { const bank = soundBanks[selectedBank] const sound = bank.sounds[soundType] if (!sound) return switch (sound.type) { case 'modernTap': createModernTap(sound) break case 'mechClick': createMechClick(sound) break case 'softTap': createSoftTap(sound) break case 'customSample': playCustomSample(sound.sampleIndex) break default: // Fallback createModernTap({ freq: 2200, click: { freq: 4500, duration: 0.008 }, tone: { freq: 1100, duration: 0.025 }, envelope: { attack: 0.001, decay: 0.02, sustain: 0.3, release: 0.03 } }) } }, [selectedBank, createModernTap, createMechClick, createSoftTap, playCustomSample]) // Generate and download WAV file const generateWAVFile = useCallback((soundType) => { if (!audioContextRef.current) return const offlineContext = new OfflineAudioContext(2, 44100 * 2, 44100) // 2 seconds at 44.1kHz const offlineGain = offlineContext.createGain() offlineGain.connect(offlineContext.destination) // Create the sound in offline context const bank = soundBanks[selectedBank] const sound = bank.sounds[soundType] if (sound.type === 'modernTap') { // Recreate modern tap in offline context const clickOsc = offlineContext.createOscillator() const clickGain = offlineContext.createGain() const toneOsc = offlineContext.createOscillator() const toneGain = offlineContext.createGain() clickOsc.type = 'square' clickOsc.frequency.value = sound.click.freq toneOsc.type = 'sine' toneOsc.frequency.value = sound.tone.freq clickGain.gain.setValueAtTime(0, 0) clickGain.gain.linearRampToValueAtTime(0.6, 0.001) clickGain.gain.exponentialRampToValueAtTime(0.001, sound.click.duration) toneGain.gain.setValueAtTime(0, 0) toneGain.gain.linearRampToValueAtTime(0.3, sound.envelope.attack) toneGain.gain.exponentialRampToValueAtTime(0.001, sound.tone.duration) clickOsc.connect(clickGain) toneOsc.connect(toneGain) clickGain.connect(offlineGain) toneGain.connect(offlineGain) clickOsc.start(0) toneOsc.start(0) clickOsc.stop(sound.click.duration) toneOsc.stop(sound.tone.duration) } offlineContext.startRendering().then(audioBuffer => { // Convert AudioBuffer to WAV const wavBlob = audioBufferToWav(audioBuffer) const url = URL.createObjectURL(wavBlob) const a = document.createElement('a') a.href = url a.download = `${selectedBank}_${soundType}_${Date.now()}.wav` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) }) }, [selectedBank]) // Convert AudioBuffer to WAV blob const audioBufferToWav = useCallback((buffer) => { const length = buffer.length const arrayBuffer = new ArrayBuffer(44 + length * 2) const view = new DataView(arrayBuffer) const channels = buffer.numberOfChannels const sampleRate = buffer.sampleRate // WAV header const writeString = (offset, string) => { for (let i = 0; i < string.length; i++) { view.setUint8(offset + i, string.charCodeAt(i)) } } writeString(0, 'RIFF') view.setUint32(4, 36 + length * 2, true) writeString(8, 'WAVE') writeString(12, 'fmt ') view.setUint32(16, 16, true) view.setUint16(20, 1, true) view.setUint16(22, channels, true) view.setUint32(24, sampleRate, true) view.setUint32(28, sampleRate * 2, true) view.setUint16(32, 2, true) view.setUint16(34, 16, true) writeString(36, 'data') view.setUint32(40, length * 2, true) // Convert float samples to 16-bit PCM const channelData = buffer.getChannelData(0) let offset = 44 for (let i = 0; i < length; i++) { const sample = Math.max(-1, Math.min(1, channelData[i])) view.setInt16(offset, sample * 0x7FFF, true) offset += 2 } return new Blob([arrayBuffer], { type: 'audio/wav' }) }, []) // Load audio file const loadAudioFile = useCallback(async (file) => { if (!audioContextRef.current) await initAudio() try { const arrayBuffer = await file.arrayBuffer() const audioBuffer = await audioContextRef.current.decodeAudioData(arrayBuffer) const sampleId = `sample_${Date.now()}_${Math.random().toString(36).substr(2, 9)}` loadedSamplesRef.current[sampleId] = audioBuffer // Save to database const sampleDoc = { type: "audio-sample", name: file.name, sampleId: sampleId, size: file.size, duration: audioBuffer.duration, sampleRate: audioBuffer.sampleRate, timestamp: Date.now() } await database.put(sampleDoc) console.log('Audio file loaded:', file.name) } catch (error) { console.error('Error loading audio file:', error) } }, [database, initAudio]) // Handle file drop const handleDrop = useCallback((e) => { e.preventDefault() setDragOver(false) const files = Array.from(e.dataTransfer.files) const audioFiles = files.filter(file => file.type.startsWith('audio/') || file.name.match(/\.(wav|mp3|ogg)$/i) ) audioFiles.forEach(loadAudioFile) }, [loadAudioFile]) // Handle file input const handleFileInput = useCallback((e) => { const files = Array.from(e.target.files) files.forEach(loadAudioFile) }, [loadAudioFile]) // Handle activation const handleActivate = useCallback(async () => { if (!isActive) { await initAudio() setIsActive(true) } else { setIsActive(false) } }, [isActive, initAudio]) // Update master volume useEffect(() => { if (masterGainRef.current) { masterGainRef.current.gain.value = volume } updateSettings({ volume }) }, [volume, updateSettings]) // Update selected bank useEffect(() => { updateSettings({ selectedBank }) }, [selectedBank, updateSettings]) return (

{/* Background pattern */}

{/* Sound Bank Popup */} {showSoundBanks && (

Keyboard Sound Banks

{Object.entries(soundBanks).map(([key, bank]) => (

{setSelectedBank(key); setShowSoundBanks(false)}} className={`border-4 border-[#242424] p-5 cursor-pointer transition-all hover:scale-[1.02] ${ selectedBank === key ? 'shadow-xl' : '' }`} style={{ backgroundColor: selectedBank === key ? bank.color : '#ffffff' }} >

{bank.name}

{bank.description}

{selectedBank === key && (

● Active

)}

))}

)} {/* Main Content */}

Touch Keyboard Synthesizer

{/* Audio Drop Zone */}

{e.preventDefault(); setDragOver(true)}} onDragLeave={() => setDragOver(false)} onDrop={handleDrop} onClick={() => fileInputRef.current?.click()} >

{dragOver ? 'Drop Audio Files Here!' : 'Drag & Drop Audio Files'}

*Support for WAV, MP3, and OGG files. Click here or drag files to upload custom samples.*

Loaded Samples: {Object.keys(loadedSamplesRef.current).length}

{/* Sample Library */} {sampleLibrary.length > 0 && (

Sample Library

{sampleLibrary.slice(-9).map(sample => (

{sample.name}

{sample.duration?.toFixed(2)}s • {Math.round(sample.size/1024)}KB

))}

)} {/* Virtual Keyboard */}

Virtual Touch Keyboard

{['Q','W','E','R','T','Y','U','I','O','P'].map(key => ( ))}

{['A','S','D','F','G','H','J','K','L'].map(key => ( ))}

{/* Controls */}

Sound Controls

Generate WAV Files

Generate and download WAV files of your current sounds

{/* Synth Widget */}

TOUCH SYNTH

POWER

VOLUME setVolume(parseFloat(e.target.value))} className="w-24 h-2 bg-[#ffffff] rounded-lg appearance-none slider" />

BANK {soundBanks[selectedBank].name}

) }