Update index.html

index.html

@@ -1409,45 +1409,67 @@ let isInBackgroundTab = false;
 
 // visibilitychange イベントリスナーの修正
 document.addEventListener('visibilitychange', async () => {
-  if (document.hidden) {
-    // 他タブに移動した場合
-    isInBackgroundTab = true;
-    stopSyncCheck(); // 同期チェックを停止
-    
-    try {
-      // PiP表示を試みる（再生中のときのみ）
-      if (!video.paused) {
-        await enterPiP();
-        // PiPに成功したら同期チェックを再開
-        if (document.pictureInPictureElement) {
-          isInBackgroundTab = false;
-          startSyncCheck();
+    if (document.hidden) {
+        // タブが非表示になった場合
+        isInBackgroundTab = true;
+        stopSyncCheck();
+        
+        // 現在の再生状態と時間を保存
+        const wasPlaying = isPlaying;
+        const savedTime = video.currentTime;
+        
+        // メディアを一時停止
+        pauseMedia();
+        
+        // タブが再表示されたときに復元するためのデータを保存
+        video.dataset.wasPlaying = wasPlaying;
+        video.dataset.savedTime = savedTime;
+        
+        try {
+            // PiP表示を試みる
+            if (wasPlaying) {
+                await enterPiP();
+                if (document.pictureInPictureElement) {
+                    isInBackgroundTab = false;
+                    startSyncCheck();
+                    playMedia(); // PiPでは再生を続ける
+                }
+            }
+        } catch (e) {
+            console.warn('PiP開始失敗:', e);
+        }
+    } else {
+        // タブが再表示された場合
+        isInBackgroundTab = false;
+        
+        // PiPを終了
+        try {
+            await exitPiP();
+        } catch (e) {
+            console.warn('PiP終了失敗:', e);
+        }
+        
+        // 保存された状態を復元
+        const wasPlaying = video.dataset.wasPlaying === 'true';
+        const savedTime = parseFloat(video.dataset.savedTime) || 0;
+        
+        if (wasPlaying) {
+            // 保存された時間にシーク
+            video.currentTime = savedTime;
+            if (combinedAudioElement) {
+                combinedAudioElement.currentTime = savedTime;
+            }
+            
+            // 再生を再開
+            playMedia();
+        }
+        
+        // タブに戻った直後に一度だけ同期チェックを実行
+        if (isPlaying) {
+            checkSync();
+            startSyncCheck();
         }
-      }
-    } catch (e) {
-      console.warn('PiP開始失敗:', e);
-      // PiP失敗時は何もしない（isInBackgroundTabがtrueのまま）
-    }
-  } else {
-    // タブに戻った場合
-    isInBackgroundTab = false;
-    
-    // PiPを終了（再生中のときのみ）
-    if (!video.paused) {
-      try {
-        await exitPiP();
-      } catch (e) {
-        console.warn('PiP終了失敗:', e);
-      }
-    }
-    
-    // タブに戻った直後に一度だけ同期チェックを実行
-    if (isPlaying) {
-      checkSync();
-      // その後、通常通り同期チェックを再開
-      startSyncCheck();
     }
-  }
 });
 
   // 動画終了時に自動的にPiPを閉じる（次回再開のため）
@@ -1681,36 +1703,46 @@ document.addEventListener('visibilitychange', async () => {
         }
     }
     
-    // 再生関数 (改良版)
-    function playMedia() {
-        try {
-            const duration = video.duration || videoDuration;
-            const startTime = parseFloat(startTimeInput.value) || 0;
-            const endTime = parseFloat(endTimeInput.value) || duration;
-            
-            if (video.currentTime >= endTime) {
-                video.currentTime = startTime;
-            }
-            
-            const playPromise = video.play();
-            
-            if (playPromise !== undefined) {
-                playPromise.then(() => {
-                    isPlaying = true;
-                    playPauseBtn.textContent = '⏸';
-                    
+function playMedia() {
+    try {
+        const duration = video.duration || videoDuration;
+        const startTime = parseFloat(startTimeInput.value) || 0;
+        const endTime = parseFloat(endTimeInput.value) || duration;
+        
+        // 現在の時間が終了時間を超えている場合は開始時間に戻す
+        if (video.currentTime >= endTime) {
+            video.currentTime = startTime;
+        }
+        
+        const playPromise = video.play();
+        
+        if (playPromise !== undefined) {
+            playPromise.then(() => {
+                isPlaying = true;
+                playPauseBtn.textContent = '⏸';
+                
+                // 音声が合成されている場合は同期
+                if (isAudioCombined) {
                     syncAudioWithVideo();
-                    startSyncCheck();
-                    
-                    video.playbackRate = currentPlaybackRate;
-                }).catch(error => {
-                    console.error('動画再生エラー:', error);
-                });
-            }
-        } catch (error) {
-            console.error('メディア再生エラー:', error);
+                }
+                
+                startSyncCheck();
+                
+                video.playbackRate = currentPlaybackRate;
+            }).catch(error => {
+                console.error('動画再生エラー:', error);
+                // 再生に失敗した場合は一時停止状態に設定
+                isPlaying = false;
+                playPauseBtn.textContent = '▶';
+            });
         }
+    } catch (error) {
+        console.error('メディア再生エラー:', error);
+        // エラーが発生した場合は一時停止状態に設定
+        isPlaying = false;
+        playPauseBtn.textContent = '▶';
     }
+}
     
     // 一時停止関数
     function pauseMedia() {