Update index.html

index.html

@@ -642,7 +642,6 @@
         function createTechBackground() {
             const bg = document.getElementById('techBg');
             
-            // 回路風の線を生成
             for (let i = 0; i < 200; i++) {
                 const line = document.createElement('div');
                 line.className = 'circuit-line';
@@ -659,11 +658,9 @@
                 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';
@@ -671,8 +668,7 @@
                 dot.style.top = `${Math.random() * 100}%`;
                 bg.appendChild(dot);
             }
-            
-            // 六角形を生成
+
             for (let i = 0; i < 15; i++) {
                 const hex = document.createElement('div');
                 hex.className = 'hexagon';
@@ -682,8 +678,7 @@
                 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';
@@ -698,11 +693,10 @@
         
         // ローディング状態を管理
         let loadingCount = 0;
-        let totalToLoad = 6; // 動画 + 5音声ファイル
+        let totalToLoad = 6;
         let lastUpdateTime = 0;
-        const updateInterval = 1; // 50msごとに更新 (20fps)
+        const updateInterval = 1;
         
-        // ローディング完了チェック
         function checkLoadingComplete() {
             loadingCount++;
             if (loadingCount >= totalToLoad) {
@@ -716,27 +710,19 @@
             }
         }
         
-        // エラーハンドリング関数
         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, 'ピッチ設定中にエラーが発生しました');
-            }
+        // Web Audio Context の初期化
+        let audioContext;
+        try {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        } catch (e) {
+            console.error('Web Audio APIがサポートされていません:', e);
         }
-        
+
         // 要素を取得
         const video = document.getElementById('video');
         const videoContainer = document.getElementById('video-container');
@@ -764,8 +750,7 @@
         
         // 音声オブジェクトを作成
         const audioElements = {};
-        
-        // 音声ファイル名の配列
+        const audioSources = {};
         const audioFiles = ['p', 'a', 't', 's', 'k'];
         
         // 初期化
@@ -774,6 +759,44 @@
         let lastVolume = 1;
         let currentPlaybackRate = 1;
         let isFullscreen = false;
+        let lastSyncTime = 0;
+        let syncDriftLog = [];
+        
+        // 同期チェック関数
+        function checkSync() {
+            if (!isPlaying) return;
+            
+            const now = performance.now();
+            if (now - lastSyncTime < 500) return; // 0.5秒ごとにチェック
+            lastSyncTime = now;
+            
+            const videoTime = video.currentTime;
+            let maxDrift = 0;
+            
+            audioFiles.forEach(file => {
+                if (audioElements[file]) {
+                    const audioTime = audioElements[file].currentTime;
+                    const drift = Math.abs(audioTime - videoTime);
+                    
+                    if (drift > maxDrift) maxDrift = drift;
+                    
+                    // 50ms以上のずれを修正
+                    if (drift > 0.05) {
+                        audioElements[file].currentTime = videoTime;
+                        console.log(`同期補正: ${file} (差: ${drift.toFixed(3)}秒)`);
+                    }
+                }
+            });
+            
+            syncDriftLog.push(maxDrift);
+            if (syncDriftLog.length > 10) syncDriftLog.shift();
+        }
+        
+        // 平均ずれを計算
+        function getAverageDrift() {
+            if (syncDriftLog.length === 0) return 0;
+            return syncDriftLog.reduce((a, b) => a + b, 0) / syncDriftLog.length;
+        }
         
         // 動画のメタデータが読み込まれたら
         video.addEventListener('loadedmetadata', function() {
@@ -796,18 +819,12 @@
         
         // 再生ボタンクリック
         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, '再生/一時停止操作中にエラーが発生しました');
+            const endTime = parseFloat(endTimeInput.value) || videoDuration;
+            if (video.currentTime >= endTime) {
+                const startTime = parseFloat(startTimeInput.value) || 0;
+                seekMedia(startTime);
             }
+            togglePlayPause();
         });
         
         // 時間表示を更新
@@ -831,11 +848,13 @@
                     `${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}%`;
+                
+                // 同期チェックを実行
+                checkSync();
             } catch (error) {
-                handleError(error, '時間表示更新中にエラーが発生しました');
+                console.error('時間表示更新エラー:', error);
             }
         }
         
