0
165
ViewsAgregue texto a voz a cada nodo de texto del sitio web creado con React
El usuario puede activar TTS desde un botón y luego, cuando pasa el cursor sobre un texto, se debe pronunciar el texto. Ejemplo es este sitio web aquí https://www.monshaat.gov.sa/en
-> Activas el texto a voz desde el botón
-> Cada vez que se desplaza sobre un elemento, el color de fondo cambia y se pronuncia el texto 
Cualquier idea de formas limpias en las que pueda implementar esto en un gran proyecto de reacción.
1 answers
Answer question0
Eche un vistazo a la API web de síntesis de voz:
https://www.webcodingcenter.com/web-apis/Web-Speech-APIs
Algo como esto:
var t = document.getElementsByClassName('readOut'); for (let i = 0; i < t.length; i++) { t[i].addEventListener('mouseover', readout_handler); } function readout_handler(e){ let text = e.target.textContent; //... }Si usa React, puede simplemente crear un elemento ReadOut genérico y luego implementar el evento mouseover directamente, así:
function ReadOut(props){ return <p onMouseOver={()=>readout_handler(props.children)}}>{props.children}</p>; }Luego simplemente inclúyalo en su aplicación React en todas partes:
<ReadOut>Hello there!</ReadOut>No he probado todos los códigos anteriores, pero no debería estar lejos de la respuesta correcta.