Update index.html

index.html

@@ -636,458 +636,467 @@
         </div>
     </div>
     
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // テクノロジー風背景を生成
-            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);
-                }
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // テクノロジー風背景を生成
+        function createTechBackground() {
+            const bg = document.getElementById('techBg');
+            
+            // 回路風の線を生成
+            for (let i = 0; i < 200; i++) {
+                const line = document.createElement('div');
+                line.className = 'circuit-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);
+                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`;
                 }
                 
-                // 六角形を生成
-                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);
-                }
+                line.style.left = `${Math.random() * 100}%`;
+                line.style.top = `${Math.random() * 100}%`;
+                line.style.opacity = Math.random() * 0.5 + 0.1;
                 
-                // パルスする点を生成
-                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);
-                }
+                bg.appendChild(line);
             }
             
-            createTechBackground();
+            // グリッドドットを生成
+            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);
+            }
             
-            // ローディング状態を管理
-            let loadingCount = 0;
-            let totalToLoad = 6; // 動画 + 5音声ファイル
-            let lastUpdateTime = 0;
-            const updateInterval = 50; // 50msごとに更新 (20fps)
+            // 六角形を生成
+            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);
+            }
             
-            // ローディング完了チェック
-            function checkLoadingComplete() {
-                loadingCount++;
-                if (loadingCount >= totalToLoad) {
+            // パルスする点を生成
+            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();
+        
+        // ローディング状態を管理
+        let loadingCount = 0;
+        let totalToLoad = 6; // 動画 + 5音声ファイル
+        let lastUpdateTime = 0;
+        const updateInterval = 50; // 50msごとに更新 (20fps)
+        
+        // ローディング完了チェック
+        function checkLoadingComplete() {
+            loadingCount++;
+            if (loadingCount >= totalToLoad) {
+                setTimeout(function() {
+                    const loadingOverlay = document.getElementById('loadingOverlay');
+                    loadingOverlay.style.opacity = '0';
                     setTimeout(function() {
-                        const loadingOverlay = document.getElementById('loadingOverlay');
-                        loadingOverlay.style.opacity = '0';
-                        setTimeout(function() {
-                            loadingOverlay.style.display = 'none';
-                        }, 1000);
-                    }, 500);
+                        loadingOverlay.style.display = 'none';
+                    }, 1000);
+                }, 500);
+            }
+        }
+        
+        // エラーハンドリング関数
+        function handleError(error, message) {
+            console.error(message, error);
+            window.alert(`${message}\n\nエラー詳細: ${error.message}`);
+        }
+        
+        // ピッチ設定関数
+        function setPreservesPitch(el, value) {
+            try {
+                if ('preservesPitch' in el) {
+                    el.preservesPitch = value; // モダンブラウザ
+                } else if ('webkitPreservesPitch' in el) {
+                    el.webkitPreservesPitch = value; // 古い WebKit (Chrome <86 など)
+                } else if ('mozPreservesPitch' in el) {
+                    el.mozPreservesPitch = value; // 古い Gecko (Firefox ≤100)
                 }
+            } catch (error) {
+                handleError(error, 'ピッチ設定中にエラーが発生しました');
             }
-            
-            // エラーハンドリング関数
-            function handleError(error, message) {
-                console.error(message, error);
-                window.alert(`${message}\n\nエラー詳細: ${error.message}`);
+        }
+        
+        // 要素を取得
+        const video = document.getElementById('video');
+        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 audioElements = {};
+        
+        // 音声ファイル名の配列
+        const audioFiles = ['p', 'a', 't', 's', 'k'];
+        
+        // 初期化
+        let videoDuration = 0;
+        let isPlaying = false;
+        let lastVolume = 1;
+        let currentPlaybackRate = 1;
+        let isFullscreen = false;
+        
+        // 動画のメタデータが読み込まれた���
+        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, '動画メタデータ読み込み中にエラーが発生しました');
             }
-            
-            // ピッチ設定関数
-            function setPreservesPitch(el, value) {
-                try {
-                    if ('preservesPitch' in el) {
-                        el.preservesPitch = value; // モダンブラウザ
-                    } else if ('webkitPreservesPitch' in el) {
-                        el.webkitPreservesPitch = value; // 古い WebKit (Chrome <86 など)
-                    } else if ('mozPreservesPitch' in el) {
-                        el.mozPreservesPitch = value; // 古い Gecko (Firefox ≤100)
-                    }
-                } catch (error) {
-                    handleError(error, 'ピッチ設定中にエラーが発生しました');
+        });
+        
+        // 動画エラー処理
+        video.addEventListener('error', function() {
+            handleError(video.error, '動画読み込み中にエラーが発生しました');
+        });
+        
+        // 再生ボタンクリック
+        playPauseBtn.addEventListener('click', function() {
+            try {
+                // 現在の秒数が終了秒数を超えている場合は開始位置に戻す
+                const endTime = parseFloat(endTimeInput.value) || videoDuration;
+                if (video.currentTime >= endTime) {
+                    const startTime = parseFloat(startTimeInput.value) || 0;
+                    seekMedia(startTime);
                 }
+                
+                togglePlayPause();
+            } catch (error) {
+                handleError(error, '再生/一時停止操作中にエラーが発生しました');
             }
+        });
+        
+        // 時間表示を更新
+        function updateTimeDisplay() {
+            const now = performance.now();
+            if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
+            lastUpdateTime = now;
             
-            // 要素を取得
-            const video = document.getElementById('video');
-            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 audioElements = {};
-            
-            // 音声ファイル名の配列
-            const audioFiles = ['p', 'a', 't', 's', 'k'];
-            
-            // 初期化
-            let videoDuration = 0;
-            let isPlaying = false;
-            let isVideoPlaying = false;
-            let lastVolume = 1;
-            let currentPlaybackRate = 1;
-            let isFullscreen = false;
-            
-            // 動画のメタデータが読み込まれたら
-            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, '動画メタデータ読み込み中にエラーが発生しました');
+            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) {
+                handleError(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 (video.currentTime >= endTime) {
+                    video.currentTime = startTime;
                 }
-            });
-            
-            // 動画エラー処理
-            video.addEventListener('error', function() {
-                handleError(video.error, '動画読み込み中にエラーが発生しました');
-            });
-            
-            // 再生ボタンクリック
-            playPauseBtn.addEventListener('click', function() {
-                try {
-                    // 現在の秒数が終了秒数を超えている場合は開始位置に戻す
-                    const endTime = parseFloat(endTimeInput.value) || videoDuration;
-                    if (video.currentTime >= endTime) {
-                        const startTime = parseFloat(startTimeInput.value) || 0;
-                        seekMedia(startTime);
-                    }
-                    
-                    togglePlayPause();
+                
+                // 動画を再生
+                video.play().then(() => {
+                    isPlaying = true;
+                    playPauseBtn.textContent = '⏸';
                     
-                    // 音声要素の再生を許可
+                    // 音声を再生
                     audioFiles.forEach(file => {
                         if (audioElements[file]) {
+                            audioElements[file].currentTime = video.currentTime;
                             audioElements[file].play().catch(e => {
                                 if (e.name !== 'AbortError') {
-                                    handleError(e, `音声再生中にエラーが発生しました (${file}.mp3)`);
+                                    console.error(`音声再生エラー (${file}.mp3):`, e);
                                 }
                             });
                         }
                     });
-                } catch (error) {
-                    handleError(error, '再生/一時停止操作中にエラーが発生しました');
-                }
-            });
-            
-            // 時間表示を更新
-            function updateTimeDisplay() {
-                const now = performance.now();
-                if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
-                lastUpdateTime = now;
+                }).catch(error => {
+                    console.error('動画再生エラー:', error);
+                });
+            } catch (error) {
+                console.error('メディア再生エラー:', error);
+            }
+        }
+        
+        // 一時停止関数
+        function pauseMedia() {
+            try {
+                video.pause();
+                isPlaying = false;
+                playPauseBtn.textContent = '▶';
                 
-                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}%`;
-                    
-                    // 現在の秒数が終了秒数を超えている場合
-                    const endTime = parseFloat(endTimeInput.value) || duration;
-                    if (currentTime >= endTime && endTime > 0) {
-                        if (loopCheckbox.checked) {
-                            const startTime = parseFloat(startTimeInput.value) || 0;
-                            seekMedia(startTime);
-                            if (!isPlaying) {
-                                playMedia();
-                            }
-                        } else {
-                            pauseMedia();
-                        }
+                // 音声を一時停止
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        audioElements[file].pause();
                     }
-                } catch (error) {
-                    handleError(error, '時間表示更新中にエラーが発生しました');
-                }
+                });
+            } catch (error) {
+                console.error('メディア一時停止エラー:', error);
             }
