Annyang: Add Voice Control to Your Web App in 2 Lines of Code
Ever wanted your users to just say what they want instead of clicking around? Voice-enabled interfaces are still rare on the web, but with the rise of smart assistants, it's a feature that can make your app feel futuristic and accessible. The good news? You don't need a PhD in machine learning to add it.
Enter Annyang – a tiny JavaScript library that wraps the browser's built-in Speech Recognition API into a dead-simple, developer-friendly tool. You can start listening for voice commands in under a minute.
What It Does
Annyang is a lightweight library (less than 2KB minified) that handles speech recognition for you. You give it a set of commands in a JavaScript object, and it matches spoken words to those commands, firing callbacks when it hears a match.
if (annyang) { annyang.addCommands({ 'show the weather': function() { showWeather(); }, 'go to *page': function(page) { navigateTo(page); } }); annyang.start();
}
That's it. No API keys, no cloud setup, no external dependencies. It works in Chrome, Edge, and other Chromium-based browsers (where the Web Speech API is supported).
Why It’s Cool
- Tiny and dependency-free. You can drop it into any project without worrying about bloat.
- Flexible command syntax. Support for wildcards (
*), optional words, and named groups. You can say "show me the weather in London" and parse the city name. - Continuous listening. It keeps running until you tell it to stop.
- Multiple languages. Specify a language or let the browser auto-detect.
- Active development. The library is mature, well-documented, and has been around since 2014.
The clever part? It handles the messiness of speech recognition for you – things like false starts ("uh", "um"), silence detection, and fallback when the browser doesn't support it. It's a thin, opinionated wrapper that just works.
How to Try It
The simplest way to test it is to clone the repo or use a CDN link:
npm install annyang
# or
yarn add annyang
Or grab it from a CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
The repo includes a live demo where you can try voice commands right in your browser. Say "Hello" and it responds. Say "Show me a rainbow" and... well, try it.<