react speech highlight demo
1.0.0
Le point culminant de la parole React / Vanilla est une bibliothèque puissante pour intégrer le texte à la dissection et la mise en évidence en temps réel et phrase dans vos applications Web. Il prend en charge les fichiers audio , l' API de texte vocale et l' API de synthèse de la parole Web , ce qui le rend idéal pour créer des expériences utilisateur interactives, accessibles et dynamiques.
? Essayez la démo: react discours highlight
Nous soutenons la mise en œuvre à l'aide de Vanilla JS. Ce package a une taille de backle de 45 Ko. Vous pouvez facilement combiner cette bibliothèque avec votre site Web, peut-être votre site Web à l'aide de jQuery
Lisez l'api_vanilla.md pour voir le différent.
Essayez le discours de la démo vanille
Regardez la vidéo YouTube sur la mise en évidence de la parole de vanille de mise en œuvre pour la tâche de texte JavaScript.
Construit avec React Native CLI. Essayez l'application Android démo
Voulez-vous une autre implémentation? Demandez-moi juste via Discord: Albirrkarim
Ceci est la documentation de la version Web
Table des matières
Récemment, je souhaite implémenter le texte à la dissection avec la mise en surbrillance du mot et de la phrase qui sont prononcés sur mon site Web.
Ensuite, je recherche sur Internet. Mais je ne trouve pas le package NPM pour résoudre tous les problèmes TTS
Je veux juste un package puissant cette qualité vocale flexible et bonne.
Dans l'ensemble, la tâche de texte à la parole est livrée avec des problèmes (voir le détail sur Problems.md), que ce soit à l'aide de la synthèse de la parole Web ou du fichier audio.
Utilisation de la discours WebSynthesis
Ils ont des problèmes de robot comme le son, les appareils pris en charge disponibles, etc.
Utilisation de l'API de synthèse de texte à dispection d'abonnement payant
Lorsque nous parlons de bons son / humains comme des voix, les modèles AI L'inférence devrait s'impliquer. Cela n'a donc pas de sens si le côté du client.
Ensuite, le fournisseur API de synthèse de la parole comme ElevenLabs, Murf Ai, Open AI, Amazon Polly et Google Cloud jouent leurs rôles.
Mais ils ne fournissent pas le package NPM à mettre en évidence.
Ensuite, j'ai trouvé un discours. Mais je ne trouve aucun document sur l'utilisation d'un package NPM qui s'intègre à leur service. Il s'agit également d'un service d'abonnements payant.
En recherchant à nouveau, j'ai trouvé ElevenLabs, c'est gratuit si le 10000 caractères / mois et je réinitialise le mois prochain. Cool non? Je décide donc de l'utiliser comme API de synthèse de la parole dans mon projet. Cette plate-forme ne fournit pas non plus le package REACT NPM pour mettre en surbrillance leur audio, mais ils fournissent un son de sortie de streaming qui peut être utilisé pour produire "lorsque les mots sont prononcés dans un audio" (horodatage de transcription) comme quelqu'un fait à propos de cette chose.
En production, vous devez faire du calcul des coûts , quel fournisseur d'API de service TTS que vous devez choisir. Les services qui ont des capacités en streaming audio promettent un mot de surbrillance prometteur. mais a également un prix élevé. L'API de service TTS bon marché n'a généralement pas beaucoup de fonctionnalités.
Les Elevenlabs ont produit une voix de bonne qualité et de nombreuses fonctionnalités, mais quand vient pour la production, ils sont plus chers se comparent aux AI ouverts, en production, le coût est important.
Donc, je décide de faire ce package NPM qui combine diverses méthodes ci-dessus pour atteindre toutes les bonnes choses et jeter les mauvaises choses. Toute logique est effectuée du côté client, regardez la vue d'ensemble ci-dessus. Pas besoin d'utiliser l'hébergement backend avancé.
Mon package combine le discours Web intégré et le fichier audio (facultatif) à exécuter.
Lorsque vous utilisez Prefer / Fallback au fichier audio, vous pouvez obtenir un son de haute qualité et supprimer tout le problème de la compactabilité de la discours Web intégrée.
Comment pouvez-vous obtenir automatiquement le fichier audio d'un texte? Vous pouvez utiliser ElevenLabs, Murf Ai, Open AI, Amazon Polly et Google Cloud ou toute autre API TTS tant qu'ils peuvent produire un fichier audio (MP3, MP4, WAV, etc ...) pour le détail Voir le Audio_File.MDMD . Dans le site Web de démonstration, je vous donne un exemple en utilisant ElevenLabs et même vous pouvez essayer votre propre fichier audio sur ce Web de démonstration.
Ce package ne prend que le texte d'entrée et le fichier audio, vous pouvez donc flexible pour utiliser n'importe quelle API TTS qui peut produire un fichier audio, un fichier coûteux ou même bon marché lorsque vous considérez le coût.
Comment ce package connaît le mot ou la phrase parlé de l'audio joué? Ce package peut détecter le mot et la phrase prononcés du côté client.
Ce package est une fois un salaire. Pas d'abonnement. Qui aime l'abonnement? Je ne le fais pas aussi. Voir le comment acheter ci-dessous.
Lorsque vous êtes entrepreneur, je suis sûr que vous avez un cas de usages fous pour ce package.
Blog interactif
Imaginez que vous avez un long article et que vous ayez un bouton TTS, puis joué le texte dans la parole et que les utilisateurs peuvent voir jusqu'où l'article a été lu. Votre article sera prêt SEO car ce package a une capacité de rendu côté serveur (SSR).
Web AI Avatar / NPC
Dans la démo que je fournis, vous pouvez voir l'avatar 3D de ReadyPlayer.me Can Alive en jouant à l'animation idle et leur bouche peut se synchroniser avec le texte en surbrillance en discours, car ce package a un état réactif qui représente un point de vue parlé actuel. La liste des vitesses que j'utilise dans la démo est Oculus ovr LipSync.
Application d'apprentissage des langues avec une vraie voix humaine
Regardez l'exemple 6 sur la démo. C'est un exemple d'utilisation de la voix humaine réelle pour le texte à la parole. Peut-être que votre langue locale n'est pas soutenue par l'API TTS. Vous pouvez utiliser ce package pour utiliser la vraie voix humaine. La vraie voix humaine est enregistrée par le vrai humain. La vraie voix humaine est plus naturelle que l'API TTS.
Lecteur de texte académique
Le problème lorsque nous faisons des TT sur le texte académique. Il contient des équations mathématiques, une formule, un symbole que le terme montré est différent avec leur prononciation voir. Nous faisons donc un moteur de correction de prononciation en utilisant l'API d'IA ouvert pour réfléchir à ce que le terme devrait prononcer.
Présentation de la relation et le niveau des mots mettant en évidence la transcription YouTube
Il a YouTube Iframe, et la transcription YouTube à droite, lorsque vous jouez la vidéo YouTube, la transcription sera mise en évidence. La mise en évidence est basée sur l'heure actuelle de la vidéo lue. Ce package suit le temps.
Relation Fonction de surbrillance - Lorsque vous planez dans un mot, le mot connexe sera également mis en évidence. Exemple Lorsque vous planez dans le mot chinois, le mot pinyin et anglais sera également mis en évidence et vice versa. Comment cela peut-il? voir.
Lecteur vidéo avec sous-titre généré automatique
Case: vous avez juste un fichier audio ou vidéo sans transcription de texte. Notre package peut générer la transcription à partir du fichier audio. ou même sur la transcription à une autre langue. Le sous-titre peut être mis en évidence lorsque la vidéo est lue, et peut-être qu'il veut afficher deux sous-titres de langue différents à la fois. et mettent également en évidence les deux en fonction de la signification des mots.
Sur cet aperçu de la vidéo au-dessus de la vidéo originale de la vidéo est en italien, et je montre également la traduis en anglais. Et le système est mis en évidence à la fois en fonction du sens.
Mot italien bella a un sens en anglais beautiful
Accédez à cette page de démonstration vidéo.
Votre cas d'utilisation ici
Demandez-moi simplement ce que vous voulez faire, l'architecture du package est évolutive pour faire diverses fonctionnalités.
Voir api.md et example_code.md qui contiennent un exemple de code simple.
L'exemple complet et l'exemple d'implémentation consiste à utiliser le code source du site Web de démonstration. Le code source du site Web de démonstration est inclus lorsque vous achetez ce package.
Ce package est écrit avec TypeScript, vous n'avez pas à lire tous les documents ici, car ce package prend désormais en charge JS DOC et VS Code Intellisense, qu'est-ce que c'est? C'est simplement lorsque vous survolez votre souris dans une variable ou une fonction par rapport au code affichera une fenêtre contextuelle (tutoriel simple) en quoi est la fonction, des exemples, des paramètres, etc ...
Utilisez simplement le code source du site Web Demo, vous pouvez littéralement comprendre simplement le package.
ChangeLog contient des informations sur la nouvelle fonctionnalité, Améliorer la précision, corriger le bug et ce que vous devez faire lorsque la version est mise à jour.
Voir Changelog.md
Il n'y a pas de remboursement.
J'adore les commentaires de mes clients. Vous pouvez écrire sur l'onglet Issue, donc lorsque j'ai le temps, je peux essayer de résoudre ce problème et de livrer pour la prochaine mise à jour.
Vous vous inquiétez toujours? Voir les critiques sur la production
Eh bien, j'ai besoin d'argent pour financer la recherche, vous savez que la fabrication d'un forfait complexe coûte beaucoup de temps et bien sûr de l'argent.
Faire les moteurs LLM qui combinent l'ingénierie rapide et l'algorithme efficace pour économiser le coût de l'API AI ouvert. Besoin d'être testé et le test est répété qui coûte l'appel de l'API.
De plus, je soutiens via le chat privé en direct avec moi via Discord (nom d'utilisateur: albirrkarim), y a-t-il des services en faisant cela?
Ce package est un package base qui peut être utilisé pour divers cas d'utilisation. J'ai gagné beaucoup d'argent avec un forfait. La limite est votre compétence d'entrepreneuriat.
Avec le prix plus élevé, je maintiens la rareté de la fonctionnalité.
Dites-moi vos problèmes ou vos difficultés, je vais vous montrer le moyen de résoudre ce problème.
Je m'apporte un soutien en temps réel avec Discord.
Achetez-le. Retirez le mal de tête. Et vous pouvez vous concentrer sur votre projet.
Oui, si vous êtes étudiant ou enseignant, vous pouvez obtenir une remise. Montrez-moi simplement votre carte d'étudiant ou votre carte enseignante.
Oui, si vous m'aidez à voter ce package sur la chasse aux produits
Vous pouvez voir les documents de ce dépôt, et ce package est écrit avec TypeScript, et testé à l'aide de la plaisanterie pour s'assurer la qualité.
Vous n'avez pas à lire tous les documents ici, car ce package prend maintenant en charge vs code Intellisense, qu'est-ce que c'est? C'est simplement lorsque vous survolez votre souris dans une variable ou une fonction par rapport au code affichera une fenêtre contextuelle (tutoriel simple) en quoi est la fonction, des exemples, des paramètres, etc ...
Utilisez simplement le code source du site Web Demo, vous pouvez littéralement comprendre simplement le package.
Oui, il suffit de demander au chat GPT et d'expliquer vos problèmes.
Exemple :
"Mon projet utilise WebPack, le code utilise JSX, je veux utiliser du code TSX à côté du JSX, comment puis-je?"
Goto the Vanilla Speech Highlight
Je fais une démonstration pour la sortie du vide dans Console.log. Ouvrez simplement la console du navigateur et jouez l'exemple audio préféré (anglais). Et vous verrez le mot et la viséation dans le calendrier actuel des TTS joués.
Juste voir la démo
Essayez d'utiliser Prefer ou Fallback dans le fichier audio Voir Audio_file.md
ou
Essayez de définir la synthèse ou le langage de la parole dans votre appareil.
Si vous utilisez un smartphone (Android):
Assurez-vous d'installer la reconnaissance et la synthèse vocales
Si l'étape 1 ne fonctionne pas. Essayez de télécharger Google Keyboard. puis définir la langue de dictée. Attendez quelques minutes (votre appareil téléchargera automatiquement la voix), puis redémarrez votre smartphone.
Votre appareil téléchargera d'abord cette voix. Ensuite, votre appareil aura cette voix localement.
Essayez d'utiliser Prefer ou Fallback dans le fichier audio Voir Audio_file.md
Oui, voyez
Ce package a éventuellement exigé une API AI ouverte pour mieux faire la tâche de texte vocale (résoudre de nombreux problèmes que j'ai écrits dans des problèmes.md).
Mais si vous ne voulez pas utiliser l'API AI Open, cela peut toujours fonctionner. Voir la FAQ sur quelle dépendance ce package utilise?
Dépendances NPM:
Pour React Speech Highlight: Voir le package.json dans ce dépôt. Consultez les peerDependencies Une fois que vous aurez créé ce package, vous n'aurez besoin que de package NPM qui se trouve dans ces peerDependencies . Ne réagit que.
Pour Vanilla Speech Highlight: Aucune dépendance, utilisez simplement le fichier Vanilla JS.
Dépendances d'IA:
Ce package a éventuellement exigé une API AI ouverte pour mieux faire la tâche de texte vocale (résoudre de nombreux problèmes que j'ai écrits dans des problèmes.md).
Utiliser éventuellement n'importe quelle API TTS qui peut produire un fichier audio pour une meilleure qualité sonore. Comme ElevenLabs, Murf Ai, Open AI, Amazon Polly et Google Cloud ou toute autre API TTS tant qu'ils peuvent produire un fichier audio (MP3, MP4, WAV, etc ...) Pour le détail, voir le Audio_file.md.
Oui, voir le détail sur test.md
ou vous pouvez essayer d'utiliser le fichier préféré ou de secours dans le fichier audio voir audio_file.md
Ça marche juste. Une explication simple est dans l'introduction ci-dessus.
L'architecture évolutive, demandez-moi simplement quelle fonctionnalité vous voulez.
Voir llm_engine.md
Non, car mon package gère tout le système de lots, le système de prononciation et la fourniture de texte afin que l'API TTS puisse produire le fichier audio qui peut être utilisé pour la mise en évidence.
Vous pouvez simplement faire une stratégie de mise en cache pour mettre en cache la réponse de la demande. Pour API AI ouverte et API TTS pour le fichier audio.
Pour les développeurs individuels, le pigiste ou les petites entreprises.
Le prix est de 200 USD. Trop cher? Consultez le site Web de démonstration, peut-être qu'il y a une remise pour vous ou remplissez ce formulaire que vous êtes informé lorsqu'il y a des offres.
Après le paiement, vous serez invité à mon référentiel privé, où vous aurez accès pendant un an, y compris toutes les mises à jour pendant cette période.
Pour un accès continu dans les années suivantes, vous pouvez payer 50 $ USD par an pour rester dans le référentiel privé.
Ce que tu as
Le site Web de démonstration (Suivant JS)
Le package repo (react discours highlight)
Le dépôt de package (Vanilla Speech Highlight)
Je sais que ce package est complexe, certaines fonctionnalités nécessitant une architecture et une compétence de programmation avancée pour l'utiliser.
Je fais donc un tutoriel complet sur la façon d'utiliser ce type d'arme avancée.
De l'installation aux exemples d'implémentation avancée et plus encore.
Le prix est l'abonnement de 5 $ / mois. (À venir)
Pour vous qui ont déjà des affaires et qui veulent un package solide qui peut être utilisé à long terme.
Le prix est de 700 $ USD.
Ce que tu as
Le prix est de 150 $ USD.
Ce que tu as
Contient: la transcription de la relation YouTube est-ce que la transcription de génération automatique vidéo, Streaming TTS
Contient: Backenifier les moteurs LLM
React GPT Web Guide (100 $) + react Speech Highlight ( 200 $ ) (50 $) = 150 $
Ce que tu as
J'accepte divers moyens de paiement:
Sponsors GitHub
Choisissez l'onglet One Time, sélectionnez l'option et suivez les instructions suivantes de GitHub.
Ce package est donc la réponse pour vous qui recherchez:
