Comment puis-je mettre en surbrillance le texte – strictement chronométré – un Karaoke sans Flash sur une page Web. Quel choix technologique?

Je voudrais afficher le texte entier d'un poème, puis avoir le texte mis en surbrillance selon une séquence de temps préétablie. Quelque chose comme Karaoke, mais sans piste sonore. Un utilisateur pourrait ensuite le lire exactement au "bon" tempo.

Je pense que je peux générer une piste de sous-titres (par exemple, avec quelque chose comme Aegisum – bien que cela continue de s'écraser sur mon Mac) avec les données de synchronisation. Quelque chose ligne par ligne, par exemple:

1 00: 00: 18,067 -> 00: 00: 20,067 Twinkle twinkle little star

2 00: 00: 20,467 -> 00: 00: 22,467 Comment je me demande ce que vous êtes

… ou mieux encore, un mot ou un sylable à la fois.

Je ne veux pas utiliser Flash pour iPhone / iPhone.

Ma question exacte est celle-ci, car je suis un peu naïf: quelle serait la meilleure technologie à utiliser? Je n'ai pas besoin d'une solution exacte, juste quelques indications sur où je devrais concentrer mes efforts. Le Timed Text in HTML5 (TTML) a-t-il quelque chose que je pourrais utiliser à ce sujet? Ou SMIL?

Vous pouvez utiliser Javascript et CSS pour accomplir ce que vous voulez. Vous pouvez envelopper chaque mot dans une portée, puis appliquer des styles aux éléments de portée aux intervalles de temps appropriés. Si vous pouvez enregistrer des informations sur le moment où vous souhaitez que les mots correspondants soient mis en surbrillance, vous pouvez utiliser setInterval pour ajouter des styles aux moments appropriés. Si vous souhaitez utiliser les fonctionnalités HTML5, vous pourriez envisager d'utiliser Canvas ou SVG pour permettre des animations plus avancées.

Quelqu'un a posté un moteur d'affichage de karaoké dans js: https://github.com/sk89q/ricekaraoke

Vous pouvez réaliser un effet de karaoké en utilisant une bibliothèque javascript de Mozilla appelé popcorn.js Vous pouvez le télécharger à partir de http://mozillapopcorn.org/

Voici un didacticiel http://net.tutsplus.com/articles/news/a-look-at-popcorn/

Voici une démo http://danharper.me/demo/a-look-at-popcorn/

Beaucoup de liens vers des informations connexes au bas du deuxième lien.