Anki-android: Understand <tts> tags to enable reading of individual fields

[hssm]

Originally reported on Google Code with ID 560

When TTS plays sound, it read out the whole question(or answer), even the HTML tags.
I think it will be better if a specific field of cards can be select to speak out(such
as the 'Word' field in my deck).

Reported by nicolas.raoul on 2011-04-09 03:53:12

[hssm]

(first reported by monoFish Yu)

Reported by nicolas.raoul on 2011-04-11 03:23:39

[hssm]

Reported by NorbertNagold on 2011-10-14 07:45:57

• Labels added: Type-Enhancement
• Labels removed: Type-Defect

[hssm]

Issue 2123 has been merged into this issue.

Reported by perceptualchaos2 on 2014-06-19 04:13:43

[hssm]

Issue 2548 has been merged into this issue.

Reported by perceptualchaos2 on 2015-03-06 14:53:27

[hssm]

Issue 907 has been merged into this issue.

Reported by perceptualchaos2 on 2015-03-06 14:54:05

[hssm]

Issue 906 has been merged into this issue.

Reported by perceptualchaos2 on 2015-03-06 14:54:21

[hssm]

Issue 2258 has been merged into this issue.

Reported by perceptualchaos2 on 2015-06-01 05:06:47

[hssm]

Reported by perceptualchaos2 on 2015-06-01 05:07:38

[hssm]

Issue 1647 has been merged into this issue.

Reported by perceptualchaos2 on 2015-06-04 02:00:58

[madnik7]

Hi

I've finally managed to overcome with this issue in a very appropriate way that deprecate this enhancement.

Fortunately, AnkiDroid has already passed the html text to the TTS (Text-To-Speak) engine without taking into account of its display properties. The good news is that most TTS engines already support Speech Synthesis Markup Language (SSML) that are much more powerful than the feature requested here. See the following reference:

http://www.w3.org/TR/speech-synthesis11/

So to prevent reading of individual fields we just need to use the "mark" tag of SSML such as the following code snippet in your cards:

<span class="ssml" style="display:none">&lt;mark&gt;</span>
This Text will not be readed aloud
<span class="ssml" style="display:none">&lt;/mark&gt;</span>

This Text will be readed aloud

I have successfully tested it by Samsung build-in TTS and IVONA (which I recommended). Unfortunately Google Android TTS still does not support SSML:
http://stackoverflow.com/questions/3525424/does-android-tts-support-speech-synthesis-markup-language

Cheers

[timrae]

@madnik7 thanks for the tip! That stack overflow thread is pretty old; what version of Android did you test (Google Android TTS) with?

[madnik7]

I tested with Galaxy Note 4 - Android 5.1.1

By the way, I have no problem with INOVA TTS-Engine.

My reviewing speed has become twice by now and I have much more fun.

[madnik7]

@boloing22 Have you tested with INOVA TTS-Engine? I am already using the method I mentioned without any problem. Just use the sample I provided with INOVA TTS-Engine that support SSML.

[steph643]

+1
When using the {{type:XXX}} feature, the TTS reads "Type XXX" out loud!

[steph643]

@madnik7's answer works for me (Kindle Fire 2015).

So if you want to use both TTS and the "type in the answer" feature, your card should look like this:

Front template

{{Front}}

<hr id=answer>

<span class="ssml" style="display:none">&lt;mark&gt;</span>
{{type:Back}}
<span class="ssml" style="display:none">&lt;/mark&gt;</span>

