Foros del Web » Programación para mayores de 30 ;) » Programación General »

Web inclusiva

Estas en el tema de Web inclusiva en el foro de Programación General en Foros del Web. Hola a todos, consulta alguien sabe si existe alguna librería o script para incluir en mi web y este me permita escuchar el texto que ...
  #1 (permalink)  
Antiguo 19/11/2020, 09:43
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.595
Antigüedad: 15 años, 5 meses
Puntos: 49
Web inclusiva

Hola a todos, consulta alguien sabe si existe alguna librería o script para incluir en mi web y este me permita escuchar el texto que está en la misma? se que existe https://www.readspeaker.com/es/ pero es de pago, habrá algo parecido pero de libre acceso.

Saludos cordiales.
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #2 (permalink)  
Antiguo 19/11/2020, 15:25
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.252
Antigüedad: 16 años
Puntos: 2111
Respuesta: Web inclusiva

Hay documentación en Mozilla; Web Speech API

Con un ejemplo al pie: HTML5-API-demos / demos / speech-synthesis-api-demo.html

Los tengo como referencia, espero te sean útiles.

---
además: tts web
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 19/11/2020, 15:37
 
Fecha de Ingreso: abril-2011
Mensajes: 141
Antigüedad: 9 años, 10 meses
Puntos: 53
Respuesta: Web inclusiva

Como indica Daniel Ulczyk, HTML5 tiene su propio API de síntesis de voz.

Adjunto un ejemplo rápido: https://jsfiddle.net/bef1wpLd/

Código HTML:
Ver original
  1. <div id="contenido">
  2.   <h1>Texto de ejemplo</h1>
  3.   <h2>
  4.   HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:
  5.   Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.
  6.   Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.
  7.   </h2>
  8. </div>
  9. <button onclick="sintetizador(document.getElementById('contenido').textContent)">Escuchar desde el principio</button>
  10. <button onclick="window.speechSynthesis.pause()">Detener audio</button>
  11. <button onclick="window.speechSynthesis.resume()">Continuar audio</button>

Código Javascript:
Ver original
  1. function sintetizador(texto){
  2.   window.speechSynthesis.cancel();
  3.   var msg = new SpeechSynthesisUtterance(texto);
  4.   window.speechSynthesis.speak(msg);
  5. }

Solo es cuestión de adaptarlo a tus necesidades.


Última edición por prueba230683; 19/11/2020 a las 15:51



La zona horaria es GMT -6. Ahora son las 18:50.