Update index.html

index.html

@@ -71,12 +71,23 @@
   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 videoSource = audioContext.createMediaElementSource(video);
-  videoSource.connect(gainNode);
-  gainNode.connect(audioContext.destination);
+  // Web Audio APIの設定
+  let audioContext;
+  let source;
+  let gainNode;
+
+  function setupAudio() {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    source = audioContext.createMediaElementSource(video);
+    gainNode = audioContext.createGain();
+    
+    // 音声ノードを接続
+    source.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+    
+    // 初期音量設定
+    updateVolume(volumeRange.value);
+  }
 
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
@@ -86,12 +97,17 @@
   }
 
   function updateVolume(value) {
-    const volume = parseFloat(value) / 100;
-    volumeInput.value = value;
-    volumeRange.value = value;
+    const volume = parseFloat(value);
+    volumeInput.value = volume;
+    volumeRange.value = volume;
     
-    // 音量は最大3倍まで設定
-    gainNode.gain.value = Math.min(volume * 3, 3); // 音量を3倍までに制限
+    if (gainNode) {
+      // 0-300%を0-3の値に変換 (100% = 1.0)
+      gainNode.gain.value = volume / 100;
+    } else {
+      // Web Audio APIが初期化される前は通常の音量制御を使用
+      video.volume = Math.min(volume / 100, 1);
+    }
   }
 
   ['input', 'change', 'mouseup'].forEach(eventName => {
@@ -129,7 +145,18 @@
     updatePlaybackRate(speedRange.value);
     updateVolume(volumeRange.value);
     video.loop = loopCheckbox.checked;
+    
+    // Web Audio APIをセットアップ
+    setupAudio();
   });
+
+  // iOSなどの一部ブラウザではユーザー操作がないとAudioContextがサスペンドされるので、
+  // ユーザー操作時に再開するようにする
+  document.addEventListener('click', () => {
+    if (audioContext && audioContext.state === 'suspended') {
+      audioContext.resume();
+    }
+  }, { once: true });
 </script>
 </body>
-</html>
+</html>