Озвучивание текста на Китайском языке

Задался я задачей написать озвучку текста на китайском языке. Дело это довольно простое, если уже иметь опыт, однако когда начинаешь делать это с нуля собереш столько проблемм, что желание может пропасть намного раньше. JavaScript очень функциональный язык, кажется в нем есть все что душе угодно.

Давайте посмотрим на конечный вариант который вы сможете вставить в DevTools и проверить.

var utterance = new SpeechSynthesisUtterance('菜');
var voices = window.speechSynthesis.getVoices();
utterance.voice = voices.filter(function(voice) { return voice.lang == 'zh-CN'; })[0];
window.speechSynthesis.speak(utterance);

zh-CN - так обозначается китайский язык в недрах браузера. В нашей программе мы ищем в браузере голос Китайского языка, и пытаемся воспроизвести нашу фразу. Это практически ничем не отличается оттого чтобы озвучивать любой другой язык. Но тут есть пара ньюансов. Фильтруя массив доступных языков мы встречаем 2 китайских голоса zh-CN. Нулевой будет женский голос, а первый это мужской голос.

Женский

utterance.voice = voices.filter(function(voice) { return voice.lang == 'zh-CN'; })[0];

Мужской

utterance.voice = voices.filter(function(voice) { return voice.lang == 'zh-CN'; })[1];

Кроме того озвучка будет отличаться от браузера к браузеру и от устройства к устройству. У браузера Chrome свои голоса, у браузера Edge совершенно другие, кстати более приятные, а в браузере Opera голоса вообще отсуствуют, поэтому озвучки не будет.

Данный код можно навешать на кнопку и озвучивать что-то свое.

function say(voiceId){
    let text = document.getElementById("pole").innerHTML
    console.log (text)
    var utterance = new SpeechSynthesisUtterance(text);
    var voices = window.speechSynthesis.getVoices();
    utterance.voice = voices.filter(function(voice) { return voice.lang == 'zh-CN'; })[voiceId];
    window.speechSynthesis.speak(utterance);
}

и код кнопки:

<button onclick="say(1)">👨🔉</button>

Других проблемм с озвучкой вообщем-то нет. Ах да, как все это работает на смартфонах. Да отлично, особенно в мобильном Edge браузере. Кстати на базе этой технологии я пытаюсь сделать микросервис для изучений китайского языка, вот он: http://jkeks.ru/china . Там все реализовано именно как я описал тут.