+        }
+        
+        // 時間更新時の処理
+        video.addEventListener('timeupdate', function() {
+            const duration = video.duration || videoDuration;
+            const endTime = parseFloat(endTimeInput.value) || duration;
             
-            // 動画の時間更新イベント
-            video.addEventListener('timeupdate', function() {
-                updateTimeDisplay();
-            });
-            
-            // 動画終了時の処理
-            video.addEventListener('ended', function() {
-                try {
-                    if (!loopCheckbox.checked) {
-                        const startTime = parseFloat(startTimeInput.value) || 0;
-                        seekMedia(startTime);
-                        pauseMedia();
-                    }
-                } catch (error) {
-                    handleError(error, '動画終了処理中にエラーが発生しました');
-                }
-            });
-            
-            // プログレスバークリックでシーク
-            progressContainer.addEventListener('click', function(e) {
-                try {
-                    if (!video.duration) return;
-                    
-                    const rect = this.getBoundingClientRect();
-                    const pos = (e.clientX - rect.left) / rect.width;
-                    const seekTime = pos * video.duration;
-                    
-                    seekMedia(seekTime);
-                } catch (error) {
-                    handleError(error, 'シーク操作中にエラーが発生しました');
-                }
-            });
-            
-            // 指定した時間にシーク
-            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;
                     
                     // 音声も同期
                     audioFiles.forEach(file => {
                         if (audioElements[file]) {
-                            audioElements[file].currentTime = seekTime;
+                            audioElements[file].currentTime = startTime;
+                            if (isPlaying) {
+                                audioElements[file].play().catch(e => {
+                                    if (e.name !== 'AbortError') {
+                                        console.error(`音声再生エラー (${file}.mp3):`, e);
+                                    }
+                                });
+                            }
                         }
                     });
-                } catch (error) {
-                    handleError(error, 'メディアシーク中にエラーが発生しました');
-                }
-            }
-            
-            // プログレスバー上でマウス移動時に時間を表示
-            progressContainer.addEventListener('mousemove', function(e) {
-                try {
-                    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}%`;
-                } catch (error) {
-                    handleError(error, 'プログレスバー操作中にエラーが発生しました');
-                }
-            });
-            
-            progressContainer.addEventListener('mouseleave', function() {
-                progressTime.style.display = 'none';
-            });
-            
-            // 動画クリックで再生/一時停止
-            video.addEventListener('click', function() {
-                togglePlayPause();
-            });
-            
-            // 再生/一時停止をトグル
-            function togglePlayPause() {
-                if (isVideoPlaying) {
-                    pauseMedia();
                 } else {
-                    playMedia();
+                    pauseMedia();
+                    video.currentTime = endTime;
                 }
             }
             
-            // 音量コントロール
-            volumeSlider.addEventListener('input', function() {
-                try {
-                    video.volume = this.value;
-                    lastVolume = this.value;
-                    updateVolumeIcon();
-                } catch (error) {
-                    handleError(error, '音量設定中にエラーが発生しました');
-                }
-            });
-            
-            // 音量ボタン
-            volumeBtn.addEventListener('click', function() {
-                try {
-                    if (video.volume > 0) {
-                        lastVolume = video.volume;
-                        video.volume = 0;
-                        volumeSlider.value = 0;
-                    } else {
-                        video.volume = lastVolume;
-                        volumeSlider.value = lastVolume;
+            updateTimeDisplay();
+        });
+        
+        // プログレスバークリックでシーク
+        progressContainer.addEventListener('click', function(e) {
+            try {
+                if (!video.duration) return;
+                
+                const rect = this.getBoundingClientRect();
+                const pos = (e.clientX - rect.left) / rect.width;
+                const seekTime = pos * video.duration;
+                
+                seekMedia(seekTime);
+            } catch (error) {
+                handleError(error, 'シーク操作中にエラーが発生しました');
+            }
+        });
+        
+        // 指定した時間にシーク
+        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;
+                
+                // 音声も同期
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        audioElements[file].currentTime = seekTime;
                     }
-                    updateVolumeIcon();
-                } catch (error) {
-                    handleError(error, '音量切り替え中にエラーが発生しました');
-                }
-            });
-            
-            // 音量アイコンを更新
-            function updateVolumeIcon() {
-                if (video.volume === 0) {
-                    volumeBtn.textContent = '🔇';
-                } else if (video.volume < 0.5) {
-                    volumeBtn.textContent = '🔈';
+                });
+            } catch (error) {
+                handleError(error, 'メディアシーク中にエラーが発生しました');
+            }
+        }
+        
+        // プログレスバー上でマウス移動時に時間を表示
+        progressContainer.addEventListener('mousemove', function(e) {
+            try {
+                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}%`;
+            } catch (error) {
+                handleError(error, 'プログレスバー操作中にエラーが発生しました');
+            }
+        });
+        
+        progressContainer.addEventListener('mouseleave', function() {
+            progressTime.style.display = 'none';
+        });
+        
+        // 動画クリックで再生/一時停止
+        video.addEventListener('click', function() {
+            togglePlayPause();
+        });
+        
+        // 音量コントロール
+        volumeSlider.addEventListener('input', function() {
+            try {
+                video.volume = this.value;
+                lastVolume = this.value;
+                updateVolumeIcon();
+            } catch (error) {
+                handleError(error, '音量設定中にエラーが発生しました');
+            }
+        });
+        
+        // 音量ボタン
+        volumeBtn.addEventListener('click', function() {
+            try {
+                if (video.volume > 0) {
+                    lastVolume = video.volume;
+                    video.volume = 0;
+                    volumeSlider.value = 0;
                 } else {
-                    volumeBtn.textContent = '🔊';
+                    video.volume = lastVolume;
+                    volumeSlider.value = lastVolume;
                 }
+                updateVolumeIcon();
+            } catch (error) {
+                handleError(error, '音量切り替え中にエラーが発生しました');
             }
-            
-            // 再生速度スライダー (動画プレイヤー)
-            speedSlider.addEventListener('input', function() {
-                try {
-                    const speed = parseFloat(this.value);
-                    speedValue.textContent = speed.toFixed(2) + 'x';
-                    playbackSpeedSlider.value = speed;
-                    playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-                    updatePlaybackRate(speed);
-                } catch (error) {
-                    handleError(error, '再生速度設定中にエラーが発生しました');
-                }
-            });
-            
-            // 再生速度スライダー (設定メニュー)
-            playbackSpeedSlider.addEventListener('input', function() {
-                try {
-                    const speed = parseFloat(this.value);
-                    playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-                    speedSlider.value = speed;
-                    speedValue.textContent = speed.toFixed(2) + 'x';
-                    updatePlaybackRate(speed);
-                } catch (error) {
-                    handleError(error, '再生速度設定中にエラーが発生しました');
-                }
-            });
-            
-            function updatePlaybackRate(speed) {
-                try {
-                    currentPlaybackRate = speed;
-                    video.playbackRate = speed;
-                    
-                    // 音声の再生速度を変更
-                    audioFiles.forEach(file => {
-                        if (audioElements[file]) {
-                            audioElements[file].playbackRate = speed;
-                            setPreservesPitch(audioElements[file], true); // ピッチを保持
-                        }
-                    });
-                } catch (error) {
-                    handleError(error, '再生速度更新中にエラーが発生しました');
-                }
+        });
+        
+        // 音量アイコンを更新
+        function updateVolumeIcon() {
+            if (video.volume === 0) {
+                volumeBtn.textContent = '🔇';
+            } else if (video.volume < 0.5) {
+                volumeBtn.textContent = '🔈';
+            } else {
+                volumeBtn.textContent = '🔊';
             }
-            
-            // 全画面ボタン
-            fullscreenBtn.addEventListener('click', function() {
-                try {
-                    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();
-                        }
-                    }
-                } catch (error) {
-                    handleError(error, '全画面表示中にエラーが発生しました');
-                }
-            });
-            
-            // 全画面変更イベント
-            document.addEventListener('fullscreenchange', handleFullscreenChange);
-            document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-            document.addEventListener('msfullscreenchange', handleFullscreenChange);
-            
-            function handleFullscreenChange() {
-                isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
-                fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
+        }
+        
+        // 再生速度スライダー (動画プレイヤー)
+        speedSlider.addEventListener('input', function() {
+            try {
+                const speed = parseFloat(this.value);
+                speedValue.textContent = speed.toFixed(2) + 'x';
+                playbackSpeedSlider.value = speed;
+                playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+                updatePlaybackRate(speed);
+            } catch (error) {
+                handleError(error, '再生速度設定中にエラーが発生しました');
+            }
+        });
+        
+        // 再生速度スライダー (設定メニュー)
+        playbackSpeedSlider.addEventListener('input', function() {
+            try {
+                const speed = parseFloat(this.value);
+                playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+                speedSlider.value = speed;
+                speedValue.textContent = speed.toFixed(2) + 'x';
+                updatePlaybackRate(speed);
+            } catch (error) {
+                handleError(error, '再生速度設定中にエラーが発生しました');
+            }
+        });
+        
+        function updatePlaybackRate(speed) {
+            try {
+                currentPlaybackRate = speed;
+                video.playbackRate = speed;
                 
-                if (isFullscreen) {
-                    // 全画面時の処理
-                    video.controls = false;
-                } else {
-                    // 通常表示時の処理
-                    video.controls = false;
-                }
+                // 音声の再生速度を変更
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        audioElements[file].playbackRate = speed;
+                        setPreservesPitch(audioElements[file], true); // ピッチを保持
+                    }
+                });
+            } catch (error) {
+                handleError(error, '再生速度更新中にエラーが発生しました');
             }
