Infografía animada · FocusLec

Cómo FocusLec sigue la voz

La frase “Escucha, enfoca, entiende.” recorre la aplicación en catorce pasos: sale del fichero, la pronuncia el motor de voz del sistema y vuelve a la pantalla, donde se marca cada palabra mientras suena.

Se puede pausar y avanzar o retroceder paso a paso con los botones o con las flechas del teclado. En el móvil se lee mejor a pantalla completa.

Pantalla completa ↗

Cómo está hecha

Los rangos salen del código. Escucha 0–7, enfoca 9–15 y entiende 17–25 son lo que devuelve tokenizar() de FocusLec para esa frase. En la versión en inglés: Listen 0–6, focus 8–13 y understand 15–25.
Las llamadas tienen su nombre real. documentoDesdeTexto, reproducirDesde, palabraEnIndice y emitirPosicion son funciones de la aplicación; onRange y onDone, los avisos que manda el adaptador de voz.
Todo se mide en unidades UTF-16. Cada palabra guarda dónde empieza y acaba en esas unidades porque son las mismas en las que el motor de voz dice qué está pronunciando. Para pasar del fragmento al documento, el adaptador solo suma offsetBase.
Una frase sola es el caso sencillo. Aquí el fragmento abre el documento, así que offsetBase vale 0 y cada aviso cae justo en su palabra. Si un aviso llegara desplazado, el motor de sincronización buscaría la palabra cercana por su texto.
La fuente es un solo fichero, sin bibliotecas. Es un SVG de 1080 × 1350 que dibuja JavaScript. Cada fotograma se calcula a partir del tiempo; por eso el vídeo para redes se graba fotograma a fotograma.
Más contexto. La arquitectura de FocusLec, el modelo de documento y los diagramas de la sincronización están en Cómo está hecho.