more images

iiif.vtt

@@ -1,7 +1,7 @@
 WEBVTT
 
 00:00:09.150 --> 00:00:10.110
-Shutting down street.
+Struttin' down the street
 
 00:00:10.110 --> 00:00:10.770
 That's where we'll.
@@ -10,10 +10,10 @@ That's where we'll.
 Meet.
 
 00:00:11.190 --> 00:00:12.190
-Oh, yeah.
+(oo-yeah!)
 
 00:00:12.360 --> 00:00:13.360
- - Oh, yeah. -
+ - (oo-yeah!) -
 
 00:00:13.590 --> 00:00:14.040
 Checkin' out the scene
@@ -22,7 +22,7 @@ Checkin' out the scene
 with that IIIF beat
 
 00:00:17.880 --> 00:00:21.390
-Four corners of the globe are coming into view.
+Four corners of the globe all coming into view.
 
 00:00:22.320 --> 00:00:26.010
 One image, one time, showing me and you.
@@ -31,7 +31,7 @@ One image, one time, showing me and you.
 Library lovers, get down with the click.
 
 00:00:31.660 --> 00:00:32.840
-uh-huh! Images so fresh
+(uh-huh!) Images so fresh
 
 00:00:32.950 --> 00:00:33.950
 They'll make you wanna trip

index.html

@@ -80,7 +80,15 @@
               // ddos'ing the API.
               if (currentCueIndex !== i) {
                 currentCueIndex = i;
-                addImage(cue.image, audioElement);
+                const cuewordwithimages = cue.images;
+                const delayInterval = (cue.end - cue.start) / cuewordwithimages.length;
+
+                cuewordwithimages.forEach((word, index) => {
+                  setTimeout(() => {
+                    addImage(word.image, audioElement);
+                    console.log(word.word);
+                  }, index * delayInterval * 1000);
+                });
               }
               break;
             }

js/images.js

@@ -9,7 +9,7 @@ function addImage(image, audioElement) {
   const img = document.createElement('img');
   img.src = `https://www.artic.edu/iiif/2/${image.image_id}/full/!600,600/0/default.jpg`;
   img.className = 'throbbing';
-  
+
   // Random position within the container
   const containerRect = container.getBoundingClientRect();
   const maxX = containerRect.width - 600;
@@ -33,7 +33,7 @@ function addImage(image, audioElement) {
 
   const options = {
     duration: beatDurationInMs,
-    fill: 'forwards',
+    fill: "forwards",
     iterations: Infinity,
   };
 

js/lyrics.js

@@ -32,12 +32,11 @@ async function loadVTT(url) {
       // get a relevant image if possible
       // console.log(cue.words);
       if ('words' in cue) {
-
+        cue.images = [];
         cue.words.forEach(async word => {
-          // console.log("# looking for images with " + word);
-
           imageData = await getImage(word);
           if (imageData) {
+            cue.images.push({ word: word, image: imageData });
             cue.image = imageData;
           }
         });