feat: add sound control bar

index.html

@@ -45,6 +45,14 @@
   <script src="static/js/index.js"></script>
 </head>
 <style>
+  .mybar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
   .mycontainer {
     /* display: flex;
     flex-direction: row;
@@ -192,8 +200,14 @@ <h2 class="title is-3">Abstract</h2>
       <h2 class="title is-3">Music-Reactive Video Generation Comparison</h2>
       <div class="content has-text-justified">
         <p>We generate music-reactive videos on three different music genres (<em>i.e.</em>, Rock, K-POP, Traditional Instrumental Ensemble) and compare different generation methods.
-          In every genre, ours work favorably compared to decent baseline methods.
+          In every genre, ours work favorably compared to decent baseline methods. You can control video sound using below bar.
         </p>
+      <div class="mybar">
+        <div>
+          <img src="static/images/sound-icon.png" alt="Volume" style="display:block; width: 1.5em;">
+        </div>
+        <input style="margin: 1em; width: 10em;" type="range" id="volumeControl" min="0" max="100" value="50" step="1" oninput="setVolume(this.value)">
+      </div>
       </div>
       <h4 class="title is-4">Genre 1: Rock</h4>
       <h4 class="title is-5">Song Title: "Rock You Like A Hurricane"</h4>
@@ -711,7 +725,11 @@ <h2 class="title">BibTeX</h2>
     }
 
     function onPlayerReady(event) {
-      setVolumeForAllPlayers(10)
+      var initialVolume = document.getElementById('volumeControl').value;
+      setVolumeForAllPlayers(initialVolume)
+    }
+    function setVolume(volume) {
+      setVolumeForAllPlayers(volume)
     }
   </script>
   </body>