语音识别依赖浏览器支持,使用前需调用 isSpeechRecognitionSupported 检测;GUI 需额外引入 Speech KITT 项目;README 未说明具体支持的浏览器范围
npm install annyangREADME 未说明;语音识别依赖浏览器能力,需先用 isSpeechRecognitionSupported 检测
一个 2KB 无依赖的 JS 语音识别库,让用户用语音命令控制你的网站
给网页加语音识别的前端库,几行代码就能让站点听懂用户说话,支持语音指令和语音转文字。
核心能力
- 用 addCommands 把语音短语映射到回调函数
- 支持 *term 通配符捕获语音中的可变参数
- 提供 isSpeechRecognitionSupported 检测浏览器支持
- 支持 ESM、具名导入、CommonJS 和 script 标签引入
- 可配合 Speech KITT 添加启停与状态 GUI
容易踩的坑
- v3.1.1annyang v3.1.1最新正式版2026-10-13 · 2026-10-13 03:46 UTC
Patch release fixing callback dispatch and automatic restart behavior. No API changes.
Fixed
- Callbacks that unsubscribe themselves no longer skip the next callback. Each dispatch uses a snapshot, so subscription changes affect subsequent dispatches.
abort()cancels pending automatic restarts so speech recognition stays stopped until explicitly started again.- Explicit
start()calls replace pending automatic restarts, preventing redundant attempts to start recognition.
- v3.1.0annyang v3.1.02026-10-06 · 2026-10-06 23:02 UTC
查看更新说明
More forgiving voice commands
Speech recognition sometimes adds punctuation to what you say. annyang now handles common sentence punctuation automatically, with no new options to configure.
annyang.addCommands({ 'hello there': () => { console.log('Hello!'); }, }); // All three match the same command: annyang.trigger('hello there'); annyang.trigger('Hello there!'); annyang.trigger('Hello, there.');Commands written with punctuation, like
'Hello, there!', work too.New Features
- More forgiving punctuation matching — String commands tolerate sentence-ending periods, exclamation marks, and question marks after literal text, and commas between literal words. Captured values and custom regular expressions are unchanged.
Bug Fixes
- Unicode case-insensitive matching — String commands now correctly match uppercase and lowercase letters outside the basic multilingual plane, including Deseret and Osage.
Internal
- Updated development dependencies to address security advisories.
- Kept the patched humanfs dependency compatible with Node.js versions below 24.
- v3.0.0annyang v3.0.02026-03-11 · 2026-03-11 06:43 UTC
查看更新说明
Rewritten in TypeScript, modern modules, and more!
annyang v3 is a ground-up rewrite. The library is now written in TypeScript, ships its own type definitions, and supports every module format — ESM, CommonJS, and IIFE script tags. It's still tiny (2 KB), still has zero dependencies, and now works safely in browsers that don't support speech recognition.
import annyang from 'annyang'; annyang.addCommands({ 'search for *term': (term) => { console.log(`Searching for ${term}`); }, }); if (annyang.isSpeechRecognitionSupported()) { annyang.start(); } else { // trigger() works even without speech recognition — // great for testing, automation, or fallback UIs in non-supporting browsers annyang.trigger('search for cat videos'); }Named imports work too:
import { addCommands, start, trigger, isSpeechRecognitionSupported } from 'annyang';
New Features / Breaking Changes
- TypeScript types included — Full type definitions ship with the package.
addCallbackenforces correct callback signatures per event type.- ESM/CJS/IIFE module support — Works with
import,require(), and<script>tags. getState()method — Returns'idle','listening', or'paused'.stateproperty (on default export) — Getter that returns the current state.addCallbackreturns an unsubscribe function:const unsub = annyang.addCallback('start', myFunc); unsub(); // removes myFunc from 'start' callbackstrigger()works independently of speech recognition —trigger()can now be used regardless of whether annyang is listening, paused, aborted, or even in browsers that don't support speech recognition.- Safe to use in unsupported browsers — Methods like
start(),addCommands(), andsetLanguage()no longer throw when SpeechRecognition is unavailable. if (annyang)no longer detects browser support — The annyang object is always defined in v3. UseisSpeechRecognitionSupported()instead:// v2 if (annyang) { annyang.start(); } // v3 if (annyang.isSpeechRecognitionSupported()) { annyang.start(); }init()deprecated — annyang has been initializing automatically since v1.1.0. Callinginit()now logs a deprecation warning. Remove any calls toinit().- String-based command callbacks removed — Passing function names as strings (e.g.,
{'hello': 'sayHello'}) is no longer supported. Pass functions directly:{'hello': sayHello}. - Duplicate command phrases now overwrite — In v2, adding a command with the same phrase would register both. In v3, the new callback replaces the old one.
Internal
- Source rewritten in TypeScript with strict mode
- Bundler switched from Rollup to tsup
- Tests migrated to Vitest
- v2.6.1Maintenance release2018-05-07 · 2018-05-07 11:18 UTC
查看更新说明
👍 This release is 100% backwards compatible with all v2 releases.
Ensured support up to Node.js 10. Updated dependencies and rebuilt for a more efficient distributable.
Awesome people :star:
Special thanks to:
- @DanielRuf
- @Gebrukal
- @HannesOberreiter
- v2.6.0Added soundstart event2016-10-07 · 2016-10-07 10:39 UTC
查看更新说明
👍 This release is 100% backwards compatible with all v2 releases.
[Added] Allow listening to the
soundstarteventYou can now add a callback event which will run when the speech recognition's soundstart event fires.
annyang.addCallback('soundstart', fn);This event will fire once per speech recognition session (due to a bug in Chrome). If you would like to get it again the next time sound is heard, you can abort and restart speech recognition… which is the default behavior in HTTPS anyway. In other words, in HTTPS it works great.
See a more complete example for detecting when the user starts and stops speaking in the FAQ.
Changed file structure and development stack
The main annyang files which you will include in your project are now in the
/distdirectory:If you would like to work on annyang's code itself, it is now in the
/srcdirectory:annyang's source now passes through babel with the es2015 preset, so you can use ES2015 language features in it.
Awesome people :star:
Special thanks to:
- @remybach - For the original
soundstartevent code, and helping determine the final functionality. - @peterdillon - Helping create a use case to test the new
soundstartevent.
- @remybach - For the original
用户点评
登录用户的真实使用记录,可按版本和硬件筛选还没有人点评。第一个说出真实体验的人最有价值。
annyang!
A tiny JavaScript Speech Recognition library that lets your users control your site with voice commands.
annyang has no dependencies, weighs just 2 KB, and is free to use and modify under the MIT license.
Demo and Tutorial
Play with some live speech recognition demos
FAQ, Technical Documentation, and API Reference
Install
npm install annyang
Hello World
It's as easy as installing annyang and defining the commands you want.
ESM (recommended)
import annyang from 'annyang';
if (annyang.isSpeechRecognitionSupported()) {
// Let's define a command.
const commands = {
'hello': () => { alert('Hello world!'); },
'search for *term': (term) => { console.log(`Searching for ${term}`); },
};
// Add our commands to annyang
annyang.addCommands(commands);
// Start listening.
annyang.start();
}
Named imports
import { addCommands, start, isSpeechRecognitionSupported } from 'annyang';
if (isSpeechRecognitionSupported()) {
addCommands({ 'hello': () => { alert('Hello world!'); } });
start();
}
CommonJS
const annyang = require('annyang');
Script tag (IIFE)
<script src="https://cdn.jsdelivr.net/npm/annyang@3/dist/annyang.iife.min.js"></script>
<script>
if (annyang.isSpeechRecognitionSupported()) {
// Let's define a command.
const commands = {
'hello': () => { alert('Hello world!'); }
};
// Add our commands to annyang
annyang.addCommands(commands);
// Start listening.
annyang.start();
}
</script>
Check out some live speech recognition demos and advanced samples, then read the full API Docs.
Adding a GUI
You can easily add a GUI for the user to interact with Speech Recognition using Speech KITT.
Speech KITT makes it easy to add a graphical interface for the user to start or stop Speech Recognition and see its current status. KITT also provides clear visual hints to the user on how to interact with your site using their voice, providing instructions and sample commands.
Speech KITT is fully customizable and comes with many different themes, and instructions on how to create your own designs.
For help with setting up a GUI with KITT, check out the Speech KITT page.
Author
Tal Ater: @TalAter
License
Licensed under MIT.
