pulling the text track outside of the audio element so its not hidden

modules/islandora_audio/islandora_audio.libraries.yml

@@ -0,0 +1,7 @@
+audio:
+  version: 1.x
+  js:
+    js/audio.js: {preprocess: false}
+  dependencies:
+    - core/drupal
+    - core/drupalSettings

modules/islandora_audio/js/audio.js

@@ -0,0 +1,45 @@
+/*jslint browser: true*/
+/*global Audio, Drupal*/
+/**
+ * @file
+ * Displays Audio viewer.
+ */
+(function ($, Drupal) {
+    'use strict';
+
+    /**
+     * If initialized.
+     * @type {boolean}
+     */
+    var initialized;
+    /**
+     * Unique HTML id.
+     * @type {string}
+     */
+    var base;
+
+    function init(context,settings){
+        if (!initialized){
+            console.log("hello audio");
+            initialized = true;
+	    $('audio')[0].textTracks[0].oncuechange = function() {
+		console.log("changed");
+		var currentCue = this.activeCues[0].text;
+		$('#audioTrack').html(currentCue);
+	    }
+        }
+    }
+    Drupal.Audio = Drupal.Audio || {};
+
+    /**
+     * Initialize the Audio Viewer.
+     */
+    Drupal.behaviors.Audio = {
+        attach: function (context, settings) {
+            init(context,settings);
+        },
+        detach: function () {
+        }
+    };
+
+})(jQuery, Drupal);

modules/islandora_audio/templates/islandora-file-audio.html.twig

@@ -15,14 +15,18 @@
 * @ingroup themeable
 */
 #}
+<div id="audioTrack"></div>
+{#<video {{ attributes }} controls poster="http://localhost:8000/sites/default/files/2021-03/1-Service%20File.jpg">#}
 <audio {{ attributes }}>
   {% for file in files %}
     <source {{ file.source_attributes }} />
     {% if tracks %}
     {% for track in tracks %}
-      <track {{ track.track_attributes }}
+      <track {{ track.track_attributes }} default />
     {% endfor %}
     {% endif %}
   {% endfor %}
 </audio>
 
+{{ attach_library('islandora_audio/audio') }}
+