Update Starry AI Night

Author: GitHubDragonFly

viewers/templates/Starry AI Night.html

@@ -56,7 +56,18 @@
       <div>
         <button type="button" title="English / Srpsko-Hrvatski" id="switch_version" style="width: 120px; float: right; margin-right: 1%;">Srpsko-Hrvatski</button>
         <button type="button" title="Latinica / Ћирилица" id="switch_alphabet" style="display: none; width: 120px; float: right; margin-right: 1%;">Ћирилица</button>
-      </div><br />
+      </div><br /><br />
+      <div class="audio_eng" style="text-align: center; min-height: 30px; font-style: italic; color: #ccc; margin-top: 10px;">
+        Audio available in English only<br /><br />
+        <audio id="audio_element" style="width: 300px; vertical-align: middle;" controls>
+          <source src="../../audio/Poem.mp3" type="audio/mpeg">
+          Your browser does not support the audio element.
+        </audio>&nbsp;
+        <button type="button" title="Narrate Poem / Narrate Appendicies" id="switch_audio" style="width: 140px; vertical-align: middle;">Narrate Appendicies</button>
+        <div id="track_name" style="font-style: italic; color: #ccc; margin-top: 10px;">
+          Selected: Poem Narration
+        </div>
+      </div><br /><br />
     </p>
 
     <div class="eng">
@@ -1736,6 +1747,11 @@ <h3>Завршна Ријеч</h3>
     <script>
       $(document).ready(function() {
         $('#switch_version').click(function() {
+          const audio = document.getElementById('audio_element');
+
+          audio.pause();
+          audio.currentTime = 0;
+
           $('div').each(function(index){
             if ($(this).attr('class') === 'sh_l') {
               if ($('#switch_version')[ 0 ].innerHTML === 'Srpsko-Hrvatski'){
@@ -1750,8 +1766,10 @@ <h3>Завршна Ријеч</h3>
             } else if ($(this).attr('class') === 'eng') {
               if ($('#switch_version')[ 0 ].innerHTML === 'English'){
                 $(this).show();
+                $('.audio_eng').show();
               } else {
                 $(this).hide();
+                $('.audio_eng').hide();
               }
             }
           });
@@ -1787,6 +1805,30 @@ <h3>Завршна Ријеч</h3>
             $('#switch_alphabet')[ 0 ].innerHTML = 'Ћирилица';
           }
         });
+
+        $('#switch_audio').click(function() {
+          const audio = document.getElementById('audio_element');
+          const source = audio.querySelector('source');
+
+          audio.pause();
+          audio.currentTime = 0;
+
+          if ($('#switch_audio')[ 0 ].innerHTML === 'Narrate Appendicies') {
+            $('#switch_audio')[ 0 ].innerHTML = 'Narrate Poem';
+            $('#track_name')[ 0 ].innerHTML = 'Selected: Appendicies Narration';
+
+            source.setAttribute('src', '../../audio/Appendicies.mp3');
+          } else {
+            $('#switch_audio')[ 0 ].innerHTML = 'Narrate Appendicies';
+            $('#track_name')[ 0 ].innerHTML = 'Selected: Poem Narration';
+
+            source.setAttribute('src', '../../audio/Poem.mp3');
+          }
+
+          source.setAttribute('type', 'audio/mpeg');
+
+          audio.load();
+        });
       });
     </script>
   </body>