Reading text in Chinese

I set myself the task of writing the voice acting of the text in Chinese.This business is quite simple if you already have experience, but when you start doing it from scratch, you will collect so many problems that the desire can disappear much earlier.JavaScript is a very functional language, it seems to have everything your heart desires.

Let's take a look at the final version that you can paste into the DevTools and check it out.

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 - this is how the Chinese language is designated in the bowels of the browser.In our program, we search the browser for the voice of the Chinese language, and try to reproduce our phrase.It is practically no different from voicing any other language.But there are a couple of nuances here.Filtering the array of available languages ​​we come across 2 Chinese zh-CN voices.Zero will be a female voice, and the first is a male voice.

Female

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

Male

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

In addition, the voice acting will differ from browser to browser and from device to device.The Chrome browser has its own voices, the Edge browser has completely different, by the way, more pleasant ones, and the Opera browser has no voices at all, so there will be no voice acting.

This code can be hung on the button and voice something of your own.

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);
}

and button code:

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

There are no other problems with voice acting.Oh yes, how it all works on smartphones.Yes, great, especially in the mobile Edge browser.By the way, based on this technology, I'm trying to make a microservice for learning Chinese, here it is: