Intenté implementar la búsqueda de texto a voz en mi sitio web.
Lo que intenté hacer es simplemente resaltar el texto que está hablando.
Aqui esta mi codigo

this.utterThis.onboundary=function(event){
    if(event.name=='word'){
      this.progress_index=event.charIndex;
      console.log(textcontent.charAt(this.progress_index))
    }  

En el registro de la consola, lo que returns es el valor de índice de la primera palabra . Indica que todo el texto de la etiqueta p está en la variable textcontent.

var textcontent = (<HTMLIFrameElement>document.getElementById("description")).contentWindow.document.body.innerHTML;

Entonces, lo que realmente quiero es resaltar el texto que se dijo usando el valor de índice.
Nota: event.name devuelve word.

Gracias de antemano.

-1
Siddharth Kasundra 19 feb. 2018 a las 09:44

2 respuestas

La mejor respuesta

Lo resolví

this.utterThis.onboundary = function (event) {
    if (event.name == 'word') {
      this.progress_index = event.charIndex;

      this.remainingword = this.utterThis.text.substring(this.progress_index, this.utterThis.text.indexOf(" "));

      var html:string = this.utterThis.text.substring(this.progress_index, this.utterThis.text.indexOf(" ")).fontcolor("blue") + this.utterThis.text.substring(this.remainingword.length + 4);
      console.log(html);
      (<HTMLIFrameElement>document.getElementById("description")).contentWindow.document.body.innerHTML = html;
    }
  }.bind(this)
0
Siddharth Kasundra 26 feb. 2018 a las 08:26

Intenta de esa manera

var event = {
  name: 'highlightText',
  charIndex: 18
};
var text = 'lorem ipsum dolar highlightText sit amet';

var html = text.substring(0, event.charIndex)
            + '<span class="highlight">' + event.name + '</span>'
            + text.substring(event.charIndex + event.name.length, text.length);
            
document.body.innerHTML = html;
.highlight {
  background: yellow;
}
1
Yordan Nikolov 19 feb. 2018 a las 09:07