Update index.html

index.html

@@ -49,6 +49,12 @@
       <input type="number" id="speedInput" min="0.0001" step="0.0001" value="1">
     </div>
 
+    <div class="control-group">
+      <label for="volumeRange">音量：</label>
+      <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
+      <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1">
+    </div>
+
     <div class="control-group">
       <label for="loopCheckbox">ループ再生：</label>
       <input type="checkbox" id="loopCheckbox" checked>
@@ -56,10 +62,13 @@
 
     <button onclick="goFullscreen()">全画面</button>
   </div>
+
 <script>
   const video = document.getElementById('videoPlayer');
   const speedRange = document.getElementById('speedRange');
   const speedInput = document.getElementById('speedInput');
+  const volumeRange = document.getElementById('volumeRange');
+  const volumeInput = document.getElementById('volumeInput');
   const loopCheckbox = document.getElementById('loopCheckbox');
 
   function updatePlaybackRate(value) {
@@ -69,17 +78,30 @@
     video.playbackRate = speed;
   }
 
-  // スライダーイベント（input、change、mouseup すべて対応）
+  function updateVolume(value) {
+    const volume = parseFloat(value);
+    volumeInput.value = volume;
+    volumeRange.value = volume;
+    video.volume = volume;
+  }
+
   ['input', 'change', 'mouseup'].forEach(eventName => {
     speedRange.addEventListener(eventName, () => {
       updatePlaybackRate(speedRange.value);
     });
+    volumeRange.addEventListener(eventName, () => {
+      updateVolume(volumeRange.value);
+    });
   });
 
   speedInput.addEventListener('input', () => {
     updatePlaybackRate(speedInput.value);
   });
 
+  volumeInput.addEventListener('input', () => {
+    updateVolume(volumeInput.value);
+  });
+
   loopCheckbox.addEventListener('change', () => {
     video.loop = loopCheckbox.checked;
   });
@@ -96,8 +118,9 @@
 
   video.addEventListener('loadedmetadata', () => {
     updatePlaybackRate(speedRange.value);
+    updateVolume(volumeRange.value);
     video.loop = loopCheckbox.checked;
   });
 </script>
 </body>
-</html>
+</html>