Update index.html

index.html

@@ -1235,438 +1235,418 @@ window.addEventListener('load', async () => {
         <!-- 全画面時のロックボタン -->
         <button class="lock-controls-btn" id="lock-controls-btn" title="コントロールバーを固定">🔒</button>
         <script>
-document.addEventListener('DOMContentLoaded', function() {
-    // 同期管理用の変数
-    let lastSyncTime = 0;
-    let isBuffering = false;
-    let syncDriftLog = [];
-    let syncCheckInterval;
-    let audioContext;
-    let controlsHideTimeout;
-    let isControlsLocked = false;
-    let controlsVisible = true;
-    let isCheckingSync = false;
-    let isInBackgroundTab = false;
-    let isBlackVideoMode = false; // 消画モードフラグ
-    
-    try {
-        audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    } catch (e) {
-        console.error('Web Audio APIがサポートされていません:', e);
-    }
-
-    // テクノロジー風背景を生成
-    function createTechBackground() {
-        const bg = document.getElementById('techBg');
-        
-        for (let i = 0; i < 200; i++) {
-            const line = document.createElement('div');
-            line.className = 'circuit-line';
+            document.addEventListener('DOMContentLoaded', function() {
+                // 同期管理用の変数
+                let lastSyncTime = 0;
+                let isBuffering = false;
+                let syncDriftLog = [];
+                let syncCheckInterval;
+                let audioContext;
+                let controlsHideTimeout;
+                let isControlsLocked = false;
+                let controlsVisible = true;
+                let isCheckingSync = false;
+                let isInBackgroundTab = false;
+                
+                try {
+                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                } catch (e) {
+                    console.error('Web Audio APIがサポートされていません:', e);
+                }
             
-            const isHorizontal = Math.random() > 0.5;
-            if (isHorizontal) {
-                line.style.width = `${Math.random() * 300 + 100}px`;
-                line.style.height = '1px';
-            } else {
-                line.style.width = '1px';
-                line.style.height = `${Math.random() * 300 + 100}px`;
+                // テクノロジー風背景を生成
+                function createTechBackground() {
+                    const bg = document.getElementById('techBg');
+                    
+                    for (let i = 0; i < 200; i++) {
+                        const line = document.createElement('div');
+                        line.className = 'circuit-line';
+                        
+                        const isHorizontal = Math.random() > 0.5;
+                        if (isHorizontal) {
+                            line.style.width = `${Math.random() * 300 + 100}px`;
+                            line.style.height = '1px';
+                        } else {
+                            line.style.width = '1px';
+                            line.style.height = `${Math.random() * 300 + 100}px`;
+                        }
+                        
+                        line.style.left = `${Math.random() * 100}%`;
+                        line.style.top = `${Math.random() * 100}%`;
+                        line.style.opacity = Math.random() * 0.5 + 0.1;
+                        bg.appendChild(line);
+                    }
+            
+                    for (let i = 0; i < 200; i++) {
+                        const dot = document.createElement('div');
+                        dot.className = 'grid-dot';
+                        dot.style.left = `${Math.random() * 100}%`;
+                        dot.style.top = `${Math.random() * 100}%`;
+                        bg.appendChild(dot);
+                    }
+            
+                    for (let i = 0; i < 15; i++) {
+                        const hex = document.createElement('div');
+                        hex.className = 'hexagon';
+                        hex.style.left = `${Math.random() * 100}%`;
+                        hex.style.top = `${Math.random() * 100}%`;
+                        hex.style.transform = `rotate(${Math.random() * 360}deg)`;
+                        hex.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out`;
+                        bg.appendChild(hex);
+                    }
+            
+                    for (let i = 0; i < 8; i++) {
+                        const pulse = document.createElement('div');
+                        pulse.className = 'pulse';
+                        pulse.style.left = `${Math.random() * 100}%`;
+                        pulse.style.top = `${Math.random() * 100}%`;
+                        pulse.style.animationDelay = `${Math.random() * 2}s`;
+                        bg.appendChild(pulse);
+                    }
+                }
+                
+                createTechBackground();
+              
+                const urlParams = new URLSearchParams(window.location.search);
+                const isTMode = urlParams.has('mode') && urlParams.get('mode') === 't';
+                const basePath = isTMode ? '/t/' : '/';
+              
+                // ローディング状態を管理
+                let loadingCount = 0;
+                let totalToLoad = 6; // 動画 + 5つの音声ファイル
+                let lastUpdateTime = 0;
+                const updateInterval = 1;
+                
+                function checkLoadingComplete() {
+                    loadingCount++;
+                    if (loadingCount >= totalToLoad) {
+                        setTimeout(function() {
+                            const loadingOverlay = document.getElementById('loadingOverlay');
+                            loadingOverlay.style.opacity = '0';
+                            setTimeout(function() {
+                                loadingOverlay.style.display = 'none';
+                            }, 1000);
+                        }, 500);
+                    }
+                }
+                
+                function handleError(error, message) {
+                    console.error(message, error);
+                    window.alert(`${message}\n\nエラー詳細: ${error.message}`);
+                }
+            
+                // 要素を取得
+                const video = document.getElementById('video');
+                video.preservesPitch = true;
+                video.mozPreservesPitch = true; // Firefox用
+                video.webkitPreservesPitch = true; // 古いWebKit用
+                const videoContainer = document.getElementById('video-container');
+                const playPauseBtn = document.getElementById('play-pause-btn');
+                const timeDisplay = document.getElementById('time-display');
+                const progressContainer = document.getElementById('progress-container');
+                const progressBar = document.getElementById('progress-bar');
+                const progressTime = document.getElementById('progress-time');
+                const volumeBtn = document.getElementById('volume-btn');
+                const volumeSlider = document.getElementById('volume-slider');
+                const speedSlider = document.getElementById('speed-slider');
+                const speedValue = document.getElementById('speed-value');
+                const playbackSpeedSlider = document.getElementById('playback-speed');
+                const playbackSpeedValue = document.getElementById('playback-speed-value');
+                const fullscreenBtn = document.getElementById('fullscreen-btn');
+                const startTimeInput = document.getElementById('start-time');
+                const endTimeInput = document.getElementById('end-time');
+                const loopCheckbox = document.getElementById('loop');
+                const globalVolumeSlider = document.getElementById('global-volume');
+                const globalVolumeValue = document.getElementById('global-volume-value');
+                const audioSliders = document.querySelectorAll('.audio-slider');
+                const volumeValues = document.querySelectorAll('.volume-value');
+                const setStartTimeBtn = document.getElementById('set-start-time');
+                const setEndTimeBtn = document.getElementById('set-end-time');
+                const resetEndTimeBtn = document.getElementById('reset-end-time');
+                const disabledOverlay = document.getElementById('disabledOverlay');
+                const combineButton = document.getElementById('combine-button');
+                const combineStatus = document.getElementById('combine-status');
+                const previewSection = document.getElementById('preview-section');
+                const previewButton = document.getElementById('preview-button');
+                const previewTime = document.getElementById('preview-time');
+                const bufferingIndicator = document.getElementById('buffering-indicator');
+                const syncStatus = document.getElementById('sync-status');
+                const syncStatusText = document.getElementById('sync-status-text');
+                const syncStatusClose = document.getElementById('sync-status-close');
+                const lockControlsBtn = document.getElementById('lock-controls-btn');
+                const startMarker = document.getElementById('start-marker');
+                const endMarker = document.getElementById('end-marker');
+                const tempoInput = document.getElementById('tempo');
+                const tempoSpeedValue = document.getElementById('tempo-speed-value');
+                const videoControls = document.querySelector('.video-controls');
+                const applyTimeBtn = document.getElementById('apply-time-btn');
+              
+                // 音声オブジェクトを作成
+                const audioElements = {};
+                const audioBuffers = {};
+                const audioFiles = ['p', 'a', 't', 's', 'k'];
+                let combinedAudioElement = null;
+                let isAudioCombined = false;
+                let currentVolumes = { p: 0, a: 1, t: 1, s: 1, k: 0 };
+                
+                // 初期化
+                let videoDuration = 0;
+                let isPlaying = false;
+                let lastVolume = 1;
+                let currentPlaybackRate = 1;
+                let isFullscreen = false;
+            
+                async function enterPiP() {
+                if (!document.pictureInPictureElement && !video.paused) {
+                  try {
+                    await video.requestPictureInPicture();
+                  } catch (err) {
+                    console.warn('PiP開始失敗:', err);
+                  }
+                }
+              }
+            
+              async function exitPiP() {
+                if (document.pictureInPictureElement) {
+                  try {
+                    await document.exitPictureInPicture();
+                  } catch (err) {
+                    console.warn('PiP終了失敗:', err);
+                  }
+                }
+              }
+            
+              
+                // 動画のバッファリング状態を監視
+                video.addEventListener('waiting', function() {
+                    isBuffering = true;
+                    bufferingIndicator.style.display = 'block';
+                    if (combinedAudioElement) {
+                        combinedAudioElement.pause();
+                    }
+                });
+                
+                video.addEventListener('playing', function() {
+                    isBuffering = false;
+                    bufferingIndicator.style.display = 'none';
+                    if (combinedAudioElement && isPlaying) {
+                        syncAudioWithVideo();
+                    }
+                });
+                
+                video.addEventListener('suspend', function() {
+                    console.log('動画の読み込みが一時停止しました');
+                });
+                
+                video.addEventListener('stalled', function() {
+                    console.log('動画の読み込みが停滞しました');
+                    if (isPlaying) {
+                        pauseMedia();
+                    }
+                });
+            
+            function startSyncCheck() {
+              if (isCheckingSync) return;
+              isCheckingSync = true;
+              if (syncCheckInterval) clearInterval(syncCheckInterval);
+              syncCheckInterval = setInterval(checkSync, 1000);
             }
             
-            line.style.left = `${Math.random() * 100}%`;
-            line.style.top = `${Math.random() * 100}%`;
-            line.style.opacity = Math.random() * 0.5 + 0.1;
-            bg.appendChild(line);
-        }
-
-        for (let i = 0; i < 200; i++) {
-            const dot = document.createElement('div');
-            dot.className = 'grid-dot';
-            dot.style.left = `${Math.random() * 100}%`;
-            dot.style.top = `${Math.random() * 100}%`;
-            bg.appendChild(dot);
-        }
-
-        for (let i = 0; i < 15; i++) {
-            const hex = document.createElement('div');
-            hex.className = 'hexagon';
-            hex.style.left = `${Math.random() * 100}%`;
-            hex.style.top = `${Math.random() * 100}%`;
-            hex.style.transform = `rotate(${Math.random() * 360}deg)`;
-            hex.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out`;
-            bg.appendChild(hex);
-        }
-
-        for (let i = 0; i < 8; i++) {
-            const pulse = document.createElement('div');
-            pulse.className = 'pulse';
-            pulse.style.left = `${Math.random() * 100}%`;
-            pulse.style.top = `${Math.random() * 100}%`;
-            pulse.style.animationDelay = `${Math.random() * 2}s`;
-            bg.appendChild(pulse);
-        }
-    }
-    
-    createTechBackground();
-  
-    const urlParams = new URLSearchParams(window.location.search);
-    const isTMode = urlParams.has('mode') && urlParams.get('mode') === 't';
-    const basePath = isTMode ? '/t/' : '/';
-  
-    // ローディング状態を管理
-    let loadingCount = 0;
-    let totalToLoad = 6; // 動画 + 5つの音声ファイル
-    let lastUpdateTime = 0;
-    const updateInterval = 1;
-    
-    function checkLoadingComplete() {
-        loadingCount++;
-        if (loadingCount >= totalToLoad) {
-            setTimeout(function() {
-                const loadingOverlay = document.getElementById('loadingOverlay');
-                loadingOverlay.style.opacity = '0';
-                setTimeout(function() {
-                    loadingOverlay.style.display = 'none';
-                }, 1000);
-            }, 500);
-        }
-    }
-    
-    function handleError(error, message) {
-        console.error(message, error);
-        window.alert(`${message}\n\nエラー詳細: ${error.message}`);
-    }
-
-    // 要素を取得
-    const video = document.getElementById('video');
-    video.preservesPitch = true;
-    video.mozPreservesPitch = true; // Firefox用
-    video.webkitPreservesPitch = true; // 古いWebKit用
-    const videoContainer = document.getElementById('video-container');
-    const playPauseBtn = document.getElementById('play-pause-btn');
-    const timeDisplay = document.getElementById('time-display');
-    const progressContainer = document.getElementById('progress-container');
-    const progressBar = document.getElementById('progress-bar');
-    const progressTime = document.getElementById('progress-time');
-    const volumeBtn = document.getElementById('volume-btn');
-    const volumeSlider = document.getElementById('volume-slider');
-    const speedSlider = document.getElementById('speed-slider');
-    const speedValue = document.getElementById('speed-value');
-    const playbackSpeedSlider = document.getElementById('playback-speed');
-    const playbackSpeedValue = document.getElementById('playback-speed-value');
-    const fullscreenBtn = document.getElementById('fullscreen-btn');
-    const startTimeInput = document.getElementById('start-time');
-    const endTimeInput = document.getElementById('end-time');
-    const loopCheckbox = document.getElementById('loop');
-    const globalVolumeSlider = document.getElementById('global-volume');
-    const globalVolumeValue = document.getElementById('global-volume-value');
-    const audioSliders = document.querySelectorAll('.audio-slider');
-    const volumeValues = document.querySelectorAll('.volume-value');
-    const setStartTimeBtn = document.getElementById('set-start-time');
-    const setEndTimeBtn = document.getElementById('set-end-time');
-    const resetEndTimeBtn = document.getElementById('reset-end-time');
-    const disabledOverlay = document.getElementById('disabledOverlay');
-    const combineButton = document.getElementById('combine-button');
-    const combineStatus = document.getElementById('combine-status');
-    const previewSection = document.getElementById('preview-section');
-    const previewButton = document.getElementById('preview-button');
-    const previewTime = document.getElementById('preview-time');
-    const bufferingIndicator = document.getElementById('buffering-indicator');
-    const syncStatus = document.getElementById('sync-status');
-    const syncStatusText = document.getElementById('sync-status-text');
-    const syncStatusClose = document.getElementById('sync-status-close');
-    const lockControlsBtn = document.getElementById('lock-controls-btn');
-    const startMarker = document.getElementById('start-marker');
-    const endMarker = document.getElementById('end-marker');
-    const tempoInput = document.getElementById('tempo');
-    const tempoSpeedValue = document.getElementById('tempo-speed-value');
-    const videoControls = document.querySelector('.video-controls');
-    const applyTimeBtn = document.getElementById('apply-time-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 = {};
-    const audioBuffers = {};
-    const audioFiles = ['p', 'a', 't', 's', 'k'];
-    let combinedAudioElement = null;
-    let isAudioCombined = false;
-    let currentVolumes = { p: 0, a: 1, t: 1, s: 1, k: 0 };
-    
-    // 初期化
-    let videoDuration = 0;
-    let isPlaying = false;
-    let lastVolume = 1;
-    let currentPlaybackRate = 1;
-    let isFullscreen = false;
-    let isTimeApplied = false; // 時間設定が適用されたかどうか
-
-    async function enterPiP() {
-        if (!document.pictureInPictureElement && !video.paused) {
-            try {
-                await video.requestPictureInPicture();
-            } catch (err) {
-                console.warn('PiP開始失敗:', err);
+            function stopSyncCheck() {
+              isCheckingSync = false;
+              if (syncCheckInterval) clearInterval(syncCheckInterval);
             }
-        }
-    }
-
-    async function exitPiP() {
-        if (document.pictureInPictureElement) {
-            try {
-                await document.exitPictureInPicture();
-            } catch (err) {
-                console.warn('PiP終了失敗:', err);
+            
+            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();
+              }
             }
-        }
-    }
 
-    // 動画のバッファリング状態を監視
-    video.addEventListener('waiting', function() {
-        isBuffering = true;
-        bufferingIndicator.style.display = 'block';
-        if (combinedAudioElement) {
-            combinedAudioElement.pause();
-        }
-    });
-    
-    video.addEventListener('playing', function() {
-        isBuffering = false;
-        bufferingIndicator.style.display = 'none';
-        if (combinedAudioElement && isPlaying) {
-            syncAudioWithVideo();
-        }
-    });
-    
-    video.addEventListener('suspend', function() {
-        console.log('動画の読み込みが一時停止しました');
-    });
-    
-    video.addEventListener('stalled', function() {
-        console.log('動画の読み込みが停滞しました');
-        if (isPlaying) {
-            pauseMedia();
-        }
-    });
-
-    function startSyncCheck() {
-        if (isCheckingSync) return;
-        isCheckingSync = true;
-        if (syncCheckInterval) clearInterval(syncCheckInterval);
-        syncCheckInterval = setInterval(checkSync, 1000);
+              applyTimeBtn.addEventListener('click', function() {
+    // 現在再生中なら一時停止
+    const wasPlaying = isPlaying;
+    if (isPlaying) {
+        pauseMedia();
     }
     
-    function stopSyncCheck() {
-        isCheckingSync = false;
-        if (syncCheckInterval) clearInterval(syncCheckInterval);
-    }
+    // 開始時間と終了時間を取得
+    const startTime = parseFloat(startTimeInput.value) || 0;
+    const endTime = parseFloat(endTimeInput.value) || video.duration;
     
-    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();
+    // 現在位置が開始時間より前なら開始時間に移動
+    if (video.currentTime < startTime) {
+        video.currentTime = startTime;
+        if (combinedAudioElement) {
+            combinedAudioElement.currentTime = startTime;
         }
     }
-
-    applyTimeBtn.addEventListener('click', function() {
-        // 時間設定を適用
-        isTimeApplied = true;
-        
-        // 現在再生中なら一時停止
-        const wasPlaying = isPlaying;
-        if (isPlaying) {
-            pauseMedia();
-        }
-        
-        // 開始時間と終了時間を取得
-        const startTime = parseFloat(startTimeInput.value) || 0;
-        const endTime = parseFloat(endTimeInput.value) || video.duration;
-        
-        // 現在位置が開始時間より前なら開始時間に移動
-        if (video.currentTime < startTime) {
-            video.currentTime = startTime;
-            if (combinedAudioElement) {
-                combinedAudioElement.currentTime = startTime;
-            }
-        }
-        // 現在位置が終了時間より後なら開始時間に移動
-        else if (video.currentTime > endTime) {
-            video.currentTime = startTime;
-            if (combinedAudioElement) {
-                combinedAudioElement.currentTime = startTime;
-            }
-        }
-        
-        // 再生中だった場合は再開
-        if (wasPlaying) {
-            playMedia();
-        }
-        
-        // マーカーを更新
-        updateProgressMarkers();
-    });
-
-    // 音声を動画に同期させる関数
-    function syncAudioWithVideo() {
-        if (!isAudioCombined || !isPlaying) return;
-        
-        const currentTime = video.currentTime;
-        
+    // 現在位置が終了時間より後なら開始時間に移動
+    else if (video.currentTime > endTime) {
+        video.currentTime = startTime;
         if (combinedAudioElement) {
-            combinedAudioElement.currentTime = currentTime;
-            if (isPlaying) {
-                combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
-            }
+            combinedAudioElement.currentTime = startTime;
         }
-        
-        // ズレ記録をリセット
-        syncDriftLog = [];
-        lastSyncTime = performance.now();
     }
-
-    // 音声ファイルをロード
-    function loadAudioFiles() {
-        audioFiles.forEach(file => {
-            try {
-                const audio = new Audio(`${basePath}${file}.mp3`);
-                audio.preload = 'auto';
-                audio.loop = false;
-                audioElements[file] = audio;
-                
-                audio.addEventListener('loadedmetadata', function() {
-                    console.log(`${basePath}${file}.mp3 loaded`);
-                    checkLoadingComplete();
-                });
-                
-                audio.addEventListener('error', function() {
-                    console.error(`音声ファイル読み込みエラー (${basePath}${file}.mp3):`, audio.error);
-                    checkLoadingComplete();
-                });
-            } catch (error) {
-                console.error(`音声ファイル初期化エラー (${basePath}${file}.mp3):`, error);
-                checkLoadingComplete();
-            }
-        });
+    
+    // 再生中だった場合は再開
+    if (wasPlaying) {
+        playMedia();
     }
+    
+    // マーカーを更新
+    updateProgressMarkers();
+});
 
-    // 音声を結合する関数
-    async function combineAudio() {
-        // 再生中なら停止
-        if (isPlaying) {
-            pauseMedia();
-        }
-        
-        combineButton.disabled = true;
-        combineStatus.textContent = "音声を合成中...";
-
-        try {
-            // 現在の音量設定を保存
-            audioFiles.forEach(file => {
-                currentVolumes[file] = parseFloat(document.querySelector(`.audio-slider[data-audio="${file}"]`).value);
-            });
-
-            // 各音声ファイルをデコード
-            const audioBufferPromises = audioFiles.map(async file => {
-                const audio = audioElements[file];
-                if (!audio) return null;
-
-                // 音量が0の場合はスキップ
-                if (currentVolumes[file] === 0) return null;
-
-                const response = await fetch(`${basePath}${file}.mp3`);
-                const arrayBuffer = await response.arrayBuffer();
-                return await audioContext.decodeAudioData(arrayBuffer);
-            });
-
-            // すべての音声バッファを取得
-            const buffers = await Promise.all(audioBufferPromises);
-            audioFiles.forEach((file, index) => {
-                audioBuffers[file] = buffers[index];
-            });
-
-            // 最長の音声バッファの長さを取得
-            const maxDuration = Math.max(...buffers.filter(b => b).map(b => b.duration));
-
-            // 新しい音声バッファを作成
-            const combinedAudioBuffer = audioContext.createBuffer(
-                2, // ステレオ
-                audioContext.sampleRate * maxDuration,
-                audioContext.sampleRate
-            );
-
-            // 各音声バッファを結合
-            for (let file of audioFiles) {
-                if (!audioBuffers[file] || currentVolumes[file] === 0) continue;
-
-                const buffer = audioBuffers[file];
-                const volume = currentVolumes[file];
-
-                // 各チャンネルに音声を加算
-                for (let channel = 0; channel < 2; channel++) {
-                    const inputData = buffer.getChannelData(channel % buffer.numberOfChannels);
-                    const outputData = combinedAudioBuffer.getChannelData(channel);
-
-                    for (let i = 0; i < inputData.length; i++) {
-                        outputData[i] += inputData[i] * volume;
-                    }
-                }
-            }
-
-            // 音量を正規化 (クリッピング防止)
-            for (let channel = 0; channel < 2; channel++) {
-                const outputData = combinedAudioBuffer.getChannelData(channel);
-                let max = 0;
-                
-                for (let i = 0; i < outputData.length; i++) {
-                    if (Math.abs(outputData[i]) > max) {
-                        max = Math.abs(outputData[i]);
+                // 音声を動画に同期させる関数
+                function syncAudioWithVideo() {
+                    if (!isAudioCombined || !isPlaying) return;
+                    
+                    const currentTime = video.currentTime;
+                    
+                    if (combinedAudioElement) {
+                        combinedAudioElement.currentTime = currentTime;
+                        if (isPlaying) {
+                            combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
+                        }
                     }
+                    
+                    // ズレ記録をリセット
+                    syncDriftLog = [];
+                    lastSyncTime = performance.now();
                 }
-
-                if (max > 1) {
-                    for (let i = 0; i < outputData.length; i++) {
-                        outputData[i] /= max;
-                    }
+            
+                // 音声��ァイルをロード
+                function loadAudioFiles() {
+                    audioFiles.forEach(file => {
+                        try {
+                            const audio = new Audio(`${basePath}${file}.mp3`);
+                            audio.preload = 'auto';
+                            audio.loop = false;
+                            audioElements[file] = audio;
+                            
+                            audio.addEventListener('loadedmetadata', function() {
+                                console.log(`${basePath}${file}.mp3 loaded`);
+                                checkLoadingComplete();
+                            });
+                            
+                            audio.addEventListener('error', function() {
+                                console.error(`音声ファイル読み込みエラー (${basePath}${file}.mp3):`, audio.error);
+                                checkLoadingComplete();
+                            });
+                        } catch (error) {
+                            console.error(`音声ファイル初期化エラー (${basePath}${file}.mp3):`, error);
+                            checkLoadingComplete();
+                        }
+                    });
                 }
-            }
-
-            // AudioBufferをBlobに変換
-            const blob = bufferToWave(combinedAudioBuffer);
-            const url = URL.createObjectURL(blob);
-
-            // 新しいaudio要素を作成
-            if (combinedAudioElement) {
-                combinedAudioElement.pause();
-                URL.revokeObjectURL(combinedAudioElement.src);
-            }
-            combinedAudioElement = new Audio(url);
-            combinedAudioElement.preservesPitch = true;
-            combinedAudioElement.mozPreservesPitch = true;
-            combinedAudioElement.webkitPreservesPitch = true;
-            combinedAudioElement.playbackRate = currentPlaybackRate;
-
-            isAudioCombined = true;
-            isTimeApplied = false; // 音声再合成時に時間設定をリセット
-            combineStatus.textContent = "音声の合成が完了しました";
-            enablePlayerControls();
-
-            combineButton.disabled = false;
-
+            
+                // 音声を結合する関数
+                async function combineAudio() {
+                    combineButton.disabled = true;
+                    combineStatus.textContent = "音声を合成中...";
+            
+                    try {
+                        // 現在の音量設定を保存
+                        audioFiles.forEach(file => {
+                            currentVolumes[file] = parseFloat(document.querySelector(`.audio-slider[data-audio="${file}"]`).value);
+                        });
+            
+                        // 各音声ファイルをデコード
+                        const audioBufferPromises = audioFiles.map(async file => {
+                            const audio = audioElements[file];
+                            if (!audio) return null;
+            
+                            // 音量が0の場合はスキップ
+                            if (currentVolumes[file] === 0) return null;
+            
+                            const response = await fetch(`${basePath}${file}.mp3`);
+                            const arrayBuffer = await response.arrayBuffer();
+                            return await audioContext.decodeAudioData(arrayBuffer);
+                        });
+            
+                        // すべての音声バッファを取得
+                        const buffers = await Promise.all(audioBufferPromises);
+                        audioFiles.forEach((file, index) => {
+                            audioBuffers[file] = buffers[index];
+                        });
+            
+                        // 最長の音声バッファの長さを取得
+                        const maxDuration = Math.max(...buffers.filter(b => b).map(b => b.duration));
+            
+                        // 新しい音声バッファを作成
+                        const combinedAudioBuffer = audioContext.createBuffer(
+                            2, // ステレオ
+                            audioContext.sampleRate * maxDuration,
+                            audioContext.sampleRate
+                        );
+            
+                        // 各音声バッファを結合
+                        for (let file of audioFiles) {
+                            if (!audioBuffers[file] || currentVolumes[file] === 0) continue;
+            
+                            const buffer = audioBuffers[file];
+                            const volume = currentVolumes[file];
+            
+                            // 各チャンネルに音声を加算
+                            for (let channel = 0; channel < 2; channel++) {
+                                const inputData = buffer.getChannelData(channel % buffer.numberOfChannels);
+                                const outputData = combinedAudioBuffer.getChannelData(channel);
+            
+                                for (let i = 0; i < inputData.length; i++) {
+                                    outputData[i] += inputData[i] * volume;
+                                }
+                            }
+                        }
+            
+                        // 音量を正規化 (クリッピング防止)
+                        for (let channel = 0; channel < 2; channel++) {
+                            const outputData = combinedAudioBuffer.getChannelData(channel);
+                            let max = 0;
+                            
+                            for (let i = 0; i < outputData.length; i++) {
+                                if (Math.abs(outputData[i]) > max) {
+                                    max = Math.abs(outputData[i]);
+                                }
+                            }
+            
+                            if (max > 1) {
+                                for (let i = 0; i < outputData.length; i++) {
+                                    outputData[i] /= max;
+                                }
+                            }
+                        }
+            
+                        // AudioBufferをBlobに変換
+                        const blob = bufferToWave(combinedAudioBuffer);
+                        const url = URL.createObjectURL(blob);
+            
+                        // 新しいaudio要素を作成
+                        combinedAudioElement = new Audio(url);
+                        combinedAudioElement.preservesPitch = true;
+                        combinedAudioElement.mozPreservesPitch = true;
+                        combinedAudioElement.webkitPreservesPitch = true;
+                        combinedAudioElement.playbackRate = currentPlaybackRate;
+            
+                        isAudioCombined = true;
+                        combineStatus.textContent = "音声の合成が完了しました";
+                        enablePlayerControls();
+            
+                        combineButton.disabled = false;
+            
             document.addEventListener('visibilitychange', async () => {
                 if (document.hidden) {
                     // タブが非表示になった場合
@@ -1722,716 +1702,680 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             });
             
-            // 動画終了時に自動的にPiPを閉じる（次回再開のため）
-            video.addEventListener('ended', exitPiP);
-
-            // 合成後に音量と再生速度を適用
-            applyVolume();
-            applyPlaybackRate();
-
-        } catch (error) {
-            console.error('音声合成エラー:', error);
-            combineStatus.textContent = "音声の合成に失敗しました";
-            combineButton.disabled = false;
-        }
-    }
-
-    function bufferToWave(abuffer) {
-        const numOfChan = abuffer.numberOfChannels,
-            length = abuffer.length * numOfChan * 2 + 44,
-            buffer = new ArrayBuffer(length),
-            view = new DataView(buffer),
-            channels = [],
-            sampleRate = abuffer.sampleRate;
             
-        // posをletで宣言（constから変更）
-        let pos = 0;
-
-        // write WAV header
-        setUint32(0x46464952); // "RIFF"
-        setUint32(length - 8); // file length - 8
-        setUint32(0x45564157); // "WAVE"
-
-        setUint32(0x20746d66); // "fmt " chunk
-        setUint32(16); // length = 16
-        setUint16(1); // PCM (uncompressed)
-        setUint16(numOfChan);
-        setUint32(sampleRate);
-        setUint32(sampleRate * 2 * numOfChan);
-        setUint16(numOfChan * 2);
-        setUint16(16);
-
-        setUint32(0x61746164); // "data" - chunk
-        setUint32(length - pos - 4);
-
-        // write interleaved data
-        for (let i = 0; i < abuffer.length; i++) {
-            for (let channel = 0; channel < numOfChan; channel++) {
-                let sample = abuffer.getChannelData(channel)[i] * 0x7fff;
-                if (sample < -32768) sample = -32768;
-                if (sample > 32767) sample = 32767;
-                view.setInt16(pos, sample, true);
-                pos += 2;
-            }
-        }
-
-        function setUint16(data) {
-            view.setUint16(pos, data, true);
-            pos += 2;
-        }
-
-        function setUint32(data) {
-            view.setUint32(pos, data, true);
-            pos += 4;
-        }
-
-        return new Blob([buffer], { type: 'audio/wav' });
-    }
-
-    function applyVolume() {
-        if (!isAudioCombined) return;
-        
-        // ベース音量 (0-1)
-        const baseVolume = parseFloat(volumeSlider.value);
-        // グローバル音量係数 (0-10)
-        const globalVolume = parseFloat(globalVolumeSlider.value) / 10; // 0-1に変換
-        
-        // 最終音量 (0-1)
-        const finalVolume = Math.max(0, Math.min(1, baseVolume * globalVolume));
-        
-        // 動画と音声の音量を設定
-        video.volume = finalVolume;
-        if (combinedAudioElement) {
-            combinedAudioElement.volume = finalVolume;
-        }
-        
-        // 音量アイコンを更新
-        updateVolumeIcon();
-    }
-
-    function applyPlaybackRate() {
-        if (!isAudioCombined) return;
-        
-        const speed = parseFloat(playbackSpeedSlider.value);
-        currentPlaybackRate = speed;
-        video.playbackRate = speed;
-        
-        if (combinedAudioElement) {
-            combinedAudioElement.playbackRate = speed;
-        }
-        
-        speedValue.textContent = speed.toFixed(2) + 'x';
-        playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-        speedSlider.value = speed;
-    }
-
-    // プレイヤーコントロールを有効化
-    function enablePlayerControls() {
-        disabledOverlay.style.display = 'none';
-        playPauseBtn.disabled = false;
-        volumeBtn.disabled = false;
-        volumeSlider.disabled = false;
-        speedSlider.disabled = false;
-        fullscreenBtn.disabled = false;
-        startTimeInput.disabled = false;
-        endTimeInput.disabled = false;
-        resetEndTimeBtn.disabled = false;
-        loopCheckbox.disabled = false;
-        globalVolumeSlider.disabled = false;
-        setStartTimeBtn.disabled = false;
-        setEndTimeBtn.disabled = false;
-        playbackSpeedSlider.disabled = false;
-        applyTimeBtn.disabled = false;
-        blackVideoToggle.disabled = false;
-    }
-
-    // プレビュー再生
-    function togglePreview() {
-        if (!isAudioCombined || !combinedAudioElement) return;
-
-        if (previewButton.textContent === '▶') {
-            // 再生
-            combinedAudioElement.currentTime = 0;
-            combinedAudioElement.play()
-                .then(() => {
-                    previewButton.textContent = '⏸';
-                    
-                    // プレビューの時間表示を更新
-                    const updatePreviewTime = () => {
-                        if (!combinedAudioElement || !isAudioCombined) return;
-                        
-                        const currentTime = combinedAudioElement.currentTime;
-                        const duration = combinedAudioElement.duration;
+              // 動画終了時に自動的にPiPを閉じる（次回再開のため）
+              video.addEventListener('ended', exitPiP);
+                        // 合成後に音量と再生速度を適用
+                        applyVolume();
+                        applyPlaybackRate();
+            
+                    } catch (error) {
+                        console.error('音声合成エラー:', error);
+                        combineStatus.textContent = "音声の合成に失敗しました";
+                        combineButton.disabled = false;
+                    }
+                }
+            
+                function bufferToWave(abuffer) {
+                    const numOfChan = abuffer.numberOfChannels,
+                        length = abuffer.length * numOfChan * 2 + 44,
+                        buffer = new ArrayBuffer(length),
+                        view = new DataView(buffer),
+                        channels = [],
+                        sampleRate = abuffer.sampleRate;
                         
-                        if (currentTime >= duration) {
-                            previewButton.textContent = '▶';
-                            previewTime.textContent = `00:00 / ${formatTime(duration)}`;
-                            return;
+                    // posをletで宣言（constから変更）
+                    let pos = 0;
+            
+                    // write WAV header
+                    setUint32(0x46464952); // "RIFF"
+                    setUint32(length - 8); // file length - 8
+                    setUint32(0x45564157); // "WAVE"
+            
+                    setUint32(0x20746d66); // "fmt " chunk
+                    setUint32(16); // length = 16
+                    setUint16(1); // PCM (uncompressed)
+                    setUint16(numOfChan);
+                    setUint32(sampleRate);
+                    setUint32(sampleRate * 2 * numOfChan);
+                    setUint16(numOfChan * 2);
+                    setUint16(16);
+            
+                    setUint32(0x61746164); // "data" - chunk
+                    setUint32(length - pos - 4);
+            
+                    // write interleaved data
+                    for (let i = 0; i < abuffer.length; i++) {
+                        for (let channel = 0; channel < numOfChan; channel++) {
+                            let sample = abuffer.getChannelData(channel)[i] * 0x7fff;
+                            if (sample < -32768) sample = -32768;
+                            if (sample > 32767) sample = 32767;
+                            view.setInt16(pos, sample, true);
+                            pos += 2;
                         }
-                        
-                        previewTime.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
-                        requestAnimationFrame(updatePreviewTime);
-                    };
+                    }
+            
+                    function setUint16(data) {
+                        view.setUint16(pos, data, true);
+                        pos += 2;
+                    }
+            
+                    function setUint32(data) {
+                        view.setUint32(pos, data, true);
+                        pos += 4;
+                    }
+            
+                    return new Blob([buffer], { type: 'audio/wav' });
+                }
+            
+                function applyVolume() {
+                    if (!isAudioCombined) return;
                     
-                    updatePreviewTime();
-                })
-                .catch(e => console.error('プレビュー再生エラー:', e));
-        } else {
-            // 一時停止
-            combinedAudioElement.pause();
-            previewButton.textContent = '▶';
-        }
-    }
-
-    // 時間をフォーマットするヘルパー関数
-    function formatTime(seconds) {
-        const mins = Math.floor(seconds / 60);
-        const secs = Math.floor(seconds % 60);
-        return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
-    }
-
-    // 動画のメタデータが読み込まれたら
-    video.addEventListener('loadedmetadata', function() {
-        try {
-            videoDuration = video.duration;
-            endTimeInput.value = videoDuration.toFixed(2);
-            endTimeInput.max = videoDuration;
-            startTimeInput.max = videoDuration - 0.1;
-            updateTimeDisplay();
-            updateProgressMarkers(); // マーカーを初期化
-            checkLoadingComplete();
-        } catch (error) {
-            handleError(error, '動画メタデータ読み込み中にエラーが発生しました');
-        }
-    });
-    
-    // 動画エラー処理
-    video.addEventListener('error', function() {
-        handleError(video.error, '動画読み込み中にエラーが発生しました');
-    });
-    
-    // 再生ボタンクリック
-    playPauseBtn.addEventListener('click', function() {
-        if (!isTimeApplied) {
-            alert('時間設定を適用してください');
-            return;
-        }
-        
-        const endTime = parseFloat(endTimeInput.value) || videoDuration;
-        if (video.currentTime >= endTime) {
-            const startTime = parseFloat(startTimeInput.value) || 0;
-            seekMedia(startTime);
-        }
-        togglePlayPause();
-    });
-    
-    // 時間表示を更新
-    function updateTimeDisplay() {
-        const now = performance.now();
-        if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
-        lastUpdateTime = now;
-        
-        try {
-            const currentTime = video.currentTime;
-            const duration = video.duration || videoDuration;
+                    // ベース音量 (0-1)
+                    const baseVolume = parseFloat(volumeSlider.value);
+                    // グローバル音量係数 (0-10)
+                    const globalVolume = parseFloat(globalVolumeSlider.value) / 10; // 0-1に変換
+                    
+                    // 最終音量 (0-1)
+                    const finalVolume = Math.max(0, Math.min(1, baseVolume * globalVolume));
+                    
+                    // 動画と音声の音量を設定
+                    video.volume = finalVolume;
+                    if (combinedAudioElement) {
+                        combinedAudioElement.volume = finalVolume;
+                    }
+                    
+                    // 音量アイコンを更新
+                    updateVolumeIcon();
+                }
             
-            const currentMinutes = Math.floor(currentTime / 60);
-            const currentSeconds = Math.floor(currentTime % 60);
-            const currentMilliseconds = Math.floor((currentTime % 1) * 100);
-            const durationMinutes = Math.floor(duration / 60);
-            const durationSeconds = Math.floor(duration % 60);
-            const durationMilliseconds = Math.floor((duration % 1) * 100);
+                function applyPlaybackRate() {
+                    if (!isAudioCombined) return;
+                    
+                    const speed = parseFloat(playbackSpeedSlider.value);
+                    currentPlaybackRate = speed;
+                    video.playbackRate = speed;
+                    
+                    if (combinedAudioElement) {
+                        combinedAudioElement.playbackRate = speed;
+                    }
+                    
+                    speedValue.textContent = speed.toFixed(2) + 'x';
+                    playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+                    speedSlider.value = speed;
+                }
             
-            timeDisplay.textContent = 
-                `${String(currentMinutes).padStart(2, '0')}:${String(currentSeconds).padStart(2, '0')}.${String(currentMilliseconds).padStart(2, '0')} / ` +
-                `${String(durationMinutes).padStart(2, '0')}:${String(durationSeconds).padStart(2, '0')}.${String(durationMilliseconds).padStart(2, '0')}`;
+                // プレイヤーコントロールを有効化
+                function enablePlayerControls() {
+                    disabledOverlay.style.display = 'none';
+                    playPauseBtn.disabled = false;
+                    volumeBtn.disabled = false;
+                    volumeSlider.disabled = false;
+                    speedSlider.disabled = false;
+                    fullscreenBtn.disabled = false;
+                    startTimeInput.disabled = false;
+                    endTimeInput.disabled = false;
+                    resetEndTimeBtn.disabled = false;
+                    loopCheckbox.disabled = false;
+                    globalVolumeSlider.disabled = false;
+                    setStartTimeBtn.disabled = false;
+                    setEndTimeBtn.disabled = false;
+                    playbackSpeedSlider.disabled = false;
+                    applyTimeBtn.disabled = false;
+                }
             
-            const progressPercent = (currentTime / duration) * 100;
-            progressBar.style.width = `${progressPercent}%`;
-        } catch (error) {
-            console.error('時間表示更新エラー:', error);
-        }
-    }
-    
-    // 再生/一時停止をトグル
-    function togglePlayPause() {
-        if (isPlaying) {
-            pauseMedia();
-        } else {
-            playMedia();
-        }
-    }
-    
-    function playMedia() {
-        try {
-            const duration = video.duration || videoDuration;
-            const startTime = parseFloat(startTimeInput.value) || 0;
-            const endTime = parseFloat(endTimeInput.value) || duration;
+                // プレビュー再生
+                function togglePreview() {
+                    if (!isAudioCombined || !combinedAudioElement) return;
             
-            if (video.currentTime >= endTime) {
-                video.currentTime = startTime;
-            }
+                    if (previewButton.textContent === '▶') {
+                        // 再生
+                        combinedAudioElement.currentTime = 0;
+                        combinedAudioElement.play()
+                            .then(() => {
+                                previewButton.textContent = '⏸';
+                                
+                                // プレビューの時間表示を更新
+                                const updatePreviewTime = () => {
+                                    if (!combinedAudioElement || !isAudioCombined) return;
+                                    
+                                    const currentTime = combinedAudioElement.currentTime;
+                                    const duration = combinedAudioElement.duration;
+                                    
+                                    if (currentTime >= duration) {
+                                        previewButton.textContent = '▶';
+                                        previewTime.textContent = `00:00 / ${formatTime(duration)}`;
+                                        return;
+                                    }
+                                    
+                                    previewTime.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+                                    requestAnimationFrame(updatePreviewTime);
+                                };
+                                
+                                updatePreviewTime();
+                            })
+                            .catch(e => console.error('プレビュー再生エラー:', e));
+                    } else {
+                        // 一時停止
+                        combinedAudioElement.pause();
+                        previewButton.textContent = '▶';
+                    }
+                }
             
-            const playPromise = video.play();
+                // 時間をフォーマットするヘルパー関数
+                function formatTime(seconds) {
+                    const mins = Math.floor(seconds / 60);
+                    const secs = Math.floor(seconds % 60);
+                    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+                }
             
-            if (playPromise !== undefined) {
-                playPromise.then(() => {
-                    isPlaying = true;
-                    playPauseBtn.textContent = '⏸';
+                // 動画のメタデータが読み込まれたら
+                video.addEventListener('loadedmetadata', function() {
+                    try {
+                        videoDuration = video.duration;
+                        endTimeInput.value = videoDuration.toFixed(2);
+                        endTimeInput.max = videoDuration;
+                        startTimeInput.max = videoDuration - 0.1;
+                        updateTimeDisplay();
+                        checkLoadingComplete();
+                    } catch (error) {
+                        handleError(error, '動画メタデータ読み込み中にエラーが発生しました');
+                    }
+                });
+                
+                // 動画エラー処理
+                video.addEventListener('error', function() {
+                    handleError(video.error, '動画読み込み中にエラーが発生しました');
+                });
+                
+                // 再生ボタンクリック
+                playPauseBtn.addEventListener('click', function() {
+                    const endTime = parseFloat(endTimeInput.value) || videoDuration;
+                    if (video.currentTime >= endTime) {
+                        const startTime = parseFloat(startTimeInput.value) || 0;
+                        seekMedia(startTime);
+                    }
+                    togglePlayPause();
+                });
+                
+                // 時間表示を更新
+                function updateTimeDisplay() {
+                    const now = performance.now();
+                    if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
+                    lastUpdateTime = now;
+                    
+                    try {
+                        const currentTime = video.currentTime;
+                        const duration = video.duration || videoDuration;
+                        
+                        const currentMinutes = Math.floor(currentTime / 60);
+                        const currentSeconds = Math.floor(currentTime % 60);
+                        const currentMilliseconds = Math.floor((currentTime % 1) * 100);
+                        const durationMinutes = Math.floor(duration / 60);
+                        const durationSeconds = Math.floor(duration % 60);
+                        const durationMilliseconds = Math.floor((duration % 1) * 100);
+                        
+                        timeDisplay.textContent = 
+                            `${String(currentMinutes).padStart(2, '0')}:${String(currentSeconds).padStart(2, '0')}.${String(currentMilliseconds).padStart(2, '0')} / ` +
+                            `${String(durationMinutes).padStart(2, '0')}:${String(durationSeconds).padStart(2, '0')}.${String(durationMilliseconds).padStart(2, '0')}`;
+                        
+                        const progressPercent = (currentTime / duration) * 100;
+                        progressBar.style.width = `${progressPercent}%`;
+                    } catch (error) {
+                        console.error('時間表示更新エラー:', error);
+                    }
+                }
+                
+                // 再生/一時停止をトグル
+                function togglePlayPause() {
+                    if (isPlaying) {
+                        pauseMedia();
+                    } else {
+                        playMedia();
+                    }
+                }
+                
+            function playMedia() {
+                try {
+                    const duration = video.duration || videoDuration;
+                    const startTime = parseFloat(startTimeInput.value) || 0;
+                    const endTime = parseFloat(endTimeInput.value) || duration;
                     
-                    // 音声を同期して再生
-                    if (isAudioCombined) {
-                        combinedAudioElement.currentTime = video.currentTime;
-                        combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
+                    if (video.currentTime >= endTime) {
+                        video.currentTime = startTime;
                     }
                     
-                    startSyncCheck();
+                    const playPromise = video.play();
                     
-                    video.playbackRate = currentPlaybackRate;
-                }).catch(error => {
-                    console.error('動画再生エラー:', error);
+                    if (playPromise !== undefined) {
+                        playPromise.then(() => {
+                            isPlaying = true;
+                            playPauseBtn.textContent = '⏸';
+                            
+                            // 音声を同期して再生
+                            if (isAudioCombined) {
+                                combinedAudioElement.currentTime = video.currentTime;
+                                combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
+                            }
+                            
+                            startSyncCheck();
+                            
+                            video.playbackRate = currentPlaybackRate;
+                        }).catch(error => {
+                            console.error('動画再生エラー:', error);
+                            isPlaying = false;
+                            playPauseBtn.textContent = '���';
+                        });
+                    }
+                } catch (error) {
+                    console.error('メディア再生エラー:', error);
                     isPlaying = false;
                     playPauseBtn.textContent = '▶';
-                });
+                }
             }
-        } catch (error) {
-            console.error('メディア再生エラー:', error);
-            isPlaying = false;
-            playPauseBtn.textContent = '▶';
-        }
-    }
-    
-    function pauseMedia() {
-        try {
-            video.pause();
-            isPlaying = false;
-            playPauseBtn.textContent = '▶';
-            stopSyncCheck();
             
-            if (combinedAudioElement) {
-                combinedAudioElement.pause();
-            }
-        } catch (error) {
-            console.error('メディア一時停止エラー:', error);
-        }
-    }
-    
-    // 時間更新時の処理
-    video.addEventListener('timeupdate', function() {
-        if (!isTimeApplied) return;
-        
-        const duration = video.duration || videoDuration;
-        const endTime = parseFloat(endTimeInput.value) || duration;
-        
-        if (video.currentTime >= endTime && endTime > 0) {
-            if (loopCheckbox.checked) {
-                const startTime = parseFloat(startTimeInput.value) || 0;
-                video.currentTime = startTime;
-                if (combinedAudioElement) {
-                    combinedAudioElement.currentTime = startTime;
-                }
-            } else {
-                pauseMedia();
-                video.currentTime = endTime;
-                if (combinedAudioElement) {
-                    combinedAudioElement.currentTime = endTime;
+            function pauseMedia() {
+                try {
+                    video.pause();
+                    isPlaying = false;
+                    playPauseBtn.textContent = '▶';
+                    stopSyncCheck();
+                    
+                    if (combinedAudioElement) {
+                        combinedAudioElement.pause();
+                    }
+                } catch (error) {
+                    console.error('メディア一時停止エラー:', error);
                 }
             }
-        }
-        
-        updateTimeDisplay();
-    });
-    
-    // プログレスバークリックでシーク
-    progressContainer.addEventListener('click', function(e) {
-        if (!video.duration) return;
-        
-        const rect = this.getBoundingClientRect();
-        const pos = (e.clientX - rect.left) / rect.width;
-        const seekTime = pos * video.duration;
-        
-        seekMedia(seekTime);
-    });
+                
+                // 時間更新時の処理
+video.addEventListener('timeupdate', function() {
+    const duration = video.duration || videoDuration;
+    const endTime = parseFloat(endTimeInput.value) || duration;
     
-    // 指定した時間にシーク (改良版)
-    function seekMedia(time) {
-        try {
-            const duration = video.duration || videoDuration;
+    if (video.currentTime >= endTime && endTime > 0) {
+        if (loopCheckbox.checked) {
             const startTime = parseFloat(startTimeInput.value) || 0;
-            const endTime = parseFloat(endTimeInput.value) || duration;
-            
-            const seekTime = Math.max(startTime, Math.min(time, endTime));
-            video.currentTime = seekTime;
-            
+            video.currentTime = startTime;
             if (combinedAudioElement) {
-                combinedAudioElement.currentTime = seekTime;
-                if (isPlaying) {
-                    combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
-                }
-            }
-        } catch (error) {
-            console.error('メディアシークエラー:', error);
-        }
-    }
-    
-    // プログレスバー上でマウス移動時に時間を表示
-    progressContainer.addEventListener('mousemove', function(e) {
-        if (!video.duration) return;
-        
-        const rect = this.getBoundingClientRect();
-        const pos = (e.clientX - rect.left) / rect.width;
-        const hoverTime = pos * video.duration;
-        
-        const minutes = Math.floor(hoverTime / 60);
-        const seconds = Math.floor(hoverTime % 60);
-        const milliseconds = Math.floor((hoverTime % 1) * 100);
-        
-        progressTime.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(2, '0')}`;
-        progressTime.style.display = 'block';
-        progressTime.style.left = `${pos * 100}%`;
-    });
-    
-    progressContainer.addEventListener('mouseleave', function() {
-        progressTime.style.display = 'none';
-    });
-    
-    // 動画クリックで再生/一時停止
-    video.addEventListener('click', function() {
-        togglePlayPause();
-    });
-
-    volumeSlider.addEventListener('input', function() {
-        if (!isAudioCombined) return;
-        
-        lastVolume = parseFloat(this.value);
-        applyVolume();
-    });
-    
-    volumeBtn.addEventListener('click', function() {
-        if (!isAudioCombined) return;
-        
-        if (video.volume > 0) {
-            lastVolume = parseFloat(volumeSlider.value);
-            volumeSlider.value = 0;
-        } else {
-            volumeSlider.value = lastVolume;
-        }
-        
-        applyVolume();
-    });
-    
-    // 音量アイコンを更新
-    function updateVolumeIcon() {
-        if (video.volume === 0) {
-            volumeBtn.textContent = '🔇';
-        } else if (video.volume < 3) {
-            volumeBtn.textContent = '🔈';
-        } else {
-            volumeBtn.textContent = '🔊';
-        }
-    }
-    
-    // 再生速度スライダー (動画プレイヤー)
-    speedSlider.addEventListener('input', function() {
-        if (!isAudioCombined) return;
-        
-        const speed = parseFloat(this.value);
-        speedValue.textContent = speed.toFixed(2) + 'x';
-        playbackSpeedSlider.value = speed;
-        playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-        updatePlaybackRate(speed);
-    });
-    
-    // 再生速度スライダー (設定メニュー)
-    playbackSpeedSlider.addEventListener('input', function() {
-        if (!isAudioCombined) return;
-        
-        const speed = parseFloat(this.value);
-        playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-        speedSlider.value = speed;
-        speedValue.textContent = speed.toFixed(2) + 'x';
-        updatePlaybackRate(speed);
-    });
-    
-    // テンポ入力による再生速度更新
-    tempoInput.addEventListener('input', function() {
-        const tempo = parseFloat(this.value);
-        const baseTempo = isTMode ? 66 : 92;
-        const speed = tempo / baseTempo;
-        
-        const clampedSpeed = Math.max(0.001, Math.min(5.0, speed));
-        
-        playbackSpeedSlider.value = clampedSpeed;
-        playbackSpeedValue.textContent = clampedSpeed.toFixed(2) + 'x';
-        speedSlider.value = clampedSpeed;
-        speedValue.textContent = clampedSpeed.toFixed(2) + 'x';
-        tempoSpeedValue.textContent = clampedSpeed.toFixed(2) + 'x';
-        
-        updatePlaybackRate(clampedSpeed);
-    });
-    
-    function updatePlaybackRate(speed) {
-        if (!isAudioCombined) return;
-        
-        currentPlaybackRate = speed;
-        video.playbackRate = speed;
-        
-        // ピッチ保持を再設定
-        video.preservesPitch = true;
-        video.mozPreservesPitch = true;
-        video.webkitPreservesPitch = true;
-        
-        if (combinedAudioElement) {
-            combinedAudioElement.playbackRate = speed;
-            
-            // 合成音声のピッチ保持を設定
-            combinedAudioElement.preservesPitch = true;
-            combinedAudioElement.mozPreservesPitch = true;
-            combinedAudioElement.webkitPreservesPitch = true;
-        }
-    }
-    
-    // 全画面ボタン
-    fullscreenBtn.addEventListener('click', function() {
-        if (!isFullscreen) {
-            if (videoContainer.requestFullscreen) {
-                videoContainer.requestFullscreen();
-            } else if (videoContainer.webkitRequestFullscreen) {
-                videoContainer.webkitRequestFullscreen();
-            } else if (videoContainer.msRequestFullscreen) {
-                videoContainer.msRequestFullscreen();
-            }
-        } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
+                combinedAudioElement.currentTime = startTime;
             }
-        }
-    });
-    
-    // 全画面変更イベント
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-    document.addEventListener('msfullscreenchange', handleFullscreenChange);
-    
-    function handleFullscreenChange() {
-        isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
-        fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
-        video.controls = false;
-        
-        // 全画面時にロックボタンを表示
-        lockControlsBtn.style.display = isFullscreen ? 'flex' : 'none';
-        
-        // 全画面時にコントロールバー自動非表示機能を有効化
-        if (isFullscreen) {
-            resetControlsHideTimer();
-            document.addEventListener('mousemove', handleFullscreenMouseMove);
         } else {
-            document.removeEventListener('mousemove', handleFullscreenMouseMove);
-            clearTimeout(controlsHideTimeout);
-            showControls();
-        }
-    }
-    
-    // 全画面時のマウス移動処���
-    function handleFullscreenMouseMove() {
-        if (!isControlsLocked) {
-            showControls();
-            resetControlsHideTimer();
-        }
-    }
-    
-    // コントロールバーを表示
-    function showControls() {
-        if (!controlsVisible) {
-            videoControls.style.opacity = '1';
-            controlsVisible = true;
-        }
-    }
-    
-    // コントロールバーを非表示
-    function hideControls() {
-        if (!isControlsLocked && controlsVisible) {
-            videoControls.style.opacity = '0';
-            controlsVisible = false;
-        }
-    }
-    
-    // コントロールバー非表示タイマーをリセット
-    function resetControlsHideTimer() {
-        clearTimeout(controlsHideTimeout);
-        if (!isControlsLocked) {
-            controlsHideTimeout = setTimeout(hideControls, 1500); // 1.5秒後に非表示
+            pauseMedia();
+            video.currentTime = endTime;
         }
     }
     
-    // ロックボタンのクリック処理
-    lockControlsBtn.addEventListener('click', function() {
-        isControlsLocked = !isControlsLocked;
-        this.classList.toggle('locked', isControlsLocked);
-        
-        if (isControlsLocked) {
-            showControls();
-            clearTimeout(controlsHideTimeout);
-        } else {
-            resetControlsHideTimer();
-        }
-    });
-    
-    // キーボードイベント (ESCで全画面終了)
-    document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape' && isFullscreen) {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        }
-    });
-    
-    // ボリュームスライダーのイベント
-    audioSliders.forEach((slider, index) => {
-        slider.addEventListener('input', function() {
-            const value = parseFloat(this.value);
-            volumeValues[index].textContent = value.toFixed(2);
-            
-            const percent = value * 100;
-            this.style.backgroundSize = `${percent}% 100%`;
-        });
-    });
-    
-    globalVolumeSlider.addEventListener('input', function() {
-        const value = parseFloat(this.value);
-        globalVolumeValue.textContent = value.toFixed(1);
-        
-        const percent = (value - this.min) / (this.max - this.min) * 100;
-        this.style.backgroundSize = `${percent}% 100%`;
-        
-        applyVolume();
-    });
-    
-    // ループ設定変更時
-    loopCheckbox.addEventListener('change', function() {
-        // 合成音声ではループは動画に依存する
-    });
-    
-    // 現在の秒数を開始時間に設定
-    setStartTimeBtn.addEventListener('click', function() {
-        startTimeInput.value = video.currentTime.toFixed(2);
-        updateProgressMarkers();
-    });
-    
-    // 現在の秒数を終了時間に設定
-    setEndTimeBtn.addEventListener('click', function() {
-        endTimeInput.value = video.currentTime.toFixed(2);
-        updateProgressMarkers();
-    });
-    
-    // 終了時間を動画の長さにリセット
-    resetEndTimeBtn.addEventListener('click', function() {
-        endTimeInput.value = video.duration.toFixed(2);
-        updateProgressMarkers();
-    });
-    
-    // プログレスバーのマーカーを更新
-    function updateProgressMarkers() {
-        const duration = video.duration || videoDuration;
-        const startTime = parseFloat(startTimeInput.value) || 0;
-        const endTime = parseFloat(endTimeInput.value) || duration;
-        
-        if (duration > 0) {
-            // 開始時間が0の場合はマーカーを非表示
-            if (startTime <= 0) {
-                startMarker.style.display = 'none';
-            } else {
-                startMarker.style.left = `${(startTime / duration) * 100}%`;
-                startMarker.style.display = 'block';
-            }
+    updateTimeDisplay();
+});
+                
+                // プログレスバークリックでシーク
+                progressContainer.addEventListener('click', function(e) {
+                    if (!video.duration) return;
+                    
+                    const rect = this.getBoundingClientRect();
+                    const pos = (e.clientX - rect.left) / rect.width;
+                    const seekTime = pos * video.duration;
+                    
+                    seekMedia(seekTime);
+                });
+                
+                // 指定した時間にシーク (改良版)
+                function seekMedia(time) {
+                    try {
+                        const duration = video.duration || videoDuration;
+                        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) {
+                            combinedAudioElement.currentTime = seekTime;
+                            if (isPlaying) {
+                                combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
+                            }
+                        }
+                    } catch (error) {
+                        console.error('メディアシークエラー:', error);
+                    }
+                }
+                
+                // プログレスバー上でマウス移動時に時間を表示
+                progressContainer.addEventListener('mousemove', function(e) {
+                    if (!video.duration) return;
+                    
+                    const rect = this.getBoundingClientRect();
+                    const pos = (e.clientX - rect.left) / rect.width;
+                    const hoverTime = pos * video.duration;
+                    
+                    const minutes = Math.floor(hoverTime / 60);
+                    const seconds = Math.floor(hoverTime % 60);
+                    const milliseconds = Math.floor((hoverTime % 1) * 100);
+                    
+                    progressTime.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(2, '0')}`;
+                    progressTime.style.display = 'block';
+                    progressTime.style.left = `${pos * 100}%`;
+                });
+                
+                progressContainer.addEventListener('mouseleave', function() {
+                    progressTime.style.display = 'none';
+                });
+                
+                // 動画クリックで再生/一時停止
+                video.addEventListener('click', function() {
+                    togglePlayPause();
+                });
             
-            // 終了時間が動画の長さと同じ場合はマーカーを非表示
-            if (endTime >= duration) {
-                endMarker.style.display = 'none';
-            } else {
-                endMarker.style.left = `${(endTime / duration) * 100}%`;
-                endMarker.style.display = 'block';
-            }
-        }
-    }
-    
-    // 消画モード切り替え
-    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);
-    
-    // プレビューボタンクリック
-    previewButton.addEventListener('click', togglePreview);
-    
-    // 同期ステータスを閉じる
-    syncStatusClose.addEventListener('click', function() {
-        syncStatus.style.display = 'none';
-    });
-    
-    // 初期化
-    loadAudioFiles();
-    updateVolumeIcon();
-    volumeSlider.value = video.volume;
-    video.controls = false;
-    
-    // スライダーの背景を初期化
-    function initSliderBackgrounds() {
-        const sliders = [
-            volumeSlider, 
-            speedSlider, 
-            globalVolumeSlider, 
-            playbackSpeedSlider, 
-            ...audioSliders
-        ];
-        
-        sliders.forEach(slider => {
-            if (slider) {
-                slider.style.backgroundImage = 'linear-gradient(#64ffda, #64ffda)';
-                slider.style.backgroundRepeat = 'no-repeat';
+                volumeSlider.addEventListener('input', function() {
+                    if (!isAudioCombined) return;
+                    
+                    lastVolume = parseFloat(this.value);
+                    applyVolume();
+                });
                 
-                if (slider === globalVolumeSlider) {
-                    const percent = (slider.value - slider.min) / (slider.max - slider.min) * 100;
-                    slider.style.backgroundSize = `${percent}% 100%`;
-                    globalVolumeValue.textContent = slider.value;
-                } else {
-                    slider.style.backgroundSize = `${slider.value * 100}% 100%`;
+                volumeBtn.addEventListener('click', function() {
+                    if (!isAudioCombined) return;
+                    
+                    if (video.volume > 0) {
+                        lastVolume = parseFloat(volumeSlider.value);
+                        volumeSlider.value = 0;
+                    } else {
+                        volumeSlider.value = lastVolume;
+                    }
+                    
+                    applyVolume();
+                });
+                
+                // 音量アイコンを更新
+                function updateVolumeIcon() {
+                    if (video.volume === 0) {
+                        volumeBtn.textContent = '🔇';
+                    } else if (video.volume < 3) {
+                        volumeBtn.textContent = '🔈';
+                    } else {
+                        volumeBtn.textContent = '🔊';
+                    }
                 }
-            }
-        });
-    }
-    
-    initSliderBackgrounds();
-    startSyncCheck(); // 同期チェックを開始
-    
-    // 初期テンポ設定
-    tempoInput.value = isTMode ? 66 : 92;
-    tempoInput.dispatchEvent(new Event('input'));
-});
-
-// タイムマーカー関連のコード
+                
+                // 再生速度スライダー (動画プレイヤー)
+                speedSlider.addEventListener('input', function() {
+                    if (!isAudioCombined) return;
+                    
+                    const speed = parseFloat(this.value);
+                    speedValue.textContent = speed.toFixed(2) + 'x';
+                    playbackSpeedSlider.value = speed;
+                    playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+                    updatePlaybackRate(speed);
+                });
+                
+                // 再生速度スライダー (設定メニュー)
+                playbackSpeedSlider.addEventListener('input', function() {
+                    if (!isAudioCombined) return;
+                    
+                    const speed = parseFloat(this.value);
+                    playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+                    speedSlider.value = speed;
+                    speedValue.textContent = speed.toFixed(2) + 'x';
+                    updatePlaybackRate(speed);
+                });
+                
+                // テンポ入力による再生速度更新
+                tempoInput.addEventListener('input', function() {
+                    const tempo = parseFloat(this.value);
+                    const baseTempo = isTMode ? 66 : 92;
+                    const speed = tempo / baseTempo;
+                    
+                    const clampedSpeed = Math.max(0.001, Math.min(5.0, speed));
+                    
+                    playbackSpeedSlider.value = clampedSpeed;
+                    playbackSpeedValue.textContent = clampedSpeed.toFixed(2) + 'x';
+                    speedSlider.value = clampedSpeed;
+                    speedValue.textContent = clampedSpeed.toFixed(2) + 'x';
+                    tempoSpeedValue.textContent = clampedSpeed.toFixed(2) + 'x';
+                    
+                    updatePlaybackRate(clampedSpeed);
+                });
+                
+                function updatePlaybackRate(speed) {
+                    if (!isAudioCombined) return;
+                    
+                    currentPlaybackRate = speed;
+                    video.playbackRate = speed;
+                    
+                    // ピッチ保持を再設定
+                    video.preservesPitch = true;
+                    video.mozPreservesPitch = true;
+                    video.webkitPreservesPitch = true;
+                    
+                    if (combinedAudioElement) {
+                        combinedAudioElement.playbackRate = speed;
+                        
+                        // 合成音声のピッチ保持を設定
+                        combinedAudioElement.preservesPitch = true;
+                        combinedAudioElement.mozPreservesPitch = true;
+                        combinedAudioElement.webkitPreservesPitch = true;
+                    }
+                }
+                
+                // 全画面ボタン
+                fullscreenBtn.addEventListener('click', function() {
+                    if (!isFullscreen) {
+                        if (videoContainer.requestFullscreen) {
+                            videoContainer.requestFullscreen();
+                        } else if (videoContainer.webkitRequestFullscreen) {
+                            videoContainer.webkitRequestFullscreen();
+                        } else if (videoContainer.msRequestFullscreen) {
+                            videoContainer.msRequestFullscreen();
+                        }
+                    } else {
+                        if (document.exitFullscreen) {
+                            document.exitFullscreen();
+                        } else if (document.webkitExitFullscreen) {
+                            document.webkitExitFullscreen();
+                        } else if (document.msExitFullscreen) {
+                            document.msExitFullscreen();
+                        }
+                    }
+                });
+                
+                // 全画面変更イベント
+                document.addEventListener('fullscreenchange', handleFullscreenChange);
+                document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+                document.addEventListener('msfullscreenchange', handleFullscreenChange);
+                
+                function handleFullscreenChange() {
+                    isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+                    fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
+                    video.controls = false;
+                    
+                    // 全画面時にロックボタンを表示
+                    lockControlsBtn.style.display = isFullscreen ? 'flex' : 'none';
+                    
+                    // 全画面時にコントロールバー自動非表示機能を有効化
+                    if (isFullscreen) {
+                        resetControlsHideTimer();
+                        document.addEventListener('mousemove', handleFullscreenMouseMove);
+                    } else {
+                        document.removeEventListener('mousemove', handleFullscreenMouseMove);
+                        clearTimeout(controlsHideTimeout);
+                        showControls();
+                    }
+                }
+                
+                // 全画面時のマウス移動処理
+                function handleFullscreenMouseMove() {
+                    if (!isControlsLocked) {
+                        showControls();
+                        resetControlsHideTimer();
+                    }
+                }
+                
+                // コントロールバーを表示
+                function showControls() {
+                    if (!controlsVisible) {
+                        videoControls.style.opacity = '1';
+                        controlsVisible = true;
+                    }
+                }
+                
+                // コントロールバーを非表示
+                function hideControls() {
+                    if (!isControlsLocked && controlsVisible) {
+                        videoControls.style.opacity = '0';
+                        controlsVisible = false;
+                    }
+                }
+                
+                // コントロールバー非表示タイマーをリセット
+                function resetControlsHideTimer() {
+                    clearTimeout(controlsHideTimeout);
+                    if (!isControlsLocked) {
+                        controlsHideTimeout = setTimeout(hideControls, 1500); // 1.5秒後に非表示
+                    }
+                }
+                
+                // ロックボタンのクリック処理
+                lockControlsBtn.addEventListener('click', function() {
+                    isControlsLocked = !isControlsLocked;
+                    this.classList.toggle('locked', isControlsLocked);
+                    
+                    if (isControlsLocked) {
+                        showControls();
+                        clearTimeout(controlsHideTimeout);
+                    } else {
+                        resetControlsHideTimer();
+                    }
+                });
+                
+                // キーボードイベント (ESCで全画面終了)
+                document.addEventListener('keydown', function(e) {
+                    if (e.key === 'Escape' && isFullscreen) {
+                        if (document.exitFullscreen) {
+                            document.exitFullscreen();
+                        } else if (document.webkitExitFullscreen) {
+                            document.webkitExitFullscreen();
+                        } else if (document.msExitFullscreen) {
+                            document.msExitFullscreen();
+                        }
+                    }
+                });
+                
+                // ボリュームスライダーのイベント
+                audioSliders.forEach((slider, index) => {
+                    slider.addEventListener('input', function() {
+                        const value = parseFloat(this.value);
+                        volumeValues[index].textContent = value.toFixed(2);
+                        
+                        const percent = value * 100;
+                        this.style.backgroundSize = `${percent}% 100%`;
+                    });
+                });
+                
+                globalVolumeSlider.addEventListener('input', function() {
+                    const value = parseFloat(this.value);
+                    globalVolumeValue.textContent = value.toFixed(1);
+                    
+                    const percent = (value - this.min) / (this.max - this.min) * 100;
+                    this.style.backgroundSize = `${percent}% 100%`;
+                    
+                    applyVolume();
+                });
+                
+                // ループ設定変更時
+                loopCheckbox.addEventListener('change', function() {
+                    // 合成音声ではループは動画に依存する
+                });
+                
+                // 現在の秒数を開始時間に設定
+                setStartTimeBtn.addEventListener('click', function() {
+                    startTimeInput.value = video.currentTime.toFixed(2);
+                    updateProgressMarkers();
+                });
+                
+                // 現在の秒数を終了時間に設定
+                setEndTimeBtn.addEventListener('click', function() {
+                    endTimeInput.value = video.currentTime.toFixed(2);
+                    updateProgressMarkers();
+                });
+                
+                // 終了時間を動画の長さにリセット
+                resetEndTimeBtn.addEventListener('click', function() {
+                    endTimeInput.value = video.duration.toFixed(2);
+                    updateProgressMarkers();
+                });
+                
+                // プログレスバーのマーカーを更新
+                function updateProgressMarkers() {
+                    const duration = video.duration || videoDuration;
+                    const startTime = parseFloat(startTimeInput.value) || 0;
+                    const endTime = parseFloat(endTimeInput.value) || duration;
+                    
+                    if (duration > 0) {
+                        startMarker.style.left = `${(startTime / duration) * 100}%`;
+                        endMarker.style.left = `${(endTime / duration) * 100}%`;
+                        
+                        startMarker.style.display = 'block';
+                        endMarker.style.display = 'block';
+                    }
+                }
+                
+                // 開始/終了時間変更時にマーカーを更新
+                startTimeInput.addEventListener('input', updateProgressMarkers);
+                endTimeInput.addEventListener('input', updateProgressMarkers);
+                
+                // 合成ボタンクリック
+                combineButton.addEventListener('click', combineAudio);
+                
+                // プレビューボタンクリック
+                previewButton.addEventListener('click', togglePreview);
+                
+                // 同期ステータスを閉じる
+                syncStatusClose.addEventListener('click', function() {
+                    syncStatus.style.display = 'none';
+                });
+                
+                // 初期化
+                loadAudioFiles();
+                updateVolumeIcon();
+                volumeSlider.value = video.volume;
+                video.controls = false;
+                
+                // スライダーの背景を初期化
+                function initSliderBackgrounds() {
+                    const sliders = [
+                        volumeSlider, 
+                        speedSlider, 
+                        globalVolumeSlider, 
+                        playbackSpeedSlider, 
+                        ...audioSliders
+                    ];
+                    
+                    sliders.forEach(slider => {
+                        if (slider) {
+                            slider.style.backgroundImage = 'linear-gradient(#64ffda, #64ffda)';
+                            slider.style.backgroundRepeat = 'no-repeat';
+                            
+                            if (slider === globalVolumeSlider) {
+                                const percent = (slider.value - slider.min) / (slider.max - slider.min) * 100;
+                                slider.style.backgroundSize = `${percent}% 100%`;
+                                globalVolumeValue.textContent = slider.value;
+                            } else {
+                                slider.style.backgroundSize = `${slider.value * 100}% 100%`;
+                            }
+                        }
+                    });
+                }
+                
+                initSliderBackgrounds();
+                startSyncCheck(); // 同期チェックを開始
+                
+                // 初期テンポ設定
+                tempoInput.value = isTMode ? 66 : 92;
+                tempoInput.dispatchEvent(new Event('input'));
+            });
+            // タイムマーカー関連のコードを修正
 document.addEventListener('DOMContentLoaded', function() {
     // まず必要なDOM要素を取得
     const startMarker = document.getElementById('start-marker');
@@ -2530,21 +2474,11 @@ document.addEventListener('DOMContentLoaded', function() {
             const endTime = parseFloat(endTimeInput.value) || duration;
 
             if (duration > 0) {
-                    // 開始時間が0の場合はマーカーを非表示
-                    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) {
-                            if(endMarker) endMarker.style.display = 'none';
-                    } else {
-                            if(endMarker) endMarker.style.left = `${(endTime / duration) * 100}%`;
-                            if(endMarker) endMarker.style.display = 'block';
-                    }
+                    if(startMarker) startMarker.style.left = `${(startTime / duration) * 100}%`;
+                    if(endMarker) endMarker.style.left = `${(endTime / duration) * 100}%`;
+
+                    if(startMarker) startMarker.style.display = 'block';
+                    if(endMarker) endMarker.style.display = 'block';
             }
     }
 });