Skip to content

Adding TTS to to the dictionary content without repacking MDX file

Jump to bottom
Jimex edited this page Nov 24, 2024 · 1 revision

DictTango provides several built-in JavaScript functions that enable users to add TTS (Text-to-Speech) functionality for example sentences without repackaging the MDX files. The TTS feature displays a speaker icon after example sentences. When clicked, it plays the TTS pronunciation in a specified language.

The built-in functions are:
__addTTS_ByName, __addTTS_ByTag, __addTTS_ByCssClass, and __addTTS_BySelector.

Usage Instructions

  1. Inspect the MDX HTML source to identify the HTML elements for TTS.
    Pro Tip: Enable debug mode in Settings -> Dictionary Settings. Then, search for a word in the dictionary. The relevant HTML will be generated in the DictTango/Logs folder on the SD card. Open the HTML file to view its content.
  2. Edit the dictionary detail and add the appropriate function and parameters to the dictionary's inline script.

Add TTS by Element Name

Function Name: __addTTS_ByName(elementName, locale)

  • Parameter elementName: The name of the HTML element.
  • Parameter locale: The language code for pronunciation. Refer to the language list below.

Applicable Scenario

<span name="pg_en">I am a boy</span>
<span name="pg_cn">我是一个男生</span>

<span name="pg_en">I am a girl</span>
<span name="pg_cn">我是一个女生</span>

Example Code

__addTTS_ByName('pg_en', 'en_US');
__addTTS_ByName('pg_cn', 'zh_CN');

Add TTS by CSS Class

Function Name: __addTTS_ByCssClass(className, locale)

  • Parameter className: The CSS class of the HTML element.
  • Parameter locale: The language code for pronunciation. Refer to the language list below.

Applicable Scenario

<span class="pg_en">I am a boy</span>
<span class="pg_cn">我是一个男生</span>

<span class="pg_en">I am a girl</span>
<span class="pg_cn">我是一个女生</span>

Example Code

__addTTS_ByCssClass('pg_en', 'en_US');
__addTTS_ByCssClass('pg_cn', 'zh_CN');

Add TTS by HTML Tag

Function Name: __addTTS_ByTag(tagName, locale)

  • Parameter tagName: The HTML tag name (e.g., span, div, etc.).
  • Parameter locale: The language code for pronunciation. Refer to the language list below.

Applicable Scenario

<en>I am a boy</en>
<cn>我是一个男生</cn>

<en>I am a girl</en>
<cn>我是一个女生</cn>

Example Code

__addTTS_ByTag('en', 'en_US');
__addTTS_ByTag('cn', 'zh_CN');

Advanced: Add TTS by Selector

Function Name: __addTTS_BySelector(selector, locale)

  • Parameter selector: A DOMString containing one or more CSS selectors (e.g., span[data-lang='en']). Refer to MDN's querySelectorAll for more details.
  • Parameter locale: The language code for pronunciation. Refer to the language list below.

Applicable Scenario

<span data-lang="en">I am a boy</span>
<span data-lang="cn">我是一个男生</span>

<span data-lang="en">I am a girl</span>
<span data-lang="cn">我是一个女生</span>

Example Code

__addTTS_BySelector("span[data-lang='en']", "en_US");
__addTTS_BySelector("span[data-lang='cn']", "zh_CN");

Language Code List

Below are some commonly used language codes. Refer to the linked site for the full list.

Language Code Description
en_GB British English
en_US American English
zh_CN Chinese
yue_HK Cantonese
fr French
de German
it Italian
spa Spanish
ja_JP Japanese

For a complete list, refer to: List of Supported Locales on Android.

Clone this wiki locally