(you need <span class="ssml"... so that TTS doesn't pronounce "type back")

Back template

{{FrontSide}}

<hr id=answer>

<span style="opacity:0">{{Back}}</span>

(you need {{Back}} so that TTS pronounce the answer and opacity:0 so that the answer is only displayed once)

[SebastianGrzymala]

I managed the issue by moving the text I don't want to listen into css layer. Works fine with google TTS. Tested on Galaxy S5.
My custom field that I don't want to be pronounced is 'Typ'. This is how my card template looks now:

```

{{Front}}

[snakecase]

Found a way to make TTS work correctly while using styling and _type:_ modifier (text input) for both Google TTS and AwesomeTTS simultaneously (so you can use the same deck of cards on your PC and smartphone and have correctly functioning TTS on both devices). Pronunciation works correctly only in the Back side of a card though. Nevertheless it works flawlessly without repeats and weird "type:Tag" being read out loud.

The solution is similar to what @SebastianGrzymala wrote above and consists of putting all the content of both Sides of a card into the Front Side, hiding what you don't want to see in the Front Side, then invoking all this content in the Back Side using _{{FrontSide}}_ variable. This way Google TTS ignores what _{{FrontSide}}_ displays and only reads what is inside the tts tags at the end of the Back Side of a card.

1. Place all content into the Front Template and assign classes to each element
2. Hide what you don't want to see on the Front Side using .
3. Put all the Front card content into the Back Template using built-in _{{FrontSide}}_ variable
4. Unhide what you hid before with or whatever display type you want.
5. Put {{Answer}} at the end of the Back Side

Example:

Front Template

<div class="question">{{Question}}</div>
<div class="input">{{type:Answer}}</div>

<!-- Putting Pronunciation and Example tags in the Front Template so whey won't interfere with
Google TTS while it reads shit of the Back Template. Hiding them with CSS for now. -->
<div class="pronunciation">{{Pronunciation}}</div>
<div class="example">{{Example}}</div>

Styling

.pronunciation, .example {
    display: none;
}

Back Template

<!-- Overwriting display none for tags hidden before. The rest fields come with FrontSide tag.
Pronunciation in both Google TTS and AwesomeTTS happens through Answer tag placed inside of tts
tags at the end. -->
<style>
.pronunciation {display: inline-block;}
.example {display: block;}
</style>

{{FrontSide}}

<hr id=answer>

<tts style="display: none">{{Answer}}</tts>

In this example the only tag being pronounced is _{{Answer}}_ in the Back side of a card.

[porfirio1830]

Ankidroi+ivonna+tts+w+role
The following statement does not function in ankidroid:
I have <w role="ivonna:VBD">READ</w> a book.
You know the past p tense of read is different from its present tense about pronunciation.
Do you know the answer? please help me, thanks.

[eginhard]

@porfirio1830 It is spelled "ivona" with a single N, does it work then? If not, please open a new issue or use the forum because this issue is about something different.

[mikhail-mv]

But what if the field is dynamically generated.
For example the code might look smth like:
```...

{{Field}}
...

```
How is it possible to TTS the result content of the Field?
Thank you

[snakecase]

@mikhail-mv I don't know if JS works in Anki at all but you can try to insert your content with tts tags around like: '\' + content + '\'. I'm not sure it's gonna work though.

[mikhail-mv]

@snakecase Can you please explain exactly what you meant?

[snakecase]

@mikhail-mv sorry I didn't double check my response. Edited with proper tags in place. By the way, can you post the entire line which generates text that you want to be pronounced?

[mikhail-mv]

@snakecase
It is not a single line. But it really does not matter. The problem is that the answer line is dynamically generated by a script and can't be put as simple HTML in the card template.
And by the way the tags are not yet working for me. At least with ver. 2.8.3 and Google TTS Engine on Android 7.0.
Thanks

[snakecase]

@mikhail-mv

The problem is that the answer line is dynamically generated by a script and can't be put as simple HTML in the card template.

If the output of your script shows up on a card in Anki app then it is HTML generated by JS. If it doesn't show up then I don't think it's possible to do it this way.

And by the way the tags are not yet working for me.

Just checked my Ankidroid {2.8.3}. Google TTS (3.13.3) reads only what is inside of \\ tags.
In my case my Back Template looks like:
{{Question}}
\{{Answer}}\

If I remove tts tags then the Answer stops being pronounced.

[mikhail-mv]

@snakecase
I just checked. I got the same versions. But I cannot make the tags work.
An example of my code for the Front of the card looks like this:

<tts><span id="question">{{Question}}</span></tts><br>
<span id="deck">{{Subdeck}}</span><br>

Does not matter if I have tags or not - the whole front, both Question and Subdeck are pronounced.

If the output of your script shows up on a card in Anki app then it is HTML generated by JS. If it doesn't show up then I don't think it's possible to do it this way.

My understanding is that only HTML visible in the original template is sent to the tts engine. And whatever is changed by the script is not sent to tts.

[snakecase]

@mikhail-mv it seems I misguided you a bit in the last reply. I checked pronunciation without tags on PC but completely forgot that Ankidroid works differently in this regard. Ankidroid actually pronounces all the content but if you throw it at the back template with {{FrontSide}} and then input {{Answer}} it will ignore all the {{FrontSide}} content.

And I think you are right about visible HTML. But I wonder if this way will work with Anki's AwesomeTTS on PC.

[Xyde]

The tags doesn't work for me I use Acapela TTS as well as Google and they repeat both the field used for Awesome TTS and the normal field, which makes it twice the sound which is very aggravating...

I tried all the fixes here, doesn't work... I use basic decks only.

[wsmigaj]

The TTS tags are supported in version 2.9 of AnkiDroid, but as far as I know, that version is at present only available for alpha testers, and the version available from the Google Play Store is still 2.8. I assume that's the version you're using -- it would explain why the tags don't work for you in AnkiDroid.

[davidaylaian]

You can get an Alpha 2.9 apk from the releases page. After installing it, use <tts service="android">text to be spoken</tts>.

[alexbegey]

Here's another hacky solution until an official solution is released.

I've faced the issue when the built-in AnkiDroid TTS (from the Advanced options menu) is enabled, it will read all the text that's displayed on the card. Since on the BackSide of the card I was displaying both the FrontSide and the BackSide content, it was undesirably reading both parts, one of them in the wrong language (studying foreign languages). None of the other suggestions using SSML or TTS tags helped prevent this behavior (still on version 2.8).

However, I did find a hacky solution of preventing the TTS engine from reading some of the text by writing the text via JavaScript code at runtime. Currently, it's working perfectly, at least until version 2.9 is released with the support for tts tags, etc.

Here's what my BackSide html template looks like.

<div id="frontSide"></div>
<hr>
{{Back}}

<script>
document.getElementById("frontSide").innerHTML=`{{FrontSide}}`;
</script>

The content that's written by JavaScript to the "frontSide" div's innerHTML property at runtime won't be read out loud by AnkiDroid's built-in TTS reader.

[timrae]

This should have been closed by #4677