Dodanie napisów podczas odtwarzania dźwięków / filmów

W skrócie problem wygląda następująco:

Robię w JS grę przygodową point'n'click (obecnie przenoszę ją na Reacta) i stwierdziłem, że chciałbym dodać jakieś usprawnienie. Czasami gdy user kliknie na jakiś element otoczenia to włącza się jakiś dialog. Jakie byłoby najlepsze podejście by dodać napisy do takiego dialogu? Jedyne co mi przychodzi ma myśl i brzmi jak koszmar to odpalenie dodatkowej funkcji przy włączeniu dźwięku, która w setTimeoutach wyświetlałaby odpowiednie napisy.

Z filmikami o tyle prościej, że napisy mogę dodać ręcznie / przez youtube, ale jeszcze nie wiem jak je zaimplementuje więc szukam jakiegoś lepszego rozwiązania dla napisów, oczywiście jeśli się da. Będę wdzięczny za wskazówki

W sumie napisy tak działają, ze jest string i potem czas w ktorym ma sie pojawic od rozpoczecia filmu, chyba kazdy ogladal jakiegos pirata gdzie na poczatku/ koncu widac ze ktos tlumaczyl napisy a ktos inny je synchronizowal. Wiec moze funkcja z timeoutem nie brzmi zle.

Mały Ogórek napisał(a):

W sumie napisy tak działają, ze jest string i potem czas w ktorym ma sie pojawic od rozpoczecia filmu, chyba kazdy ogladal jakiegos pirata gdzie na poczatku/ koncu widac ze ktos tlumaczyl napisy a ktos inny je synchronizowal. Wiec moze funkcja z timeoutem nie brzmi zle.

Problem pojawia się gdy dźwięk może pojawić się komuś z opóżnieniem przez wolniejszy internet na przykład, dźwięk się dociągał, a timeouty lecą. Niestety żadna biblioteka nie rzuciła mi się w oczy ale z drugiej strony problem sobie wymyśliłem dziwny, wątpie, że ten język jest do takich rzeczy wykorzystywany.

ale dźwięk dociągasz asynchronicznie ?, jeżeli starasz się naraz połączyć film dźwięk i napisy naraz to zastanowiłbym się nad jakimś promisem

A takie coś? w sumie pseudokod który coś tam działa i ma pokazać ideę.

PS: Trochę o ok. 0.2sec zbyt szybko je zmienia :(, ale to chyba da się poprawić.
PS2: Chyba problematyczne przy dużej ilości napisów :P

<video id="video" preload="auto" loop autoplay controls muted>     
    <source src="1.mp4" type='video/mp4' />
</video>


<div id="napis"></div>

<style>
#napis
{
	font-size: 150px;
}
#video
{
	height: 450px;
	width: 450px;
}
</style>

var currentTime=0;
var index = 0;
var timestamp = [0,1,2,3,4,5];
var caption = ["napis0","napis1","napis2","napis3","napis4","napis5"];
document.getElementById("video").addEventListener('timeupdate', function()
 {
    currentTime = this.currentTime | 0;
	if (currentTime == timestamp[index])
	{
		document.getElementById("napis").innerHTML = caption[index];
		if (index < timestamp.length -1)
		{
			index++;
		}
		else
		{
			index=0;
		}
	}
});
 
addCaptions()