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

Поставив я завдання написати озвучку тексту китайською мовою.Справа ця досить проста, якщо вже мати досвід, проте коли починаєш робити це з нуля збереш стільки проблем, що бажання може зникнути набагато раніше.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 браузері.До речі на базі цієї технології я намагаюся зробити мікросервіс для вивчення китайської мови, ось він: