Update index.html

index.html

@@ -51,8 +51,8 @@
 
     <div class="control-group">
       <label for="volumeRange">音量：</label>
-      <input type="range" id="volumeRange" min="0" max="1000" step="0.01" value="100">
-      <input type="number" id="volumeInput" min="0" max="1000" step="0.01" value="100">%
+      <input type="range" id="volumeRange" min="0" max="100" step="1" value="100">
+      <input type="number" id="volumeInput" min="0" max="100" step="1" value="100">%
     </div>
 
     <div class="control-group">
@@ -71,6 +71,14 @@
   const volumeInput = document.getElementById('volumeInput');
   const loopCheckbox = document.getElementById('loopCheckbox');
 
+  // Web Audio APIの設定
+  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  const gainNode = audioContext.createGain();
+  const sourceNode = audioContext.createMediaElementSource(video);
+  sourceNode.connect(gainNode);
+  gainNode.connect(audioContext.destination);
+
+  // 再生速度の更新
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
     speedInput.value = speed;
@@ -78,13 +86,16 @@
     video.playbackRate = speed;
   }
 
+  // 音量の更新
   function updateVolume(value) {
     const volume = parseFloat(value);
     volumeInput.value = volume;
     volumeRange.value = volume;
-    video.volume = volume/100;
+    // GainNodeの音量設定（1.0以上）
+    gainNode.gain.value = volume / 100;  // 0〜1の範囲として設定
   }
 
+  // イベントリスナーの設定
   ['input', 'change', 'mouseup'].forEach(eventName => {
     speedRange.addEventListener(eventName, () => {
       updatePlaybackRate(speedRange.value);
@@ -106,6 +117,7 @@
     video.loop = loopCheckbox.checked;
   });
 
+  // 全画面モード
   function goFullscreen() {
     if (video.requestFullscreen) {
       video.requestFullscreen();
@@ -116,6 +128,7 @@
     }
   }
 
+  // メタデータの読み込み後に初期設定
   video.addEventListener('loadedmetadata', () => {
     updatePlaybackRate(speedRange.value);
     updateVolume(volumeRange.value);