Sharing a small script that adds text-to-speech to card templates, no add-on, just a script tag pasted into the note type’s template. Works on desktop, AnkiMobile, and AnkiDroid (anywhere the reviewer runs a web view with network/JS).
GitHub: GitHub - krmanik/anki-tts: MS Edge TTS in Anki Card Template · GitHub
What it does
Two TTS engines, switchable from a Settings panel during review:
- Microsoft Edge (online) - the original “Read Aloud” voices, wide language/voice selection.
- Piper (offline, on-device) - neural TTS that runs entirely in the browser. Voice models download once (10-70MB depending on quality) and are cached, so after the first play it works with no internet connection at all.
- A gear icon during review opens Settings to pick engine, locale, voice, and (for Piper) speaker.
- Play button turns into Pause/Resume while audio plays, plus a Stop button and a progress bar.
- A collapsible Log panel shows every step (voice list, download progress, phonemes, synthesis) and auto-expands on error — useful since the Anki reviewer has no real devtools.
Setup
Add this script tag near the top of your card template (Front or Back, via the note type editor):
<script type="module" src="https://cdn.jsdelivr.net/gh/krmanik/anki-tts@latest/src/anki_tts.js"></script>
Then add a play button/trigger and point it at whichever field you want read aloud:
<script>
stopTts?.(); // stop any audio left playing from the previous card
function playTts() {
let text = '{{Front}}'; // change Front to your field name, e.g. {{Hanzi}}
ttsPlay(text); // uses whichever engine/voice is selected in Settings
}
</script>
About the Edge engine and browsers
Microsoft’s TTS server (speech.platform.bing.com) checks the real browser User-Agent and only accepts connections from actual Microsoft Edge. Since browsers don’t let JavaScript override that header, this can’t be worked around client-side, in this project or anything else, which means the Edge engine normally won’t work in Chrome, Firefox, Safari, or Anki’s own review window (desktop, mobile, or AnkiDroid).
Two ways around it, both optional (Piper doesn’t need either):
-
Local relay (
npm run relay) - runs a small Node process on your own machine that connects to Microsoft’s server with spoofed headers from outside the browser sandbox, where custom headers are allowed. The Edge engine auto-detects it on127.0.0.1:8811while it’s running. Good if you review on desktop and don’t mind a terminal open. -
Cloudflare Worker relay - same trick, but hosted so it’s always on with nothing running locally. Free tier (100k requests/day, no card required) easily covers personal use. Useful for AnkiMobile/AnkiDroid where a local relay isn’t reachable. Setup/deploy steps:
worker/README.md. Once deployed, paste the Worker URL and your relay token into the Edge engine’s Settings panel (gear icon).
If neither relay is running, Edge TTS just falls back to “real Edge browser only”, everything else, including Piper, is unaffected.
View example usage in Anki-xiehanzi deck
https://krmanik.github.io/Anki-xiehanzi/create
