Getting Started with YakaJS Voice Commands
Voice control is no longer just for mobile assistants. With YakaJS, you can add powerful voice commands to your web applications in minutes—no external APIs or services required.
Why Voice Commands?
Voice interfaces offer unique benefits:
- Accessibility: Help users with mobility or vision impairments
- Hands-Free: Perfect for cooking apps, workout guides, or multi-tasking
- Modern UX: Stand out with cutting-edge interaction patterns
- Efficiency: Faster than clicking through menus
And YakaJS makes it incredibly easy.
Basic Voice Commands
Let's start with a simple example—voice-controlled navigation:
// Enable voice recognition_.voice.listen({ 'show menu': () => { _('#menu').slideDown(300); }, 'hide menu': () => { _('#menu').slideUp(300); }, 'go home': () => { window.location.href = '/'; }, 'scroll to top': () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }});That's it! Your app now responds to voice commands.
Wildcard Parameters
Capture user input with wildcards:
_.voice.listen({ // Capture any text after "search for" 'search for *': (query) => { performSearch(query); _('#results').fadeIn(); }, // Navigate to pages by name 'go to *': (page) => { window.location.href = `/\${page}`; }, // Set values 'set volume to *': (level) => { const volume = parseInt(level) / 100; setAudioVolume(volume); }});Multi-Language Support
YakaJS supports 50+ languages:
// Spanish commands_.voice.listen({ 'mostrar menú': () => _('#menu').slideDown(), 'ocultar menú': () => _('#menu').slideUp()}, { language: 'es-ES' });// French commands_.voice.listen({ 'afficher le menu': () => _('#menu').slideDown(), 'cacher le menu': () => _('#menu').slideUp()}, { language: 'fr-FR' });// Japanese commands_.voice.listen({ 'メニューを表示': () => _('#menu').slideDown(), 'メニューを隠す': () => _('#menu').slideUp()}, { language: 'ja-JP' });Advanced Features
1. Confidence Threshold
Filter out uncertain matches:
_.voice.listen({ 'delete everything': () => { if (confirm('Are you sure?')) { deleteAllData(); } }}, { confidence: 0.8 // Only trigger if 80%+ confident});2. Custom Vocabulary
Add domain-specific terms:
_.voice.listen({ 'show *': (component) => { _(`#\${component}`).fadeIn(); }}, { vocabulary: [ 'sidebar', 'navbar', 'dashboard', 'settings', 'analytics' ]});3. Contextual Commands
Commands that change based on app state:
const isMenuOpen = _.signal(false);// Dynamic command registration_.effect(() => { if (isMenuOpen()) { _.voice.listen({ 'hide menu': () => { _('#menu').slideUp(); isMenuOpen.set(false); }, 'select *': (item) => { selectMenuItem(item); } }); } else { _.voice.listen({ 'show menu': () => { _('#menu').slideDown(); isMenuOpen.set(true); } }); }});4. Continuous vs. Single Recognition
// Continuous listening (default)_.voice.listen({ 'next': () => nextSlide(), 'previous': () => previousSlide(), 'pause': () => pausePresentation()}, { continuous: true // Keeps listening});// Single command_.voice.listen({ 'start recording': () => { startRecording(); }}, { continuous: false // Stops after one command});Real-World Examples
Example 1: Voice-Controlled Todo App
const todos = _.signal([]);_.voice.listen({ 'add task *': (task) => { todos.set([...todos(), { id: Date.now(), text: task, done: false }]); _.voice.speak(`Added: \${task}`); }, 'complete task *': (taskName) => { todos.set(todos().map(t => t.text.toLowerCase().includes(taskName.toLowerCase()) ? { ...t, done: true } : t )); _.voice.speak(`Completed: \${taskName}`); }, 'delete task *': (taskName) => { todos.set(todos().filter(t => !t.text.toLowerCase().includes(taskName.toLowerCase()) )); _.voice.speak(`Deleted: \${taskName}`); }, 'list tasks': () => { const taskList = todos() .filter(t => !t.done) .map(t => t.text) .join(', '); _.voice.speak(`You have: \${taskList}`); }});Example 2: Voice-Controlled Music Player
const player = { playing: _.signal(false), volume: _.signal(0.5), currentSong: _.signal(null)};_.voice.listen({ 'play': () => { resumePlayback(); player.playing.set(true); }, 'pause': () => { pausePlayback(); player.playing.set(false); }, 'next song': () => { playNextSong(); }, 'previous song': () => { playPreviousSong(); }, 'volume *': (level) => { const vol = parseInt(level) / 100; player.volume.set(vol); setVolume(vol); }, 'play *': (songName) => { const song = findSong(songName); if (song) { playSong(song); player.currentSong.set(song); } }, 'what song is this': () => { const song = player.currentSong(); _.voice.speak(`Now playing: \${song.title} by \${song.artist}`); }});Example 3: Voice-Controlled E-Commerce
const cart = _.signal([]);_.voice.listen({ 'add * to cart': (product) => { const item = findProduct(product); if (item) { cart.set([...cart(), item]); _.voice.speak(`Added \${item.name} to cart`); } }, 'remove * from cart': (product) => { cart.set(cart().filter(item => !item.name.toLowerCase().includes(product.toLowerCase()) )); _.voice.speak(`Removed \${product}`); }, 'show cart': () => { _('#cart-modal').fadeIn(); }, 'checkout': () => { window.location.href = '/checkout'; }, 'search for *': (query) => { performProductSearch(query); _('#search-results').fadeIn(); }});Voice Feedback
Provide audio feedback with text-to-speech:
_.voice.listen({ 'what time is it': () => { const time = new Date().toLocaleTimeString(); _.voice.speak(`The time is \${time}`); }, 'how many items in cart': () => { const count = cart().length; _.voice.speak(`You have \${count} items in your cart`); }});Visual Feedback
Show users when voice is active:
const isListening = _.signal(false);_.voice.onStart(() => { isListening.set(true); _('#mic-indicator').addClass('active').fadeIn();});_.voice.onEnd(() => { isListening.set(false); _('#mic-indicator').removeClass('active').fadeOut();});_.voice.onError((error) => { console.error('Voice error:', error); _('#error-message').text(error.message).fadeIn();});Browser Compatibility
YakaJS voice commands work in all modern browsers:
- ✅ Chrome/Edge (excellent support)
- ✅ Safari 14.1+ (good support)
- ✅ Firefox 112+ (good support)
- ⚠️ Mobile browsers (varies by OS)
// Check for voice supportif (_.voice.isSupported()) { _.voice.listen({ /* commands */ });} else { console.warn('Voice commands not supported');}Best Practices
1. Keep Commands Natural
// ✅ Good: Natural language_.voice.listen({ 'show me the menu': () => showMenu(), 'what are my options': () => showOptions()});// ❌ Bad: Robotic commands_.voice.listen({ 'execute menu display': () => showMenu(), 'options output': () => showOptions()});2. Provide Visual Cues
Always show users:
- When voice is listening
- What was recognized
- Confirmation of action taken
3. Handle Errors Gracefully
_.voice.onError((error) => { if (error.code === 'no-speech') { _.voice.speak("I didn't catch that. Please try again."); } else if (error.code === 'not-allowed') { alert('Please enable microphone access'); }});4. Offer Alternatives
Not everyone can or wants to use voice. Always provide:
- Keyboard shortcuts
- Mouse/touch controls
- Traditional UI elements
Privacy & Security
YakaJS voice processing happens locally in the browser:
- ✅ No data sent to external servers
- ✅ No third-party APIs
- ✅ Respects user privacy
- ✅ Works offline
Performance
Voice recognition is lightweight:
- ~2KB additional bundle size
- Minimal CPU usage
- No impact when not in use
- Automatic cleanup on unmount
Getting Started
Enable voice commands in your app today:
// 1. Basic setup_.voice.listen({ 'hello': () => _.voice.speak('Hello! How can I help?')});// 2. Add your commands_.voice.listen({ 'show dashboard': () => navigate('/dashboard'), 'open settings': () => openSettings(), 'search for *': (query) => search(query)});// 3. Customize behavior_.voice.configure({ language: 'en-US', continuous: true, confidence: 0.7});Next Steps
Explore more voice capabilities:
Voice control is the future of web interaction. With YakaJS, that future is here today.
Start building voice-enabled applications now!