Postawiłem sobie zadanie napisania głosu działającego w tekście po chińsku.To dość prosta sprawa, jeśli masz już doświadczenie, ale gdy zaczniesz to robić od zera, nabierzesz tyle problemów, że chęć może zniknąć znacznie wcześniej.JavaScript to bardzo funkcjonalny język, wydaje się, że ma wszystko, czego dusza zapragnie.
Rzućmy okiem na ostateczną wersję, którą możesz wkleić do DevTools i sprawdzić.
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 - w ten sposób język chiński jest oznaczony w trzewiach przeglądarki.W naszym programie wyszukujemy w przeglądarce głos języka chińskiego i próbujemy odtworzyć naszą frazę.Praktycznie nie różni się to od wyrażania w jakimkolwiek innym języku.Ale jest tutaj kilka niuansów.Filtrując szereg dostępnych języków natykamy się na 2 chińskie głosy zh-CN.Zero będzie głosem kobiecym, a pierwszym głosem męskim.
Płeć żeńska
utterance.voice = voices.filter(function(voice) { return voice.lang == 'zh-CN'; })[0];
Męski
utterance.voice = voices.filter(function(voice) { return voice.lang == 'zh-CN'; })[1];
Ponadto działanie głosowe będzie się różnić w zależności od przeglądarki i urządzenia.Przeglądarka Chrome ma swoje własne głosy, przeglądarka Edge ma zupełnie inne, nawiasem mówiąc, przyjemniejsze, a przeglądarka Opera w ogóle nie ma głosów, więc nie będzie działania głosowego.
Ten kod można zawiesić na przycisku i wypowiedzieć coś własnego.
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);
}
i kod przycisku:
<button onclick="say(1)">👨🔉</button>
Nie ma innych problemów z aktorstwem głosowym.O tak, jak to wszystko działa na smartfonach.Tak, świetnie, zwłaszcza w mobilnej przeglądarce Edge.Swoją drogą, w oparciu o tę technologię staram się zrobić mikroserwis do nauki języka chińskiego, oto on:
http://jkeks.ru/china .Wszystko jest zaimplementowane dokładnie tak, jak tutaj opisałem.