spoken word

Palabra hablada

Agregue texto a voz (TTS) al contenido, con controles de reproducción, destacado de lectura, soporte multilingüe y configuraciones para la tasa, el tono y la voz.

Colaboradores: Westonruter
Etiquetas: TTS, Síntesis del habla, texto a voz, audio, voz, lectura al día
Requiere al menos: 4.7
Probado hasta: 4.9
Etiqueta estable: 1.0.1
Licencia: MIT
Requiere PHP: 5.4

Descripción

Agregue texto a voz (TTS) al contenido, con controles de reproducción, destacado de lectura, soporte multilingüe y configuraciones para la tasa, el tono y la voz.

• Utiliza motor de texto a voz local en el navegador del usuario. Interfaces directamente con la API del navegador speechSynthesis . Cero solicitudes o dependencias externas.
• Las palabras se seleccionan/resaltan, ya que se les habla para que le permitan leer.
• Omita elementos de habla que no deben leerse, incluidos los superíndices de notas al pie (el elemento sup ).
• Las pausas de diferente longitud agregada son entre encabezados versus párrafos.
• Los controles permanecen a la vista durante la reproducción, con cada uno el texto actual que se habla persistentemente se desplaza a la vista. (Requiere soporte del navegador para position:sticky .)
• Los controles de retroceso/avance le permiten omitir al siguiente párrafo; Cuando no hable, el próximo párrafo para leer se seleccionará por completo.
• Seleccione texto para leer desde ese punto; Haga clic en el texto durante el discurso para cambiar inmediatamente la posición.
• Soporte multilingüe, permitiendo que el texto integrado con el atributo [lang] sean hablado por la voz apropiada (suponiendo que el usuario lo tenga instalado).
• Configuración para cambiar la voz predeterminada (para cada idioma), junto con la configuración para la tasa de discurso y su tono. (No es compatible con todos los motores). Se pueden hacer cambios mientras se habla.
• Golpee Escape para detenerse durante la reproducción.
• Las preferencias de voz se almacenan persistentemente en localStorage , con cambios sincronizados a través de Windows (de un sitio determinado).
• Capacidad para usar JS de manera independiente (como en Bookmarklet).
• Conocido por trabajar en las últimas versiones de escritorio de Chrome, Firefox y Safari. (Probado en OSX.) No funciona de manera confiable en los navegadores móviles/táctiles en Android o iOS, aparentemente debido a la API speechSynthesis (aún experimental) que no se implementa lo suficientemente bien en esos sistemas y/o la selección de rango programático no funciona de la misma manera que en el escritorio. Por estas razones, la funcionalidad está deshabilitada de forma predeterminada en los sistemas operativos móviles.

Pruébelo en un ejemplo independiente con algún contenido de prueba.

Configuración de temas

La configuración de la palabra hablada se presenta en un elemento dialog HTML5. Para los navegadores que aún no admiten esta función, el complemento agrupa el diálogo-polyfill. El polyfill solo se incluye si se detecta, el navegador no admite dialog de forma nativa. La inclusión del polyfill se puede deshabilitar agregando lo siguiente a su tema o complemento:

 add_filter ( ' spoken_word_include_dialog_polyfill ' , ' __return_false ' );

Para los temas que tienen un encabezado pegajoso (como el menú NAV en veinte diecisiete), es posible que deba agregar algunos CSS adicionales para asegurarse de que los controles de reproducción de posicionamiento pegajoso no se oculten detrás del encabezado pegajoso. Por ejemplo, en veintiete años, puede agregar lo siguiente al CSS personalizado en el personalizador:

 @media screen and ( min-width : 782 px ) {
	body : not (. admin-bar ) . spoken-word--active {
		top : calc ( 0.5 em + 70 px );
	}
	body . admin-bar . spoken-word--active {
		top : calc ( 0.5 em + 32 px + 70 px );
	}
}

Interno

Se puede utilizar un marcador para cargar la funcionalidad de la palabra hablada en cualquier sitio, incluso sitios no WordPress donde no está instalado el complemento. La clave es usar el contentSelector apropiado:

 ( ( ) => {
	const link = document . createElement ( 'link' ) ;
	link . rel = 'stylesheet' ;
	link . href = 'https://unpkg.com/spoken-word/css/style.css' ;
	document . head . appendChild ( link ) ;

	const script = document . createElement ( 'script' ) ;
	script . src = 'https://unpkg.com/spoken-word/dist/spoken-word.js' ;
	script . addEventListener ( 'load' , ( ) => {
		spokenWord . initialize ( {
			contentSelector : [ /* ? Amend as desired. */
				'.hentry' ,
				'.entry-content' ,
				'.h-entry' ,
				'.e-content' ,
				'[itemprop="articleBody"]' ,
			] . join ( ', ' )
		} ) ;
	} ) ;
	document . head . appendChild ( script ) ;
} ) ( ) ;

La función spokenWord.initialize() toma un objeto como su argumento que puede tener las siguientes propiedades:

 * @param {String} Contentselector - Selector CSS para encontrar los elementos para hablar.
 * @param {elemento} raíz - elemento raíz dentro del cual buscar contenido.
 * @param {object} ChunkifyOptions - Opciones pasadas en Chunkify.
 * @param {boolean} UsedShicons - si se debe usar Pashicons.
 * @param {object} DefaultUtTanceOptions - Opciones de expresión predeterminadas cuando ninguna se suministra desde LocalStorage.

El cuadro de diálogo y los controles se representan usando Preact. Para obtener una lista de todos los módulos utilizados por este complemento, consulte el paquete.json.

Este complemento se desarrolla en GitHub donde se puede ver la fuente. Informe los problemas allí. Solicitudes de bienvenida. El paquete spoken-word también se publica en NPM.

Capturas de pantalla

Las palabras se resaltan (seleccionadas) a medida que se hablan.

Cambiar la tasa, el tono y las voces utilizadas en el habla.

Paste adelante al párrafo deseado con controles o mediante la selección con el cursor.

Colegio de cambios

1.0.1 (2018-01-21)

Deshabilite la funcionalidad en dispositivos Android e iOS de forma predeterminada.

1.0.0 (2018-01-20)

Liberación inicial.