-            
-            // キーボードイベント (ESCで全画面終了)
-            document.addEventListener('keydown', function(e) {
-                if (e.key === 'Escape' && isFullscreen) {
+        }
+        
+        // 全画面ボタン
+        fullscreenBtn.addEventListener('click', function() {
+            try {
+                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) {
@@ -1096,246 +1105,165 @@
                         document.msExitFullscreen();
                     }
                 }
-            });
-            
-            // 音声ファイルをロード
-            function loadAudioFiles() {
-                audioFiles.forEach(file => {
-                    try {
-                        const audio = new Audio(`${file}.mp3`);
-                        audio.preload = 'auto';
-                        setPreservesPitch(audio, true); // ピッチを保持
-                        audio.loop = false;
-                        audioElements[file] = audio;
-                        
-                        // 音声が読み込まれたら
-                        audio.addEventListener('loadedmetadata', function() {
-                            console.log(`${file}.mp3 loaded`);
-                            checkLoadingComplete();
-                        });
-                        
-                        // エラー処理
-                        audio.addEventListener('error', function() {
-                            handleError(audio.error, `音声ファイル読み込み中にエラーが発生しました (${file}.mp3)`);
-                            checkLoadingComplete(); // エラー時もカウント
-                        });
-                    } catch (error) {
-                        handleError(error, `音声ファイル初期化中にエラーが発生しました (${file}.mp3)`);
-                        checkLoadingComplete(); // エラー時もカウント
-                    }
-                });
+            } catch (error) {
+                handleError(error, '全画面表示中にエラーが発生しました');
             }
+        });
+        
+        // 全画面変更イベント
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+        document.addEventListener('msfullscreenchange', handleFullscreenChange);
+        
+        function handleFullscreenChange() {
+            isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+            fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
             
-            function playAudio(file, startTime) {
-                if (!audioElements[file]) return;
-                
-                try {
-                    const audio = audioElements[file];
-                    const duration = video.duration || videoDuration;
-                    const endTime = parseFloat(endTimeInput.value) || duration;
-                    
-                    // ボリューム設定
-                    const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                    const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value/10);
-                    audio.volume = volume;
-                    
-                    // 再生速度設定
-                    audio.playbackRate = currentPlaybackRate;
-                    setPreservesPitch(audio, true);
-                    
-                    // 再生時間計算
-                    const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
-                    const playEndTime = Math.min(endTime, duration);
-                    
-                    audio.currentTime = playStartTime;
-                    
-                    // 再生
-                    audio.play().catch(e => {
-                        if (e.name !== 'AbortError') {
-                            handleError(e, `音声再生中にエラーが発生しました (${file}.mp3)`);
-                        }
-                    });
-                    
-                    // ループ設定
-                    audio.loop = loopCheckbox.checked;
-                    
-                    if (!loopCheckbox.checked) {
-                        // ループ再生でない場合、終了時間に達したら停止
-                        setTimeout(() => {
-                            if (audio.currentTime >= playEndTime) {
-                                audio.pause();
-                            }
-                        }, (playEndTime - playStartTime) * 1000);
-                    }
-                } catch (error) {
-                    handleError(error, `音声再生中にエラーが発生しました (${file}.mp3)`);
+            if (isFullscreen) {
+                // 全画面時の処理
+                video.controls = false;
+            } else {
+                // 通常表示時の処理
+                video.controls = false;
+            }
+        }
+        
+        // キーボードイベント (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();
                 }
             }