@@ -848,37 +867,48 @@
             }
         }
         
-        // 再生関数
+        // 再生関数 (改良版)
         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.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') {
-                                    console.error(`音声再生エラー (${file}.mp3):`, e);
+                const playPromise = video.play();
+                
+                if (playPromise !== undefined) {
+                    playPromise.then(() => {
+                        isPlaying = true;
+                        playPauseBtn.textContent = '⏸';
+                        
+                        // 音声を再生 (Web Audio APIを使用)
+                        const currentTime = video.currentTime;
+                        audioFiles.forEach(file => {
+                            if (audioElements[file]) {
+                                audioElements[file].currentTime = currentTime;
+                                const playPromise = audioElements[file].play();
+                                
+                                if (playPromise !== undefined) {
+                                    playPromise.catch(e => {
+                                        if (e.name !== 'AbortError') {
+                                            console.error(`音声再生エラー (${file}.mp3):`, e);
+                                        }
+                                    });
                                 }
-                            });
-                        }
+                            }
+                        });
+                        
+                        // 初回同期を即時実行
+                        setTimeout(checkSync, 100);
+                    }).catch(error => {
+                        console.error('動画再生エラー:', error);
                     });
-                }).catch(error => {
-                    console.error('動画再生エラー:', error);
-                });
+                }
             } catch (error) {
                 console.error('メディア再生エラー:', error);
             }
@@ -891,7 +921,6 @@
                 isPlaying = false;
                 playPauseBtn.textContent = '▶';
                 
-                // 音声を一時停止
                 audioFiles.forEach(file => {
                     if (audioElements[file]) {
                         audioElements[file].pause();
@@ -907,13 +936,11 @@
             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;
                     
-                    // 音声も同期
                     audioFiles.forEach(file => {
                         if (audioElements[file]) {
                             audioElements[file].currentTime = startTime;
@@ -937,61 +964,61 @@
         
         // プログレスバークリックでシーク
         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, 'シーク操作中にエラーが発生しました');
-            }
+            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;
                 
-                // 音声も同期
                 audioFiles.forEach(file => {
                     if (audioElements[file]) {
                         audioElements[file].currentTime = seekTime;
                     }
                 });
+                
+                // シーク後の同期を強化
+                if (isPlaying) {
+                    setTimeout(() => {
+                        audioFiles.forEach(file => {
+                            if (audioElements[file]) {
+                                audioElements[file].currentTime = video.currentTime;
+                            }
+                        });
+                    }, 50);
+                }
             } catch (error) {
-                handleError(error, 'メディアシーク中にエラーが発生しました');
+                console.error('メディアシークエラー:', 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, 'プログレスバー操作中にエラーが発生しました');
-            }
+            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() {
@@ -1005,30 +1032,22 @@
         
         // 音量コントロール
         volumeSlider.addEventListener('input', function() {
-            try {
-                video.volume = this.value;
-                lastVolume = this.value;
-                updateVolumeIcon();
-            } catch (error) {
-                handleError(error, '音量設定中にエラーが発生しました');
-            }
+            video.volume = this.value;
+            lastVolume = this.value;
+            updateVolumeIcon();
         });
         
         // 音量ボタン
         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;
-                }
-                updateVolumeIcon();
-            } catch (error) {
-                handleError(error, '音量切り替え中にエラーが発生しました');
+            if (video.volume > 0) {
+                lastVolume = video.volume;
+                video.volume = 0;
+                volumeSlider.value = 0;
+            } else {
+                video.volume = lastVolume;
+                volumeSlider.value = lastVolume;
             }
+            updateVolumeIcon();
         });
         
         // 音量アイコンを更新
@@ -1044,69 +1063,51 @@
         
         // 再生速度スライダー (動画プレイヤー)
         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, '再生速度設定中にエラーが発生しました');
-            }
+            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() {
-            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, '再生速度設定中にエラーが発生しました');
-            }
+            const speed = parseFloat(this.value);
+            playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+            speedSlider.value = speed;
+            speedValue.textContent = speed.toFixed(2) + 'x';
+            updatePlaybackRate(speed);
         });
         
         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, '再生速度更新中にエラーが発生しました');
