Fixing/fine-tuning pronunciation of words for TTS engines

[sudomain]

Hello,

I’m posting this idea here in the hope that someone has a better solution. I use TTS on my cards and a problem that I sometimes run into is even great TTS engines will horribly mispronounce some domain-specific vocabulary. For instance, the engines I’ve tried will pronounce the word “cation” in a way that sounds like “cay-shun” when it should be pronounced “cat-eye-on”.

My current solution, which I don’t love, is to have another field for pronunciation. If “cation” is in a field named Term, I create another field named Term (pronunciation) and enter “cat-eye-on”. The template then gets one of these so that the pronunciation field gets read:

[anki:tts lang=en_US]{{Term (pronunciation)}}[/anki:tts]

I can see this getting unwieldy very fast if I need to add a new field whenever something’s mispronounced and there isn’t already a FIELD_NAME (pronunciation) field.

I also attempted to use JavaScript to manipulate/replace text, but it seems that text gets sent to the TTS engine before it can be acted on by JavaScript in the card rendering process. Is there a better way than 2 different fields for pronunciation?

[sudomain]

I think I have a better solution now using JavaScript. On the template use:

<script>
const elementsToReplace = document.querySelectorAll('[data-replace-with]');
elementsToReplace.forEach(element => {
    const replacementText = element.getAttribute('data-replace-with');
    element.innerHTML = replacementText;
});
</script>

This code takes any element with the data-replace-with attribute and replaces the inner content with the value of the attribute. Here is an example field that would be affected:

Test Front field (JS note type) <span data-replace-with='This text will replace the following text'> This text will be replaced AFTER this has been sent to the TTS engine</span> This text is outside of the span, thus won't be replaced.

Thus for my problem:

<span data-replace-with='cation (true spelling)'> CAT-EYE-ON (pronunciation) </span>