-            
-            // 再生関数
-            function playMedia() {
+        });
+        
+        // 音声ファイルをロード
+        function loadAudioFiles() {
+            audioFiles.forEach(file => {
                 try {
-                    const startTime = video.currentTime;
-                    const endTime = parseFloat(endTimeInput.value) || videoDuration;
+                    const audio = new Audio(`${file}.mp3`);
+                    audio.preload = 'auto';
+                    setPreservesPitch(audio, true); // ピッチを保持
+                    audio.loop = false;
+                    audioElements[file] = audio;
                     
-                    // 終了時間が動画の長さを超えないように
-                    const actualEndTime = Math.min(endTime, videoDuration);
-                    
-                    // 現在位置が終了時間を超えている場合、開始位置に戻る
-                    if (startTime >= actualEndTime) {
-                        video.currentTime = parseFloat(startTimeInput.value) || 0;
-                    }
-                    
-                    // 動画を再生
-                    video.play().then(() => {
-                        isPlaying = true;
-                        isVideoPlaying = true;
-                        playPauseBtn.textContent = '⏸';
-                    }).catch(error => {
-                        handleError(error, '動画再生中にエラーが発生しました');
+                    // 音声が読み込まれたら
+                    audio.addEventListener('loadedmetadata', function() {
+                        console.log(`${file}.mp3 loaded`);
+                        checkLoadingComplete();
                     });
                     
-                    // 音声を再生
-                    audioFiles.forEach(file => {
-                        playAudio(file, video.currentTime);
-                    });
-                } catch (error) {
-                    handleError(error, 'メディア再生中にエラーが発生しました');
-                }
-            }
-            
-            // 一時停止関数
-            function pauseMedia() {
-                try {
-                    video.pause();
-                    isPlaying = false;
-                    isVideoPlaying = false;
-                    playPauseBtn.textContent = '▶';
-                    
-                    audioFiles.forEach(file => {
-                        if (audioElements[file]) {
-                            audioElements[file].pause();
-                        }
+                    // エラー処理
+                    audio.addEventListener('error', function() {
+                        handleError(audio.error, `音声ファイル読み込み中にエラーが発生しました (${file}.mp3)`);
+                        checkLoadingComplete(); // エラー時もカウント
                     });
                 } catch (error) {
-                    handleError(error, 'メディア一時停止中にエラーが発生しました');
+                    handleError(error, `音声ファイル初期化中にエラーが発生しました (${file}.mp3)`);
+                    checkLoadingComplete(); // エラー時もカウント
                 }
-            }
-            
-            // ボリュームスライダーのイベント
-            audioSliders.forEach((slider, index) => {
-                slider.addEventListener('input', function() {
-                    try {
-                        const value = parseFloat(this.value);
-                        volumeValues[index].textContent = value.toFixed(2);
-                        
-                        if (audioElements[this.dataset.audio]) {
-                            const globalVolume = parseFloat(globalVolumeSlider.value/10);
-                            audioElements[this.dataset.audio].volume = value * globalVolume;
-                        }
-                    } catch (error) {
-                        handleError(error, '音声ボリューム設定中にエラーが発生しました');
-                    }
-                });
             });
-            
-            // 全体音量スライダーのイベント
-            globalVolumeSlider.addEventListener('input', function() {
+        }
+        
+        // ボリュームスライダーのイベント
+        audioSliders.forEach((slider, index) => {
+            slider.addEventListener('input', function() {
                 try {
                     const value = parseFloat(this.value);
-                    globalVolumeValue.textContent = value.toFixed(1);
+                    volumeValues[index].textContent = value.toFixed(2);
                     
-                    audioFiles.forEach(file => {
-                        if (audioElements[file]) {
-                            const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                            const volume = parseFloat(volumeSlider.value) * (value/10);
-                            audioElements[file].volume = volume;
-                        }
-                    });
-                } catch (error) {
-                    handleError(error, '全体音量設定中にエラーが発生しました');
-                }
-            });
-            
-            // ループ設定変更時
-            loopCheckbox.addEventListener('change', function() {
-                try {
-                    audioFiles.forEach(file => {
-                        if (audioElements[file]) {
-                            audioElements[file].loop = this.checked;
-                        }
-                    });
-                } catch (error) {
-                    handleError(error, 'ループ設定変更中にエラーが発生しました');
-                }
-            });
-            
-            // 現在の秒数を開始時間に設定
-            setStartTimeBtn.addEventListener('click', function() {
-                try {
-                    startTimeInput.value = video.currentTime.toFixed(2);
-                } catch (error) {
-                    handleError(error, '開始時間設定中にエラーが発生しました');
-                }
-            });
-            
-            // 現在の秒数を終了時間に設定
-            setEndTimeBtn.addEventListener('click', function() {
-                try {
-                    endTimeInput.value = video.currentTime.toFixed(2);
+                    if (audioElements[this.dataset.audio]) {
+                        const globalVolume = parseFloat(globalVolumeSlider.value/10);
+                        audioElements[this.dataset.audio].volume = value * globalVolume;
+                    }
                 } catch (error) {
-                    handleError(error, '終了時間設定中にエラーが発生しました');
+                    handleError(error, '音声ボリューム設定中にエラーが発生しました');
                 }
             });
-            
-            // スライダーの背景を更新
-            function updateSliderBackgrounds() {
-                // ボリュームスライダー
-                const volumePercent = volumeSlider.value * 100;
-                volumeSlider.style.backgroundSize = `${volumePercent}% 100%`;
-                
-                // 再生速度スライダー
-                const speedPercent = (speedSlider.value - speedSlider.min) / (speedSlider.max - speedSlider.min) * 100;
-                speedSlider.style.backgroundSize = `${speedPercent}% 100%`;
-                
-                // 全体音量スライダー
-                const globalVolumePercent = (globalVolumeSlider.value - globalVolumeSlider.min) / (globalVolumeSlider.max - globalVolumeSlider.min) * 100;
-                globalVolumeSlider.style.backgroundSize = `${globalVolumePercent}% 100%`;
-                
-                // 再生速度スライダー (設定)
-                const playbackSpeedPercent = (playbackSpeedSlider.value - playbackSpeedSlider.min) / (playbackSpeedSlider.max - playbackSpeedSlider.min) * 100;
-                playbackSpeedSlider.style.backgroundSize = `${playbackSpeedPercent}% 100%`;
+        });
+        
+        // 全体音量スライダーのイベント
+        globalVolumeSlider.addEventListener('input', function() {
+            try {
+                const value = parseFloat(this.value);
+                globalVolumeValue.textContent = value.toFixed(1);
                 
-                // 各音声スライダー
-                audioSliders.forEach(slider => {
-                    const percent = slider.value * 100;
-                    slider.style.backgroundSize = `${percent}% 100%`;
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
+                        const volume = parseFloat(volumeSlider.value) * (value/10);
+                        audioElements[file].volume = volume;
+                    }
                 });
+            } catch (error) {
+                handleError(error, '全体音量設定中にエラーが発生しました');
             }
-            
-            // スライダーの初期背景を設定
-            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';
+        });
+        
+        // ループ設定変更時
+        loopCheckbox.addEventListener('change', function() {
+            try {
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        audioElements[file].loop = this.checked;
                     }
                 });
-                
-                updateSliderBackgrounds();
+            } catch (error) {
+                handleError(error, 'ループ設定変更中にエラーが発生しました');
+            }
+        });
+        
+        // 現在の秒数を開始時間に設定
+        setStartTimeBtn.addEventListener('click', function() {
+            try {
+                startTimeInput.value = video.currentTime.toFixed(2);
+            } catch (error) {
+                handleError(error, '開始時間設定中にエラーが発生しました');
+            }
+        });
+        
+        // 現在の秒数を終了時間に設定
+        setEndTimeBtn.addEventListener('click', function() {
+            try {
+                endTimeInput.value = video.currentTime.toFixed(2);
+            } catch (error) {
+                handleError(error, '終了時間設定中にエラーが発生しました');
             }
+        });
+        
+        // スライダーの背景を更新
+        function updateSliderBackgrounds() {
+            // ボリュームスライダー
+            const volumePercent = volumeSlider.value * 100;
+            volumeSlider.style.backgroundSize = `${volumePercent}% 100%`;
+            
+            // 再生速度スライダー
+            const speedPercent = (speedSlider.value - speedSlider.min) / (speedSlider.max - speedSlider.min) * 100;
+            speedSlider.style.backgroundSize = `${speedPercent}% 100%`;
             
-            // スライダー変更時に背景を更新
-            const allSliders = [
+            // 全体音量スライダー
+            const globalVolumePercent = (globalVolumeSlider.value - globalVolumeSlider.min) / (globalVolumeSlider.max - globalVolumeSlider.min) * 100;
+            globalVolumeSlider.style.backgroundSize = `${globalVolumePercent}% 100%`;
+            
+            // 再生速度スライダー (設定)
+            const playbackSpeedPercent = (playbackSpeedSlider.value - playbackSpeedSlider.min) / (playbackSpeedSlider.max - playbackSpeedSlider.min) * 100;
+            playbackSpeedSlider.style.backgroundSize = `${playbackSpeedPercent}% 100%`;
+            
+            // 各音声スライダー
+            audioSliders.forEach(slider => {
+                const percent = slider.value * 100;
+                slider.style.backgroundSize = `${percent}% 100%`;
+            });
+        }
+        
+        // スライダーの初期背景を設定
+        function initSliderBackgrounds() {
+            // すべてのスライダーに背景を設定
+            const sliders = [
                 volumeSlider, 
                 speedSlider, 
                 globalVolumeSlider, 
@@ -1343,19 +1271,38 @@
                 ...audioSliders
             ];
             
-            allSliders.forEach(slider => {
+            sliders.forEach(slider => {
                 if (slider) {
-                    slider.addEventListener('input', updateSliderBackgrounds);
+                    slider.style.backgroundImage = 'linear-gradient(#64ffda, #64ffda)';
+                    slider.style.backgroundRepeat = 'no-repeat';
                 }
             });
             
-            // 初期化
-            loadAudioFiles();
-            updateVolumeIcon();
-            volumeSlider.value = video.volume;
-            video.controls = false;
-            initSliderBackgrounds();
+            updateSliderBackgrounds();
+        }
+        
+        // スライダー変更時に背景を更新
+        const allSliders = [
+            volumeSlider, 
+            speedSlider, 
+            globalVolumeSlider, 
+            playbackSpeedSlider, 
+            ...audioSliders
+        ];
+        
+        allSliders.forEach(slider => {
+            if (slider) {
+                slider.addEventListener('input', updateSliderBackgrounds);
+            }
         });
-    </script>
+        
+        // 初期化
+        loadAudioFiles();
+        updateVolumeIcon();
+        volumeSlider.value = video.volume;
+        video.controls = false;
+        initSliderBackgrounds();
+    });
+</script>
 </body>
 </html>