-            }
+            currentPlaybackRate = speed;
+            video.playbackRate = speed;
+            
+            audioFiles.forEach(file => {
+                if (audioElements[file]) {
+                    audioElements[file].playbackRate = speed;
+                }
+            });
         }
         
         // 全画面ボタン
         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();
-                    }
+            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, '全画面表示中にエラーが発生しました');
             }
         });
         
@@ -1118,14 +1119,7 @@
         function handleFullscreenChange() {
             isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
             fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
-            
-            if (isFullscreen) {
-                // 全画面時の処理
-                video.controls = false;
-            } else {
-                // 通常表示時の処理
-                video.controls = false;
-            }
+            video.controls = false;
         }
         
         // キーボードイベント (ESCで全画面終了)
@@ -1141,30 +1135,27 @@
             }
         });
         
-        // 音声ファイルをロード
+        // 音声ファイルをロード (改良版)
         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(); // エラー時もカウント
+                        console.error(`音声ファイル読み込みエラー (${file}.mp3):`, audio.error);
+                        checkLoadingComplete();
                     });
                 } catch (error) {
-                    handleError(error, `音声ファイル初期化中にエラーが発生しました (${file}.mp3)`);
-                    checkLoadingComplete(); // エラー時もカウント
+                    console.error(`音声ファイル初期化エラー (${file}.mp3):`, error);
+                    checkLoadingComplete();
                 }
             });
         }
@@ -1172,88 +1163,63 @@
         // ボリュームスライダーのイベント
         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, '音声ボリューム設定中にエラーが発生しました');
+                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;
                 }
             });
         });
         
         // 全体音量スライダーのイベント
         globalVolumeSlider.addEventListener('input', function() {
-            try {
-                const value = parseFloat(this.value);
-                globalVolumeValue.textContent = value.toFixed(1);
-                
-                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, '全体音量設定中にエラーが発生しました');
-            }
+            const value = parseFloat(this.value);
+            globalVolumeValue.textContent = value.toFixed(1);
+            
+            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;
+                }
+            });
         });
         
         // ループ設定変更時
         loopCheckbox.addEventListener('change', function() {
-            try {
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        audioElements[file].loop = this.checked;
-                    }
-                });
-            } catch (error) {
-                handleError(error, 'ループ設定変更中にエラーが発生しました');
-            }
+            audioFiles.forEach(file => {
+                if (audioElements[file]) {
+                    audioElements[file].loop = this.checked;
+                }
+            });
         });
         
         // 現在の秒数を開始時間に設定
         setStartTimeBtn.addEventListener('click', function() {
-            try {
-                startTimeInput.value = video.currentTime.toFixed(2);
-            } catch (error) {
-                handleError(error, '開始時間設定中にエラーが発生しました');
-            }
+            startTimeInput.value = video.currentTime.toFixed(2);
         });
         
         // 現在の秒数を終了時間に設定
         setEndTimeBtn.addEventListener('click', function() {
-            try {
-                endTimeInput.value = video.currentTime.toFixed(2);
-            } catch (error) {
-                handleError(error, '終了時間設定中にエラーが発生しました');
-            }
+            endTimeInput.value = video.currentTime.toFixed(2);
         });
         
         // スライダーの背景を更新
         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%`;
             
-            // 各音声スライダー
             audioSliders.forEach(slider => {
                 const percent = slider.value * 100;
                 slider.style.backgroundSize = `${percent}% 100%`;
@@ -1262,7 +1228,6 @@
         
         // スライダーの初期背景を設定
         function initSliderBackgrounds() {
-            // すべてのスライダーに背景を設定
             const sliders = [
                 volumeSlider, 
                 speedSlider, 
@@ -1302,6 +1267,13 @@
         volumeSlider.value = video.volume;
         video.controls = false;
         initSliderBackgrounds();
+        
+        // 定期的に同期状態をログ出力
+        setInterval(() => {
+            if (isPlaying) {
+                console.log(`平均同期ずれ: ${getAverageDrift().toFixed(4)}秒`);
+            }
+        }, 5000);
     });
 </script>
 </body>