Add global volume slider

We do quite a bit of "iron fist state management" here. Any time any
embed state changes, we also re-enforce the volume setting. This is
because `setVolume()` in the Twitch embeds seems to not take effect in a
lot of situations and we want to make sure our volume is applied before
any audio starts playing.

js/live.js

@@ -35,6 +35,12 @@ function update_globals() {
     change_scientist();
 }
 
+// Change embed volume as slider is... slid
+function update_volume() {
+    vol = document.getElementById('vol_slider').value;
+    embeds.forEach(e => e.setVolume(vol / 100));
+}
+
 // Update individual textual elements in the overlay
 function change_game_name() {
     game_name = document.getElementById('gamename_text').value;
@@ -49,7 +55,10 @@ function change_scientist() {
 }
 
 function update_embed(embed_num) {
+    // Switch channel
     change_embed_channel(embed_num);
+
+    // Update our text fields
     n = document.getElementById('rat' + embed_num + 'name');
     p = document.getElementById('rat' + embed_num + 'pronouns');
 
@@ -69,6 +78,7 @@ function change_embed_channel(embed_num) {
     e.style.display = 'block';
 
     embeds[embed_num].setChannel(channel_name);
+    update_volume();
     embeds[embed_num].play();
 }
 
@@ -94,6 +104,10 @@ function focus_audio(embed_num) {
     embeds.forEach(e => e.setMuted(true));
     embeds[embed_num].setMuted(false);
 
+    // Fire a volume set just to be sure our volume is synced
+    // Embeds that are muted or disabled sometimes don't set volume
+    update_volume();
+
     speakers = document.querySelectorAll('.ratspeaker');
     speakers.forEach(e => e.style.display = 'none');
 
@@ -153,8 +167,8 @@ function setup() {
         parent: ['voidfox.com']
     }));
 
-    // Try to start volume at a known level
+    // Set up volume slider handler
-    embeds.forEach(e => e.setVolume(1.0));
+    document.getElementById('vol_slider').oninput = update_volume
 }
 
 document.addEventListener('DOMContentLoaded', setup);

live.html

@@ -38,7 +38,9 @@
                     <!-- Global Controls -->
                     Overlay: 
                     <button type='button' name='go_4x3' onclick='set_state(false);'>4x3</button>
-                    <button type='button' name='go_16x0' onclick='set_state(true);'>16x9</button>
+                    <button type='button' name='go_16x9' onclick='set_state(true);'>16x9</button>
+                    Volume: 
+                    <input type='range' id='vol_slider' min=0 max=100 value=100 />
                     <td>
                         <h3>Global Settings</h3>
                         <p>