Clickable HTML subtitles

Oh, now that is amazingly fantastic!! Works like a dream! Thanks @elusien!

Even better now. Adding the lines manually was a pain. Thanks @Namna for the suggestion and @Elusien for coding it :slight_smile:

Maybe another suggestion? :innocent:

When there is a section without lyrics in a song, it would be nice to have a key to press (space bar maybe) that would hide the text. Then, pressing TAB would display the next line.

C’est purement GENIAL.
Merci les gars, encore une collaboration fructueuse.
Je n’ai plus qu’à traduire le fichier en français et à me familiariser avec tous les réglages d’OBS.
Si je devais encore suggérer une amélioration ce serait celle-ci.
J’ai un fichier de paroles avec des lignes vides (Pas de paroles pendant un moment)

Je rêvais d‘un autre monde
Où la Terre serait ronde
Où la lune serait blonde
Et la vie serait féconde

Je dormais à poings fermés
Je ne voyais plus en pieds
Je rêvais réalité
Ma réalité

Si au dessous de la zone grise on pouvait avoir les 2 ou 3 prochaines lignes affichées, on saurait qu’il y a un “blanc” et qu’on peut donc appuyer sur TAB sans risque de faire apparaitre la phrase suivante trop tôt.

It’s purely GENIAL. :+1: :+1: :+1:
Thanks guys, another successful collaboration.
I just have to translate the file into French and get familiar with all the OBS settings.
If I had to suggest one more improvement it would be this one.
I have a lyrics file with empty lines (no lyrics for a while)

Je rêvais d‘un autre monde
Où la Terre serait ronde
Où la lune serait blonde
Et la vie serait féconde

Je dormais à poings fermés
Je ne voyais plus en pieds
Je rêvais réalité
Ma réalité

If below the gray area we could have the next 2 or 3 lines displayed, we would know that there is a “blank” and that we can therefore press TAB without the risk of making the next sentence appear too soon.

2 Likes

That would be useful indeed. Good idea :+1:
Ça serait pratique en effet. Bonne idée.

Doh!
Forget my previous suggestion lol. It didn’t occur to me that all I had to do was insert a blank line in the text :flushed:

Oubliez ma suggestion plus haut lol. Je n’ai pas pensé qu’il suffisait d’insérer une ligne vide dans le texte.

2 Likes

That is a really nice idea, @namna but may I just add that I think it would be better if the 2 or 3 lines could be shown within the grey area (maybe at the top) so I could then have the grey area filling the whole screen. It would be an easy matter to then crop out the unwanted text lines.
(This is only if @elusien has the time to do it of course)…

C’est une très bonne idée, @namna, mais puis-je ajouter que je pense qu’il serait préférable que les 2 ou 3 lignes puissent être affichées dans la zone grise (peut-être en haut) afin que je puisse ensuite avoir la zone grise remplissant le tout l’écran. Il serait alors facile de supprimer les lignes de texte indésirables.
(Ce n’est que si @elusien a le temps de le faire bien sûr)…

Je ne sais pas, pour l’instant j’essaie de trouver les réglages d’OBS pour ne capturer que la zone grise, (et ce n’est pas facile, je n’ai toujours pas compris où je devais modifier les valeurs). De toute façon, ensuite dans SC on peut recadrer, redimensionner et déplacer, donc cela ne devrait pas me gêner.

I don’t know, right now I’m trying to find the OBS settings to capture only the gray area, (and it’s not easy, I still haven’t figured out where I should change the values). Anyway, then in SC you can crop, resize and move, so it shouldn’t bother me.

@Namna , @jonray , I have implemeted what I call the “Preview”, the next 3 lines of text that will appear. To keep you both happy there is a parameter:

--preview-top: 101%; /* preview at the bottom (101%) or at the top (0%) */

Set it to 101% to be just below the grey area, and 0%, or any low percentage to be at the top. The HTML file is here:

Clickable Subtitles_2.html.txt (4.6 KB)

@Namna , @jonray , j’ai implémenté ce que j’appelle le “Preview”, les 3 prochaines lignes de texte qui apparaîtront. Pour vous garder tous les deux heureux, il y a un paramètre :

Réglez-le sur 101 % pour être juste en dessous de la zone grise et sur 0 % ou tout pourcentage faible pour être en haut.

