#2355 Handle multiple audio tracks on a single audio element (#1071)

* #2355 Handle multiple audio tracks on a single audio element * #2025 Add attribute to gate showing captions or not --------- Co-authored-by: Jonathan Hunt <[email protected]>
Islandora · Feb 20, 2025 · 65e6a51 · 65e6a51
1 parent 335b4dc
commit 65e6a51
Showing 1 changed file with 57 additions and 31 deletions.
diff --git a/modules/islandora_audio/js/audio.js b/modules/islandora_audio/js/audio.js
@@ -50,43 +50,69 @@
           return cues;
         }
 
-        const vtt_source = element.querySelector("track[kind='captions'], track[kind='subtitles']")?.getAttribute('src');
-        if (!vtt_source) { return; }
-        fetch(vtt_source).then(response => {
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
+        element.textTracks.addEventListener('change', function(e)  {
+          // Which track is showing?
+          element.setAttribute('data-showing', false);
+          for (let i = 0; i < this.length; i++) {
+            if (this[i].mode === 'showing') {
+              // Build cues for this track, now we know the index.
+              // @todo: Make this work with multiple audio elements.
+              var src = document.querySelectorAll("track[kind='captions'], track[kind='subtitles']")[i].getAttribute('src');
+              bindVttSource(src);
+              element.setAttribute('data-showing', true);
+            }
           }
-          return response.text();
-        }).then(text => {
-          const cues = parseWebVTT(text);
+        });
 
-          // Create a Custom Event attached to the timeupdate event to pass cues along.
-          element.addEventListener('timeupdate', (e) => {
-            const captionEvent = new CustomEvent('updateCaptions', { detail: cues })
-            e.target.dispatchEvent(captionEvent);
-          });
-          element.addEventListener('updateCaptions', (e) => {
-            if (!e.detail) {
-              return;
-            }
+        // Invoke change event to get started.
+        const changeEvent = new Event('change');
+        element.textTracks.dispatchEvent(changeEvent);
 
-            // Grab the caption for the current time.
-            const currentTime = e.target.currentTime;
-            let cue = e.detail.find(
-              (cue) =>
-                currentTime >= cue.start &&
-                currentTime <= cue.end
-            );
+        function bindVttSource(vtt_source) {
 
-            // Update the caption box.
-            let captionsBox = e.target.parentElement.querySelector('div.audioTrack')
-            if (cue?.text) {
-              captionsBox.innerHTML = cue.text.replace(/\n/g, "<br>");
-            } else {
-              captionsBox.innerHTML = '';
+          fetch(vtt_source).then(response => {
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
             }
+            return response.text();
+          }).then(text => {
+            const cues = parseWebVTT(text);
+
+            // Create a Custom Event attached to the timeupdate event to pass cues along.
+            element.addEventListener('timeupdate', (e) => {
+              const captionEvent = new CustomEvent('updateCaptions', { detail: cues })
+              e.target.dispatchEvent(captionEvent);
+            });
+            element.addEventListener('updateCaptions', (e) => {
+              if (!e.detail) {
+                return;
+              }
+              // Check if a track is showing.
+              var showing = e.target.getAttribute('data-showing');
+              // Update the caption box.
+              let captionsBox = e.target.parentElement.querySelector('div.audioTrack');
+              if (showing === 'true') {
+                // Grab the caption for the current time.
+                const currentTime = e.target.currentTime;
+                let cue = e.detail.find(
+                  (cue) =>
+                    cue !== null &&
+                    currentTime >= cue.start &&
+                    currentTime <= cue.end
+                );
+                if (cue?.text) {
+                  captionsBox.innerHTML = cue.text.replace(/\n/g, "<br>");
+                }
+                else {
+                  captionsBox.innerHTML = '';
+                }
+              }
+              else {
+                captionsBox.innerHTML = '';
+              }
+            });
           });
-        });
+        }
       })
     }
   }