Синтез речи API выделяет слова, когда они говорят ⇐ Html

[Anonymous]

В настоящее время я делаю простое приложение, в котором говорится, используя 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