2 Likes

*@Elusien *
Vous êtes notre “druide” qu’est-ce qu’on ferait sans vous. :heart_eyes:

@Elusien
You are our “druid” what would we do without you. :heart_eyes:

2 Likes

Just so long as you don’t expect me to dance naked during the Beltane festival at Stonehenge.

Du moment que tu ne t’attends pas à ce que je danse nue pendant le festival de Beltane à Stonehenge.

1 Like

Je pensais plus aux BD d’Astérix et à la sagesse et aux pouvoirs de Panoramix le druide.

I was thinking more of the Asterix books and the wisdom and powers of Panoramix the Druid. :wink:

1 Like

I must admit, he does look a lot like me.

Je dois avouer qu’il me ressemble beaucoup.

image

1 Like

Si j’osais …
Je suis un peu fainéant, je dois ouvrir le fichier html, puis le fichier txt pour copier le texte et le coller dans la textarea.
Ne pourrait-on pas avoir un bouton Open qui fasse tout cela à notre place.

If I dared …
I’m a bit lazy, I have to open the html file, then the txt file to copy the text and paste it in the textarea.
Couldn’t we have an Open button that does all this for us.

1 Like

Wow, what can I say? @elusien, that is brilliant, and you are King of Code… and also you are:

Thank you!

(Being brave, can I just suggest ONE MORE THNG if it is possible)… once I have imported my lyrics, is it possible to make the HTML file saveable so I don’t have to import the text again?
(Sorry to add to your list of requests… @namna’s suggestion is cool though…

Waouh, qu’est-ce que je peux dire ? @elusien, c’est génial, et tu es le roi du code… et tu es aussi :

(video)

(En étant courageux, puis-je simplement suggérer ONE MORE THNG si c’est possible)… une fois que j’ai importé mes paroles, est-il possible de rendre le fichier HTML enregistrable afin que je n’aie pas à réimporter le texte ?
(Désolé d’ajouter à votre liste de demandes… La suggestion de @namna est cool cependant…

Oh lord, now I have a vision of that that is staying in my head… :wink:I hope it goes away soon… :laughing:

Oh seigneur, maintenant j’ai une vision de cela qui reste dans ma tête… :wink: J’espère que ça s’en ira bientôt… :laughing:

An easier way would be to create the text in a .txt file (e.g. using Notepad++) then copy-paste it into the <textarea> element.

1 Like

OK, that’s great. I guess I was being lazy, hoping after that to save the HTML without having to re-copy/paste again. But that is fine, I’m VERY happy the way it is.

OK, c’est bien. Je suppose que j’étais paresseux, espérant ensuite enregistrer le HTML sans avoir à recopier/coller à nouveau. Mais c’est très bien, je suis TRÈS heureux comme ça.

druid

Claimed as Avatar :slight_smile:

1 Like

Oui, c’est ce que je fais aujourd’hui, mais je pensais que ce serait encore plus simple si on pouvait charger directement le contenu du fichier texte .txt dans la textarea en cliquant sur le bouton Open qui nous permet de sélectionner ce fichier texte dans l’explorateur window
Je ne sais pas par contre si c’est possible et facile à coder.

Yes, that’s what I’m doing today, but I thought it would be even easier if we could load the contents of the .txt text file directly into the textarea by clicking on the Open button that allows us to select this text file in the window explorer.
I don’t know if it is possible and easy to code

2 Likes

Bon, j’ai eu du mal, mais j’ai réussi à modifier le fichier html pour intégrer ce bouton “Choisir un fichier”.

Well, I had a hard time, but I managed to modify the html file to integrate this “Choose a file” button.

Diapo28

Clickable Subtitles_4.html.txt (5.2 KB)

3 Likes

Wow, that’s great @namna! Aha, you did it with some JS code. Bravo! Just tested and it works fine. Much easier than copy/paste.

Wow, c’est super @namna ! Aha, vous l’avez fait avec du code JS. Bravo! Je viens de tester et ça marche bien. Beaucoup plus facile que copier/coller.

1 Like

Beaucoup plus pratique que je l’imaginais :slight_smile: :+1:
Much more handy than I imagined

And I can still imbed a video clip
Et je peux toujours incorporer un clip vidéo

https://streamable.com/bizswy

3 Likes