Try toneletter.js

View on GitHub

Built up with Thai.
  • Press '1'~'5' key behind a vowel to add a tone letter.
      tone 1 (ā), tone 2 (à), tone 3 (â), tone 4 (á), tone 5 (ǎ)
  • Type 'W' key to put a phonetic letter 'ʉ'
  • Type 'U' key to put a phonetic letter 'ə'
  • Type 'E' key to put a phonetic letter 'ɛ'
  • Type 'O' key to put a phonetic letter 'ɔ'
  • Type 'N' key to put a phonetic letter 'ŋ'

Click this button, and it'll stop the observation on keydown.

const input = document.getElementById("example2");
const toneletter2 = new Toneletter(input, { lang: "th" });
toneletter2.observe();
// turn off
tonelteter2.off();


Adding tones to the vowel in front of the cursor by method call.

const input = document.getElementById("example3");
const toneletter3 = new Toneletter(input, { lang: 'th' });
toneletter3.addTone(0); // Add tone number 0 `ā`
});

Customize tone keys and phonetic symbol keys and letters.

const input = document.getElementById("example4");
new Toneletter(input, ({
  lang: 'th',
  toneKeys: ['0', '1', '2', '3', '4'],  // for tones ā, à, â, á, ǎ
  phoneticSymbols: {
    'U': '\u0289', // ʉ
    'A': '\u0259', // ə
    'E': '\u025b', // ɛ
    '@': '\u0254', // ɔ
    'G': '\u014b', // ŋ
  },
}).observe();
It works well with Chinese Pinyin.

const input = document.getElementById("example5");
new Toneletter(input, { lang: 'cn' }).observe();

  • Press '1'~'4' key behind a vowel to add a tone letter.
      tone 1 (ā), tone 2 (á), tone 3 (ǎ), tone 4 (à)
  • Type 'U' key to put a phonetic letter 'ü'