В настоящее время я делаю простое приложение, в котором говорится, используя API речи. Я хочу выделить слова (жирные), как они говорят. В настоящее время у меня есть очень базовая реализация, выполняющая это с использованием события «Onboundary». Тем не менее, мне интересно, есть ли это лучший /приятный способ сделать это, так как моя реализация основана на нескольких предположениях. < /P>
var words;
var wordIdx;
var text;
var utterance = new SpeechSynthesisUtterance();
utterance.lang = 'en-UK';
utterance.rate = 1;
window.onload = function(){
document.getElementById('textarea').innerText = 'This is a text area. It is used as a simple test to check whether these words are highlighted as they are spoken using the web speech synthesis API (utterance).';
document.getElementById('playbtn').onclick = function(){
text = document.getElementById('textarea').innerText;
words = text.split(' ');
wordIdx = 0;
utterance.text = text;
speechSynthesis.speak(utterance);
}
utterance.onboundary = function(event){
var e = document.getElementById('textarea');
var it = '';
for(var i = 0; i < words.length; i++){
if(i === wordIdx){
it += '' + words + '';
} else {
it += words;
}
it += ' ';
}
e.innerHTML = it;
wordIdx++;
}
}
Подробнее здесь: https://stackoverflow.com/questions/381 ... are-spoken
