Update index.html

index.html

@@ -1247,7 +1247,7 @@ document.addEventListener('DOMContentLoaded', function() {
     let controlsVisible = true;
     let isCheckingSync = false;
     let isInBackgroundTab = false;
-    let isBlankMode = false; // 消画モードフラグ
+    let isBlackVideoMode = false; // 消画モードフラグ
     
     try {
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
@@ -1381,7 +1381,12 @@ document.addEventListener('DOMContentLoaded', function() {
     const tempoSpeedValue = document.getElementById('tempo-speed-value');
     const videoControls = document.querySelector('.video-controls');
     const applyTimeBtn = document.getElementById('apply-time-btn');
-    const blankModeBtn = document.getElementById('blank-mode-btn'); // 消画モードボタン
+    const blackVideoToggle = document.createElement('button');
+    blackVideoToggle.className = 'control-button';
+    blackVideoToggle.id = 'black-video-btn';
+    blackVideoToggle.textContent = '消画モード';
+    blackVideoToggle.title = '動画を黒画面に切り替え（読み込み遅延防止）';
+    document.querySelector('.main-controls').appendChild(blackVideoToggle);
   
     // 音声オブジェクトを作成
     const audioElements = {};
@@ -1390,8 +1395,6 @@ document.addEventListener('DOMContentLoaded', function() {
     let combinedAudioElement = null;
     let isAudioCombined = false;
     let currentVolumes = { p: 0, a: 1, t: 1, s: 1, k: 0 };
-    let appliedStartTime = 0;
-    let appliedEndTime = 0;
     
     // 初期化
     let videoDuration = 0;
@@ -1399,22 +1402,7 @@ document.addEventListener('DOMContentLoaded', function() {
     let lastVolume = 1;
     let currentPlaybackRate = 1;
     let isFullscreen = false;
-
-    // 消画モード切り替え
-    function toggleBlankMode() {
-        isBlankMode = !isBlankMode;
-        if (isBlankMode) {
-            video.style.backgroundColor = 'black';
-            video.style.opacity = '0';
-            blankModeBtn.textContent = '消画モード: ON';
-            blankModeBtn.classList.add('active');
-        } else {
-            video.style.backgroundColor = '';
-            video.style.opacity = '1';
-            blankModeBtn.textContent = '消画モード: OFF';
-            blankModeBtn.classList.remove('active');
-        }
-    }
+    let isTimeApplied = false; // 時間設定が適用されたかどうか
 
     async function enterPiP() {
         if (!document.pictureInPictureElement && !video.paused) {
@@ -1435,7 +1423,7 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         }
     }
-  
+
     // 動画のバッファリング状態を監視
     video.addEventListener('waiting', function() {
         isBuffering = true;
@@ -1496,6 +1484,9 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     applyTimeBtn.addEventListener('click', function() {
+        // 時間設定を適用
+        isTimeApplied = true;
+        
         // 現在再生中なら一時停止
         const wasPlaying = isPlaying;
         if (isPlaying) {
@@ -1503,21 +1494,21 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         
         // 開始時間と終了時間を取得
-        appliedStartTime = parseFloat(startTimeInput.value) || 0;
-        appliedEndTime = parseFloat(endTimeInput.value) || video.duration;
+        const startTime = parseFloat(startTimeInput.value) || 0;
+        const endTime = parseFloat(endTimeInput.value) || video.duration;
         
         // 現在位置が開始時間より前なら開始時間に移動
-        if (video.currentTime < appliedStartTime) {
-            video.currentTime = appliedStartTime;
+        if (video.currentTime < startTime) {
+            video.currentTime = startTime;
             if (combinedAudioElement) {
-                combinedAudioElement.currentTime = appliedStartTime;
+                combinedAudioElement.currentTime = startTime;
             }
         }
         // 現在位置が終了時間より後なら開始時間に移動
-        else if (video.currentTime > appliedEndTime) {
-            video.currentTime = appliedStartTime;
+        else if (video.currentTime > endTime) {
+            video.currentTime = startTime;
             if (combinedAudioElement) {
-                combinedAudioElement.currentTime = appliedStartTime;
+                combinedAudioElement.currentTime = startTime;
             }
         }
         
@@ -1575,11 +1566,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // 音声を結合する関数
     async function combineAudio() {
-        // 既存の音声を停止して解放
-        if (combinedAudioElement) {
-            combinedAudioElement.pause();
-            combinedAudioElement.src = '';
-            combinedAudioElement = null;
+        // 再生中なら停止
+        if (isPlaying) {
+            pauseMedia();
         }
         
         combineButton.disabled = true;
@@ -1661,6 +1650,10 @@ document.addEventListener('DOMContentLoaded', function() {
             const url = URL.createObjectURL(blob);
 
             // 新しいaudio要素を作成
+            if (combinedAudioElement) {
+                combinedAudioElement.pause();
+                URL.revokeObjectURL(combinedAudioElement.src);
+            }
             combinedAudioElement = new Audio(url);
             combinedAudioElement.preservesPitch = true;
             combinedAudioElement.mozPreservesPitch = true;
@@ -1668,6 +1661,7 @@ document.addEventListener('DOMContentLoaded', function() {
             combinedAudioElement.playbackRate = currentPlaybackRate;
 
             isAudioCombined = true;
+            isTimeApplied = false; // 音声再合成時に時間設定をリセット
             combineStatus.textContent = "音声の合成が完了しました";
             enablePlayerControls();
 
@@ -1730,7 +1724,7 @@ document.addEventListener('DOMContentLoaded', function() {
             
             // 動画終了時に自動的にPiPを閉じる（次回再開のため）
             video.addEventListener('ended', exitPiP);
-            
+
             // 合成後に音量と再生速度を適用
             applyVolume();
             applyPlaybackRate();
@@ -1848,7 +1842,7 @@ document.addEventListener('DOMContentLoaded', function() {
         setEndTimeBtn.disabled = false;
         playbackSpeedSlider.disabled = false;
         applyTimeBtn.disabled = false;
-        blankModeBtn.disabled = false;
+        blackVideoToggle.disabled = false;
     }
 
     // プレビュー再生
@@ -1904,6 +1898,7 @@ document.addEventListener('DOMContentLoaded', function() {
             endTimeInput.max = videoDuration;
             startTimeInput.max = videoDuration - 0.1;
             updateTimeDisplay();
+            updateProgressMarkers(); // マーカーを初期化
             checkLoadingComplete();
         } catch (error) {
             handleError(error, '動画メタデータ読み込み中にエラーが発生しました');
@@ -1917,11 +1912,15 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // 再生ボタンクリック
     playPauseBtn.addEventListener('click', function() {
-        if (video.currentTime >= appliedEndTime) {
-            video.currentTime = appliedStartTime;
-            if (combinedAudioElement) {
-                combinedAudioElement.currentTime = appliedStartTime;
-            }
+        if (!isTimeApplied) {
+            alert('時間設定を適用してください');
+            return;
+        }
+        
+        const endTime = parseFloat(endTimeInput.value) || videoDuration;
+        if (video.currentTime >= endTime) {
+            const startTime = parseFloat(startTimeInput.value) || 0;
+            seekMedia(startTime);
         }
         togglePlayPause();
     });
@@ -1966,9 +1965,11 @@ document.addEventListener('DOMContentLoaded', function() {
     function playMedia() {
         try {
             const duration = video.duration || videoDuration;
+            const startTime = parseFloat(startTimeInput.value) || 0;
+            const endTime = parseFloat(endTimeInput.value) || duration;
             
-            if (video.currentTime >= appliedEndTime) {
-                video.currentTime = appliedStartTime;
+            if (video.currentTime >= endTime) {
+                video.currentTime = startTime;
             }
             
             const playPromise = video.play();
@@ -2017,17 +2018,24 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // 時間更新時の処理
     video.addEventListener('timeupdate', function() {
+        if (!isTimeApplied) return;
+        
         const duration = video.duration || videoDuration;
+        const endTime = parseFloat(endTimeInput.value) || duration;
         
-        if (video.currentTime >= appliedEndTime && appliedEndTime > 0) {
+        if (video.currentTime >= endTime && endTime > 0) {
             if (loopCheckbox.checked) {
-                video.currentTime = appliedStartTime;
+                const startTime = parseFloat(startTimeInput.value) || 0;
+                video.currentTime = startTime;
                 if (combinedAudioElement) {
-                    combinedAudioElement.currentTime = appliedStartTime;
+                    combinedAudioElement.currentTime = startTime;
                 }
             } else {
                 pauseMedia();
-                video.currentTime = appliedEndTime;
+                video.currentTime = endTime;
+                if (combinedAudioElement) {
+                    combinedAudioElement.currentTime = endTime;
+                }
             }
         }
         
@@ -2049,7 +2057,10 @@ document.addEventListener('DOMContentLoaded', function() {
     function seekMedia(time) {
         try {
             const duration = video.duration || videoDuration;
-            const seekTime = Math.max(appliedStartTime, Math.min(time, appliedEndTime));
+            const startTime = parseFloat(startTimeInput.value) || 0;
+            const endTime = parseFloat(endTimeInput.value) || duration;
+            
+            const seekTime = Math.max(startTime, Math.min(time, endTime));
             video.currentTime = seekTime;
             
             if (combinedAudioElement) {
@@ -2352,8 +2363,22 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
     
-    // 消画モードボタンのクリック処理
-    blankModeBtn.addEventListener('click', toggleBlankMode);
+    // 消画モード切り替え
+    blackVideoToggle.addEventListener('click', function() {
+        isBlackVideoMode = !isBlackVideoMode;
+        
+        if (isBlackVideoMode) {
+            // 消画モードON
+            video.style.filter = 'brightness(0)';
+            this.style.backgroundColor = '#64ffda';
+            this.style.color = '#0a192f';
+        } else {
+            // 消画モードOFF
+            video.style.filter = '';
+            this.style.backgroundColor = '';
+            this.style.color = '';
+        }
+    });
     
     // 合成ボタンクリック
     combineButton.addEventListener('click', combineAudio);
@@ -2408,7 +2433,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
 // タイムマーカー関連のコード
 document.addEventListener('DOMContentLoaded', function() {
-    // 必要なDOM要素を取得
+    // まず必要なDOM要素を取得
     const startMarker = document.getElementById('start-marker');
     const endMarker = document.getElementById('end-marker');
     const video = document.getElementById('video');
@@ -2505,21 +2530,20 @@ document.addEventListener('DOMContentLoaded', function() {
             const endTime = parseFloat(endTimeInput.value) || duration;
 
             if (duration > 0) {
-                    if(startMarker) startMarker.style.left = `${(startTime / duration) * 100}%`;
-                    if(endMarker) endMarker.style.left = `${(endTime / duration) * 100}%`;
-
                     // 開始時間が0の場合はマーカーを非表示
-                    if(startTime <= 0 && startMarker) {
-                        startMarker.style.display = 'none';
-                    } else if(startMarker) {
-                        startMarker.style.display = 'block';
+                    if (startTime <= 0) {
+                            if(startMarker) startMarker.style.display = 'none';
+                    } else {
+                            if(startMarker) startMarker.style.left = `${(startTime / duration) * 100}%`;
+                            if(startMarker) startMarker.style.display = 'block';
                     }
-
+                    
                     // 終了時間が動画の長さと同じ場合はマーカーを非表示
-                    if(endTime >= duration && endMarker) {
-                        endMarker.style.display = 'none';
-                    } else if(endMarker) {
-                        endMarker.style.display = 'block';
+                    if (endTime >= duration) {
+                            if(endMarker) endMarker.style.display = 'none';
+                    } else {
+                            if(endMarker) endMarker.style.left = `${(endTime / duration) * 100}%`;
+                            if(endMarker) endMarker.style.display = 'block';
                     }
             }
     }