11543 sujets

JavaScript, DOM et API Web HTML5

Synchro audio + texte

Hello

j'ai un audio, et un texte correspondant à la retranscription de cet audio en texte donc.
L'idée serait de changer la couleur du texte au fur et à mesure que l'audio défile, un peu comme un système de sous-titres mais où tout le texte est visible.

L'idée serait donc de faire quelque chose d'approximatif en calculant la durée de l'audio, et de créer une animation qui change la couleur du texte, en appliquant la durée de l'audio à l'animation.

Je reste un peu confus pour réaliser ça, si vous avez des idées ou des infos, je suis preneur.

Merci
Salut,
ce texte devrait défiler sous la barre audio, comme les sous-titres en vidéo, je suppose ? Ou alors autre chose, je n'ai pas trop compris cette partie.
La grosse difficulté sera de lancer le défilement du texte en même temps que l'audio. Je crois que je m'étais frotté à ce problème, il y a assez longtemps, lorsque je commençais dans le web. Je n'ai jamais tenté depuis.
Ça doit tout à fait être possible avec les @keyframes et la fonction css animation. En jouant sur la durée et éventuellement l'écartement des mots du texte pour une meilleure synchro. On peut lancer une @keyframe avec Javascript, qui lancerait aussi l'audio en même temps.
Sinon, tu peux faire comme si l'audio était une vidéo et mettre le texte en sous-titres.
Quelques précisions supplémentaires serraient les bienvenues, avec un exemple, même pris ailleurs.
Hello

alors je pense avoir trouvé, mais ce sera de la fausse synchro.

Je vais diviser mon texte en span, 1 span = 1 mot. Puis une anim sur chaque span pour changer sa couleur, le temps de l'anim sur chaque span correspondra à la durée totale de l'audio divisée par le nombre de span. Et les anim se déclencheront span par span, avec un offset donc.

Apres il y a des API pour faire de la vraie synchro, mais il faut les timecode issus de l'audio de chaque mot, travail d'arrache-pied...
Hello!

Si j’ai bien compris tu veux faire quelque chose qui ressemble à un karaoke. Ça dépends pas mal du format de ta transcription. Les sous-titres par exemple, contiennent un timecode pour chaque phrase, mais pas pour chaque mot individuellement. Ça peut être une bonne idée de travailler ce format en amont pour faciliter ton implémentation Smiley smile
Alors effectivement on est comme sur du karaoké.

Finalement, j'ai pu importer mon audio dans une app en ligne speech to text qui m'a retranscrit l'audio en texte donc, qui me génère un fichier .json avec tous les mots et leur timecode. J'ai bouclé mon json pour avoir ma phrase affichée avec chaque mot dans un <span data-start="son_timecode">mot</span>
Puis via js j'ai pu synchroniser la lecture de l'audio et la mise en couleur du mot en cours.
Meilleure solution
Bonsoir,

J'arrive un peu tard, mais il serait sans doute instructif de s'intéresser au format DAISY et au SMIL sous-jaçant pour voir comment on les crée. Le format DAISY est un format de livre électronique utilisé depuis des années pour les livres accessibles, en audio, et en audio+texte synchronisé notamment. C'est connu des milieux DV, mais aussi des dyslexiques (ou en tout cas ça a aussi été conçu pour).


Je ne connais évidemment pas tout le contexte de ton projet, mais ça peut être extrêmement important pour l'utilisateur de pouvoir lire le contenu dans un format connu, et donc le charger à sa guise dans une app familière, au lieu d'avoir un système directement dans le navigateur qui, sans vouloir dénigrer ton travail, a toutes les chances d'être moins accessible / moins pratique à consommer.
Hello QuentinC

c'est en fait juste une page web destinée pour des personnes en formation dans l'hôtellerie de luxe, c'est une demande du client de l'agence pour laquelle j'ai presté, je ne te cache pas que je n'en sais pas plus Smiley smile
Prévenir un modérateur
Répondre au sujet
Aller à