[Guide] Using Microsoft Edge TTS in Anki Card Template

Anki TTS

MS Edge TTS in Anki Card Template.

Usage

Add following script tag at top in Anki Card Template using note editor.

<script src="https://cdn.jsdelivr.net/npm/anki_tts@latest/src/anki_tts.js"></script>

Then update the playTts method, change {{Front}} to field name. Lets say if field name in note type is Hanzi, then replace it with {{Hanzi}}. Copy following method to Card template.

<script>
    function playTts() {
        let text = '{{Front}}';   // <-----   change Front to field name in card template

        let [ttsLocale, ttsSublocale] = getLocal();
        edgeTtsPlay(text, ttsSublocale);
    }
</script>

Click on config button during review to set language and set config.

Then click play to text to speech

Credits

Images

4 Likes

Hi, I was wondering if there was a way to autoplay tts with this method because I have a lot of vocab cards with a ton of example sentences, and normally I’d have to use tts to generate audios for all the sentences but with this method, I don’t really need to generate audio files, which is really appealing to me. However, Anki’s native support of autoplaying mp3 files is really useful to me and it seems like I have to click play button every time using this method, so I’d like to ask if there is an alternative to make up for the lack of autoplay function.

1 Like

You have to add this line document.getElementById("ttsPlayButton").click().

This is updated code for autoplay during review.

<script src="https://cdn.jsdelivr.net/npm/anki_tts@latest/src/anki_tts.js"></script>

<script>
    function playTts() {
        let text = '{{Front}}';   // <-----   change Front to field name in card template

        let [ttsLocale, ttsSublocale] = getLocal();
        edgeTtsPlay(text, ttsSublocale);
    }
    document.getElementById("ttsPlayButton").click();
</script>
2 Likes