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.

Final Thoughts

Annyang isn't going to replace your UI, but it's a fantastic way to add a voice shortcut layer for power users, accessibility, or just novelty. It's especially fun for things like navigation gestures ("go home", "scroll down"), search commands ("search for cats"), or hands-free interactions in a kiosk environment.

If you've ever wanted to dip your toes into voice-controlled web apps without fighting SDKs and API keys, Annyang is the smoothest on-ramp I've found. Try it on a small experiment. Your users might surprise you.

Found this useful? Follow @githubprojects for more developer tools and hidden gems.