Update index.html

index.html

@@ -1233,39 +1233,39 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // 動画と音声の同期をチェックする関数
-    function startSyncCheck() {
-        if (syncCheckInterval) clearInterval(syncCheckInterval);
-        syncCheckInterval = setInterval(checkSync, 1000); // 100msごとにチェック
-    }
+// startSyncCheck関数を修正
+function startSyncCheck() {
+  if (isCheckingSync) return;
+  isCheckingSync = true;
+  if (syncCheckInterval) clearInterval(syncCheckInterval);
+  syncCheckInterval = setInterval(checkSync, 1000);
+}
 
-    function stopSyncCheck() {
-        if (syncCheckInterval) clearInterval(syncCheckInterval);
-    }
+// stopSyncCheck関数を修正
+function stopSyncCheck() {
+  isCheckingSync = false;
+  if (syncCheckInterval) clearInterval(syncCheckInterval);
+}
 
-    function checkSync() {
-        if (!isAudioCombined || !isPlaying || isBuffering) return;
-        
-        const videoTime = video.currentTime;
-        const audioTime = combinedAudioElement.currentTime;
-        const drift = videoTime - audioTime;
-        
-        // ズレを記録（直近5回分）
-        syncDriftLog.push(drift);
-        if (syncDriftLog.length > 5) syncDriftLog.shift();
-        
-        // 平均ズレを計算
-        const avgDrift = syncDriftLog.reduce((a, b) => a + b, 0) / syncDriftLog.length;
-        
-        // ズレ表示を更新
-        syncStatusText.textContent = `同期ズレ: ${avgDrift.toFixed(3)}秒`;
-        
-        // ズレが大きい場合（0.1秒以上）に修正
-        if (Math.abs(avgDrift) > 0.1) {
-            console.log(`同期ズレを修正: ${avgDrift.toFixed(3)}秒`);
-            syncAudioWithVideo();
-        }
-    }
+// checkSync関数を修正（バックグラウンド時はチェックしない）
+function checkSync() {
+  if (!isAudioCombined || !isPlaying || isBuffering || isInBackgroundTab) return;
+  
+  const videoTime = video.currentTime;
+  const audioTime = combinedAudioElement.currentTime;
+  const drift = videoTime - audioTime;
+  
+  syncDriftLog.push(drift);
+  if (syncDriftLog.length > 5) syncDriftLog.shift();
+  
+  const avgDrift = syncDriftLog.reduce((a, b) => a + b, 0) / syncDriftLog.length;
+  syncStatusText.textContent = `同期ズレ: ${avgDrift.toFixed(3)}秒`;
+  
+  if (Math.abs(avgDrift) > 0.1) {
+    console.log(`同期ズレを修正: ${avgDrift.toFixed(3)}秒`);
+    syncAudioWithVideo();
+  }
+}
 
     // 音声を動画に同期させる関数
     function syncAudioWithVideo() {
@@ -1402,23 +1402,48 @@ document.addEventListener('DOMContentLoaded', function() {
             enablePlayerControls();
 
             previewSection.style.display = 'block';
+let isCheckingSync = false;
+let isInBackgroundTab = false;
+
+// visibilitychange イベントリスナーの修正
 document.addEventListener('visibilitychange', async () => {
   if (document.hidden) {
-    // 他タブに移動 → PiP表示（再生中のときのみ）
+    // 他タブに移動した場合
+    isInBackgroundTab = true;
+    stopSyncCheck(); // 同期チェックを停止
+    
+    try {
+      // PiP表示を試みる（再生中のときのみ）
+      if (!video.paused) {
+        await enterPiP();
+        // PiPに成功したら同期チェックを再開
+        if (document.pictureInPictureElement) {
+          isInBackgroundTab = false;
+          startSyncCheck();
+        }
+      }
+    } catch (e) {
+      console.warn('PiP開始失敗:', e);
+      // PiP失敗時は何もしない（isInBackgroundTabがtrueのまま）
+    }
+  } else {
+    // タブに戻った場合
+    isInBackgroundTab = false;
+    
+    // PiPを終了（再生中のときのみ）
     if (!video.paused) {
-      enterPiP();
-    } else {
       try {
-        await video.play();
-        enterPiP();
+        await exitPiP();
       } catch (e) {
-        console.warn('再生エラー:', e);
+        console.warn('PiP終了失敗:', e);
       }
     }
-  } else {
-    // タブに戻ったとき → PiP終了（再生中のときのみ）
-    if (!video.paused) {
-      exitPiP();
+    
+    // タブに戻った直後に一度だけ同期チェックを実行
+    if (isPlaying) {
+      checkSync();
+      // その後、通常通り同期チェックを再開
+      startSyncCheck();
     }
   }
 });