FlashReader
Lector que muestra un archivo de texto palabra a palabra al ritmo que establezcas y recuerda dónde lo dejaste.
- Publicado
- Datos recogidos
- Ninguno
- Precio
- Gratis
Sobre mí
FlashReader abre un archivo .txt local y lo muestra palabra a palabra en el centro de la pantalla, cada 500 ms por defecto. El lector establece el intervalo, el tamaño de letra, el color de letra y el color de fondo. El texto completo y la posición de la palabra permanecen en el dispositivo, así que tras reiniciar el mismo archivo se reabre en la misma palabra.
Esta página describe la versión web en flashreader.fun: una página HTML con JavaScript integrado. El script no hace peticiones de red y no tiene analítica. La app de Android en Google Play es una compilación aparte cuyo código fuente no se cubre aquí.
La ingeniería es pequeña y concreta: un temporizador que puede cambiar de ritmo sin perder la palabra, un almacenamiento que sobrevive a un reinicio y ajustes que se aplican y se guardan en el momento en que cambian.
FlashReader · lectura enfocada
qué se resolvió
Bucle de palabras
en el productoQué aportaEl usuario elige un archivo de texto y lo lee palabra a palabra a un ritmo uniforme, y puede cambiar la velocidad a mitad del texto sin perder el punto en que está.
- Problema
- Las palabras deben cambiar a un intervalo uniforme establecido por el usuario, y el intervalo debe poder cambiarse en mitad de un texto sin perder la palabra actual.
- Solución
Un temporizador de intervalo mueve un índice por un array de palabras. Un cambio de velocidad detiene ese temporizador y arranca uno nuevo desde el mismo índice.
- Stack
Convertir un archivo de texto elegido en una secuencia de palabrasLeer el archivo como UTF-8 con FileReader y dividirlo por espacios en un array
El archivo viene de un input de archivo estándar limitado a .txt, así que la página no necesita acceso al sistema de archivos. action_load_file() lo lee con readAsText(file, 'UTF-8') y divide el resultado por espacios simples; la puntuación se queda con su palabra. El texto sin procesar también se pasa a saveFileContent() para la siguiente sesión.
Mostrar una palabra por tick y no ejecutar nunca dos temporizadores a la vezread() termina si ya hay un temporizador en marcha; cada tick muestra una palabra y guarda el siguiente índice
read() se niega a empezar sin texto cargado ('Load text file to read!') y termina antes de tiempo cuando is_going está activado, de modo que pulsar reproducir dos veces no puede iniciar un segundo intervalo. Cada tick escribe text[position] en #text-zone y guarda position + 1. togglePlayPause() alterna entre read() y pause() y actualiza el botón de reproducir.
Un cambio de velocidad en mitad de la lectura debe aplicarse de inmediatoDetener y reiniciar el intervalo con el nuevo periodo, conservando el índice de la palabra
setInterval no puede cambiar su periodo. updateReadingSpeed() y el manejador de change del campo de velocidad llaman a pause() y luego a read() cuando la lectura está activa. El índice vive en el objeto lector, así que el temporizador reiniciado continúa con la siguiente palabra. Un valor escrito menor que 1 se restablece al valor por defecto de 500 ms.
Fin del texto: detenerse limpiamente o empezar de nuevoAl final, o bien detenerse con 'THE END!' y volver a la palabra 0, o volver a la palabra 0 y seguir
El tick comprueba si hay una palabra undefined en el índice actual. Con Loop desactivado, borra el temporizador, muestra 'THE END!', guarda la posición 0 y devuelve el botón de reproducir a su estado inicial. Con Loop activado, pone el índice a 0 y continúa. La opción Loop se guarda como el resto de los ajustes.
Reanudar tras un reinicio
en el productoQué aportaCierras la app y vuelves más tarde: el mismo texto se abre en la misma palabra, con el mismo tamaño de letra y velocidad, todo guardado en el dispositivo.
- Problema
- El texto completo, la posición de la palabra y los ajustes de visualización deben sobrevivir al cierre de la página o de la app, sin servidor.
- Solución
El texto va a IndexedDB, la posición y los ajustes a localStorage, y ambos se vuelven a leer al arrancar.
- Stack
Un libro entero no tiene cabida en localStorageGuardar el texto sin procesar en IndexedDB bajo una única clave fija; mantener los valores pequeños en localStorage
saveFileContent() coloca el texto en el almacén 'files' de la base de datos 'flashreader' (versión 2) con el id 'flashreader_last_text', de modo que un archivo nuevo sustituye al anterior. onupgradeneeded crea el almacén solo si falta, así que abrir sobre una versión anterior no falla.
La posición, los colores, el tamaño, la velocidad, el bucle y el nombre del archivo se quedan en localStorage, donde las lecturas al arrancar son síncronas.
Reabrir el último archivo en la palabra donde se detuvo la lecturaGuardar el índice con cada palabra mostrada; al arrancar, recargar el texto y ese índice
set_position() escribe el índice en localStorage (fr_position) en cada tick, así que una app cerrada o terminada a la fuerza pierde como máximo una palabra. El constructor lee primero el índice; en DOMContentLoaded, getFileContent() carga el texto desde IndexedDB, lo divide de nuevo y muestra 'The last file, <name>, has been loaded' con una indicación para pulsar reproducir.
Los valores almacenados pueden faltar o estar dañadosRestaurar cada valor por separado con valores de reserva: posición 0, tamaño 48 px, velocidad 500 ms
Cada clave se lee y se aplica por separado, así que un valor erróneo no bloquea el resto. Una posición no numérica pasa a ser 0, un tamaño de fuente que se interpreta como 0 vuelve a 48 px, una velocidad que se interpreta como 0 vuelve a 500 ms. Los colores se guardan sin '#' y se restauran con él, y después se aplican al texto y al fondo de la página.
Pantalla y controles
en el productoQué aportaEl tamaño de letra y los colores cambian durante la lectura, los atajos de teclado controlan la reproducción en un navegador, y el lector puede retroceder diez palabras o saltar a cualquier palabra.
- Problema
- El tamaño de letra y los colores deben poder cambiar durante la lectura, y en un navegador de escritorio la reproducción debe poder controlarse desde el teclado.
- Solución
Los campos de la barra de herramientas aplican y guardan cada cambio al instante; en el navegador, los atajos de teclado llaman a los mismos métodos del lector.
- Stack
El tamaño de letra y los colores deben aplicarse al instante y persistirLos manejadores de change establecen el estilo directamente y guardan el valor; un tamaño menor de 8 px pasa a ser 8
El manejador del color de fuente establece el color del texto de #text-zone, el manejador del fondo establece el fondo del body y el manejador del tamaño establece font-size en px con un mínimo de 8. Cada manejador escribe su valor en localStorage en el mismo paso, así que no hay una acción de guardado aparte.
En el navegador, el control por teclado no debe desplazar la página durante la lecturaEspacio, F, Arriba y Abajo llaman a acciones del lector y cancelan el comportamiento por defecto del navegador
En la versión de navegador, Espacio alterna reproducir y pausar, F alterna la pantalla completa, Arriba hace las palabras más rápidas en 10 ms con un mínimo de 50 ms y Abajo más lentas en 10 ms. preventDefault() impide que el navegador se desplace o pulse un control enfocado. Los cambios de velocidad pasan por updateReadingSpeed(), así que un temporizador en marcha se reinicia al nuevo ritmo.
El lector se perdió algunas palabras y quiere volver atrásLa flecha izquierda (navegador) retrocede 10 palabras, con tope en 0; el campo de posición salta a cualquier palabra
skipBackwards() retrocede el índice 10, nunca por debajo de 0, muestra esa palabra de inmediato y guarda la posición. El campo de posición de la barra de herramientas acepta cualquier número de palabra; los valores negativos pasan a ser 0.
La pantalla completa funciona de forma distinta según el navegador y el contenedor de la appProbar las Fullscreen API estándar y con prefijo, y después un plugin Fullscreen de Cordova si la página encuentra uno
enterFullscreen() y exitFullscreen() recorren las variantes estándar, moz, webkit y ms. Cuando existe un objeto Fullscreen global, como con un plugin de pantalla completa de Cordova, también se llama a Fullscreen.show(). El botón y la tecla F comparten la misma comprobación de las cuatro variantes de fullscreenElement.
Cifras
del producto- Ritmo por defecto 500 ms por palabra 120 palabras por minuto.
- Ritmo más rápido 50 ms por palabra Hasta 1,200 palabras por minuto desde el teclado.
- Paso de velocidad 10 ms Teclas de flecha arriba y abajo.