react speech highlight demo
1.0.0
React / Vanilla Speech Spotal es una poderosa biblioteca para integrar texto a voz y palabras / oraciones en tiempo real en sus aplicaciones web. Admite archivos de audio , la API de texto a voz y la API de síntesis de voz web , lo que lo hace ideal para crear experiencias de usuario interactivas, accesibles y dinámicas.
? Prueba la demostración: React Speech destacado
Apoyamos la implementación utilizando Vanilla JS. Este paquete tiene un tamaño de paquete de 45 kb. Puede combinar fácilmente esta biblioteca con su sitio web, tal vez su sitio web usando jQuery
Lea el api_vanilla.md para ver lo diferente.
Prueba el Demo Vanilla Discurso destacado
Mire el video de YouTube sobre la implementación de Vanilla Speech destacado para el texto de JavaScript a la tarea del habla.
Construido con la CLI nativa React. Prueba la aplicación Demo Android
¿Quieres otra implementación? Solo pregúntame por discord: Albirrkarim
Esta es la documentación para la versión web
Tabla de contenido
Recientemente, quiero implementar el texto a la voz con resaltar la palabra y la oración que se están hablando en mi sitio web.
Luego busco en Internet. Pero no puedo encontrar el paquete NPM para resolver todos los problemas de TTS
Solo quiero un paquete poderoso que sea una calidad de voz flexible y buena.
En general, la tarea de texto a discurso viene con problemas (consulte el detalle en problemas.md) ya sea utilizando la síntesis de discurso web o el archivo de audio.
Uso de Web SpeechSythesis
Tienen problemas de robot como sonido, dispositivos compatibles disponibles, etc.
Uso de la API de síntesis de texto a voz de suscripción pagada
Cuando hablamos de buen sonido / humano, como voces, la inferencia de modelos de IA debería involucrarse. Por lo tanto, no tiene sentido si lo hace en el lado del cliente.
Luego, el proveedor de la API de síntesis del habla como ElevenLabs, Murf Ai, Open Ai, Amazon Polly y Google Cloud desempeñan sus papeles.
Pero no proporcionan el paquete NPM para resaltar.
Entonces encontré Speechify. Pero no encuentro ningún documento sobre el uso de algún paquete NPM que se integre con su servicio. También este es un servicio de suscripciones pagas.
Buscando nuevamente, luego encontré once de once si es gratis si el personaje / mes de 10000 y se restablecerá el próximo mes. Genial, ¿verdad? Así que decido usar esto como API de síntesis de voz en mi proyecto. Esta plataforma tampoco proporciona el paquete React NPM para resaltar su audio, pero proporcionan audio de salida de transmisión que se puede usar para producir "cuando las palabras se hablan en algún audio" (marca de tiempo de transcripción) como alguien hace sobre esta cosa.
En la producción debe hacer el cálculo de costos , qué proveedor de API de servicio TTS debe elegir. Los servicios que tienen audio de transmisión de capacidades son una palabra destacada. pero también viene con alto precio. La API de servicio TTS barata generalmente no tiene muchas características.
Los ElevenLabs han producido una voz de buena calidad y muchas características, pero cuando se trata de la producción, más caros se compara con AI TTS abiertos, en la producción el costo es importante.
Entonces, decido hacer este paquete NPM que combina varios métodos anteriores para lograr todas las cosas buenas y arrojar las cosas malas. Toda la lógica se realiza en el lado del cliente, mire la descripción general anterior. No es necesario usar el alojamiento avanzado de backend.
Mi paquete combina el archivo de discurso web incorporado y el archivo de audio (opcional) para ejecutarse.
Cuando use el archivo preferir/retroceso a audio, puede lograr un sonido de alta calidad y eliminar todo el problema de compactación de compactación de la sántesis web incorporada.
¿Cómo puede obtener automáticamente el archivo de audio de algún texto? Puede usar ElevenLabs, Murf AI, Open Ai, Amazon Polly y Google Cloud o cualquier otra API TTS siempre que puedan producir archivos de audio (MP3, MP4, WAV, etc.) para ver el detalle, consulte el audio_file.md . En el sitio web de demostración, le proporciono un ejemplo utilizando ElevenLabs e incluso puede probar su propio archivo de audio en esa web de demostración.
Este paquete solo toma texto de entrada y archivo de audio, por lo que puede flexible para usar cualquier API TTS que pueda producir archivos de audio, el costoso o incluso barato cuando considera el costo.
¿Cómo conoce este paquete la palabra o oración de tiempo de reproducción de audio? Este paquete puede detectar la palabra hablada y la oración en el lado del cliente.
Este paquete es un pago único. Sin suscripción. ¿A quién le gusta la suscripción? Yo tampoco. Vea la forma de comprar a continuación.
Cuando eres emprendedor, estoy seguro de que tienes un caso de usos locos para este paquete.
Blog interactivo
Imagine que tiene un artículo largo y tiene un botón TTS y luego reproduce el texto para el habla y los usuarios pueden ver hasta dónde se ha leído el artículo. Su artículo estará listo para SEO porque este paquete tiene capacidad de representación del lado del servidor (SSR).
Web Ai Avatar / NPC
En la demostración que proporciono, puede ver el avatar 3D de ReadyPlayer.Me puede vivir con vida interpretando la animación idle y su boca puede sincronizarse con el texto resaltado al habla, porque este paquete ha reaccionado el estado que representa el Viseme hablado actual. La lista de Viseme que uso en la demostración es Oculus Ovr LipSync.
Aplicación de aprendizaje de idiomas con una verdadera voz humana
Mira el ejemplo 6 en la demostración. Es un ejemplo de uso de voz humana real para el texto al habla. Tal vez su idioma local no sea compatible con la API TTS. Puede usar este paquete para usar la voz humana real. La verdadera voz humana es grabada por el verdadero humano. La verdadera voz humana es más natural que la API TTS.
Lector de texto académico
El problema cuando hacemos TTS en texto académico. Contiene ecuaciones matemáticas, fórmula, símbolo de que el término mostrado es diferente con su pronunciación ver. Por lo tanto, hacemos un motor de corrección de pronunciación utilizando la API de IA abierta para pensar qué debe pronunciarse el término.
Resaltado de relación y resaltado de nivel de palabras de la transcripción de YouTube
Tiene YouTube iframe y la transcripción de YouTube a la derecha, cuando reproduce el video de YouTube, se resaltará la transcripción. El resaltado se basa en la hora actual del video reproducido. Este paquete se sigue a la hora.
Característica destacada de la relación: cuando se desplaza en alguna palabra, la palabra relacionada también se resaltará. Ejemplo Cuando se pase en la palabra china, la palabra pinyin y inglés también se resaltará y viceversa. ¿Cómo puede? ver.
Reproductor de video con subtítulos de generación automática
Caso: solo tiene un archivo de audio o video sin transcripción de texto. Nuestro paquete puede generar la transcripción del archivo de audio. o incluso transmitir la transcripción a otro idioma. El subtítulo se puede resaltar cuando se reproduce el video, y tal vez quiera mostrar dos subtítulos de lenguaje diferentes a la vez. y también resalte los dos basados en el significado de las palabras.
En ese video de vista previa arriba, el idioma original está en italiano, y también muestro la traducción en inglés. y el sistema es destacado tanto en función del significado.
Palabra italiana bella tiene significado en inglés beautiful
Vaya a esta página de demostración de video.
Tu caso de uso aquí
Solo pregúntame qué quieres hacer, la arquitectura del paquete es escalable para hacer varias funciones.
Consulte API.MD y Ejemplo_Code.md que contiene un código de ejemplo simple.
El código de ejemplo completo y el ejemplo de implementación es utilizar el código fuente del sitio web de demostración. El código fuente del sitio web de demostración se incluye cuando compra este paquete.
Este paquete está escrito con TypeScript, no tiene que leer todos los documentos aquí, porque este paquete ahora admite JS DOC y VS Code IntelliSense ¿Qué es eso? Simplemente es cuando pase el mouse en alguna variable o función vs código mostrará algo de ventana emergente (tutorial simple) de qué se trata, ejemplos, parámetros, etc.
Simplemente use el código fuente del sitio web de demostración, literalmente puede comprender el paquete.
ChangeLog contiene información sobre nuevas funciones, mejorar la precisión, arreglar el error y lo que debe hacer cuando se actualiza la versión.
Ver ChangeLog.md
No hay reembolso.
Me encantan los comentarios de mis clientes. Puede escribir en la pestaña Problema para que cuando tenga tiempo pueda intentar resolver eso y entregar para la próxima actualización.
¿Todavía te preocupa? Vea las reseñas en ProductHunt
Bueno, necesito dinero para financiar la investigación, usted sabe que hacer un paquete complejo cuesta mucho tiempo y, por supuesto, dinero.
Hacer los motores LLM que combinan ingeniería rápida y un algoritmo eficiente para ahorrar costo de API de IA abierto. Necesita ser probada y la prueba es repetidamente que cuesta la llamada API.
También brindo apoyo a través de chat privado en vivo a través de Discord (Nombre de usuario: Albirrkarim), ¿hay algún servicio haciendo eso?
Este paquete es un paquete base que se puede usar para varios casos de uso. Gané mucho dinero con el paquete. El límite es su habilidad de emprendimiento.
Con el precio más alto mantengo la escasez de la funcionalidad.
Dile tus problemas o dificultades para mí, te mostraré la forma de resolver eso.
Proporciono apoyo en tiempo real de mi parte con Discord.
Solo cómpralo. Retire el dolor de cabeza. Y puedes concentrarte en tu proyecto.
Sí, si eres estudiante o maestro, puedes obtener descuento. Solo muéstrame tu tarjeta de estudiante o tarjeta de maestro.
Sí, si me ayudas a votar este paquete en la búsqueda de productos
Puede ver los documentos en este repositorio, y este paquete está escrito con TypeScript y se prueba usando Jest para asegurarse de la calidad.
No tiene que leer todos los documentos aquí, porque este paquete ahora admite vs Code IntelliSense ¿Qué es eso? Simplemente es cuando pase el mouse en alguna variable o función vs código mostrará algo de ventana emergente (tutorial simple) de qué se trata, ejemplos, parámetros, etc.
Simplemente use el código fuente del sitio web de demostración, literalmente puede comprender el paquete.
Sí, puede, solo pregunte a Chat GPT y explique sus problemas.
Ejemplo :
"Mi proyecto es usar Webpack, el código está usando JSX, quiero usar el código TSX junto al JSX, ¿cómo puedo?"
GOTO el discurso de vainilla destacado
Hago una demostración para producir el Viseme a console.log. Simplemente abra la consola del navegador y reproduce el ejemplo de audio preferido (inglés). Y verá la palabra y el viseme en el momento actual de TTS jugado.
Solo mira la demostración
Intente usar el archivo prefer o alternativo a audio ver audio_file.md
o
Intente establecer la síntesis o lenguaje del habla en su dispositivo.
Si usa el teléfono inteligente (Android):
Asegúrese de instalar el reconocimiento y la síntesis de voz
Si el paso 1 no funciona. Intente descargar el teclado de Google. luego establecer el lenguaje de dictado. Espere unos minutos (su dispositivo descargará automáticamente la voz), luego reinicie su teléfono inteligente.
Su dispositivo descargará esa voz primero. Entonces su dispositivo tendrá esa voz localmente.
Intente usar el archivo prefer o alternativo a audio ver audio_file.md
Si, mira
Este paquete opcionalmente requirió Open AI API para una mejor tarea de texto a voz (resuelva muchos problemas que escribí en Problems.md).
Pero si no desea usar la API de AI abierta, aún puede funcionar. ¿Ves las preguntas frecuentes sobre qué dependencia usa este paquete?
Dependencias de NPM:
Para React Speech Lo destacado: vea el paquete.json en este repositorio. Consulte las peerDependencies Una vez que cree este paquete, solo necesitará un paquete NPM que esté en ese peerDependencies . Solo reaccionar.
Para el discurso de vainilla destacado: sin dependencia, solo use el archivo JS de vainilla.
Dependencias de IA:
Este paquete opcionalmente requirió Open AI API para una mejor tarea de texto a voz (resuelva muchos problemas que escribí en Problems.md).
Opcionalmente, utilizando cualquier API TTS que pueda producir archivo de audio para una mejor calidad de sonido. Al igual que ElevenLabs, Murf AI, Open AI, Amazon Polly y Google Cloud o cualquier otra API TTS siempre que puedan producir archivos de audio (MP3, MP4, WAV, etc.) para ver el detalle, consulte el audio_file.md.
Sí, vea el detalle en Test.md
o puede intentar usar el archivo prefer o de retroceso a audio. Consulte audio_file.md
Solo funciona. La explicación simple está en la introducción anterior.
La arquitectura escalable, solo pregúntame qué característica desea.
Ver llm_engine.md
No, debido a que mi paquete maneja todo el sistema de lotes, el sistema de pronunciación y proporcionando texto para que la API TTS pueda producir el archivo de audio que se puede utilizar para resaltar.
Puede hacer una estrategia de almacenamiento en caché para almacenar en caché la respuesta de la solicitud. Tanto para la API de AI abierta como para la API TTS para el archivo de audio.
Para desarrollador individual, profesional independiente o pequeña empresa.
El precio es de USD $ 200. ¿Demasiado caro? Consulte el sitio web de demostración, tal vez hay un descuento para usted o llene este formulario que le notifiquen cuando hay una oferta.
Después del pago, será invitado a mi repositorio privado, donde tendrá acceso durante un año, incluidas todas las actualizaciones durante ese tiempo.
Para el acceso continuo en los años siguientes, puede pagar USD $ 50 anualmente para permanecer en el repositorio privado.
Lo que tienes
El sitio web de demostración (Next JS Based)
El repositorio del paquete (React Speech Speaw)
El repositorio del paquete (resaltado del discurso de vainilla)
Sé que este paquete es complejo, algunas características que requieren arquitectura y habilidad de programación avanzada para usarlo.
Así que hago un tutorial completo de screencast sobre cómo usar este tipo de arma avanzada.
Desde la instalación hasta ejemplos de implementación avanzada y más.
El precio es suscripción $ 5 / mes. (Muy pronto)
Para usted que ya tiene negocios y desee un paquete sólido que se pueda usar a largo plazo.
El precio es de USD $ 700.
Lo que tienes
El precio es de USD $ 150.
Lo que tienes
Contiene: Transcripción de relación de YouTube destacada, transcripción de video generado automático, transmisión de TTS
Contiene: motores Backenify LLM
React GPT Web Guide ($ 100) + React Speech destacado ( $ 200 ) ($ 50) = $ 150
Lo que tienes
Acepto varios métodos de pago:
Patrocinadores de Github
Elija una pestaña de tiempo, seleccione la opción y siga las siguientes instrucciones desde GitHub.
Entonces este paquete es la respuesta para usted que busca:
