In the process of developing a program where a video plays, featuring a person speaking along with chunks of text appearing in a div as the words are spoken alongside their translation. As part of this project, I'm working on writing a JavaScript function to make this synchronization happen smoothly. Essentially, my goal is to manipulate the visibility of the divs using "setTimeout" so that the corresponding text appears at the right moment.
Here are the three arrays involved:
var invite = ["itimes", "idivs"];
var itimes = ["0", "642", "950", "2555", "1113"];
var idivs = ["speech_bubble", "i1", "i2", "i3", "i4"];
I've created two functions to achieve the desired effect:
function reveal(){
var textchunk = "invite";
var divs = textchunk[1];
var div = {Value: divs[x]};
var divtoreveal = document.getElementById(div);
divtoreveal.style.visibility = 'visible';
}
function timedreveal() {
var textchunk = "invite";
var times = textchunk[0];
for(var x = 0; x < times.length; x++)
{
var wait = {Value: times[x]};
alert(JSON.stringify(wait, null, 4));
setTimeout(reveal, wait);
}
}
Although timedreveal successfully retrieves 'itimes' from the 'invite' array, when I check its length through an alert, instead of getting the length of the 'itimes' array, I receive the length of the word 'itimes'. The first value being fetched is "i" rather than "0". It seems like it's treating 'itimes' as the name of an array rather than as the actual array values under 'times' with 6 elements. I have tried researching and reading various resources but haven't been able to understand how to fix this issue. One suggestion was to encapsulate all three arrays within a superarray, but I am unsure how to access the data in such a scenario. Any advice or guidance would be greatly appreciated.
Thank you, Kate