sing-song-player-3vx0f39v

Running

App Files Files Community

soiz1 commited on Jul 15

Commit

8d6ff0a

1 Parent(s): 71ac320

Update index.html

Browse files

Files changed (1) hide show

index.html +212 -138

index.html CHANGED Viewed

@@ -598,6 +598,30 @@
         .disabled-message p {
             margin-bottom: 15px;
         }
     </style>
 </head>
 <body>
@@ -606,11 +630,10 @@
 document.addEventListener('DOMContentLoaded', function() {
     const urlParams = new URLSearchParams(window.location.search);
     const isTMode = urlParams.has('mode') && urlParams.get('mode') === 't';
-    const videoSource = document.querySelector('#video source'); // source要素を取得
     if (isTMode && videoSource) {
         videoSource.src = '/t/v.mp4';
-        // 動画を再読み込み
         const video = document.getElementById('video');
         video.load();
     }
@@ -635,6 +658,11 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class="container">
         <div class="video-container" id="video-container">
             <!-- 無効状態のオーバーレイ -->
             <div class="disabled-overlay" id="disabledOverlay">
                 <div class="disabled-message">
@@ -751,7 +779,19 @@ document.addEventListener('DOMContentLoaded', function() {
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     // テクノロジー風背景を生成
     function createTechBackground() {
         const bg = document.getElementById('techBg');
@@ -833,14 +873,6 @@ document.addEventListener('DOMContentLoaded', function() {
         window.alert(`${message}\n\nエラー詳細: ${error.message}`);
     }
-    // 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');
@@ -871,6 +903,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const previewSection = document.getElementById('preview-section');
     const previewButton = document.getElementById('preview-button');
     const previewTime = document.getElementById('preview-time');
     // 音声オブジェクトを作成
     const audioElements = {};
@@ -887,10 +921,92 @@ document.addEventListener('DOMContentLoaded', function() {
     let lastVolume = 1;
     let currentPlaybackRate = 1;
     let isFullscreen = false;
-    let lastSyncTime = 0;
-    let syncDriftLog = [];
-    // 音声ファイルをロード (改良版)
     function loadAudioFiles() {
         audioFiles.forEach(file => {
             try {
@@ -1012,23 +1128,23 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
-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;
-    // 音量アイコンを更新
-    updateVolumeIcon();
-}
     // 再生速度を適用（ピッチ維持）
     function applyPlaybackRate() {
@@ -1041,13 +1157,13 @@ function applyVolume() {
         if (combinedAudioSource) {
             combinedAudioSource.playbackRate.value = speed;
             // ピッチを維持する設定
-                if ('preservesPitch' in combinedAudioSource) {
-                    combinedAudioSource.preservesPitch = value; // モダンブラウザ
-                } else if ('webkitPreservesPitch' in combinedAudioSource) {
-                    combinedAudioSource.webkitPreservesPitch = value; // 古い WebKit (Chrome <86 など)
-                } else if ('mozPreservesPitch' in combinedAudioSource) {
-                    combinedAudioSource.mozPreservesPitch = value; // 古い Gecko (Firefox ≤100)
-                }
         }
         speedValue.textContent = speed.toFixed(2) + 'x';
@@ -1070,11 +1186,6 @@ function applyVolume() {
         setStartTimeBtn.disabled = false;
         setEndTimeBtn.disabled = false;
         playbackSpeedSlider.disabled = false;
-        // 合成後に音量と再生速度スライダーを有効化
-        volumeSlider.disabled = false;
-        speedSlider.disabled = false;
-        playbackSpeedSlider.disabled = false;
     }
     // プレビュー再生
@@ -1211,7 +1322,6 @@ function applyVolume() {
                 video.currentTime = startTime;
             }
-            // 動画を再生
             const playPromise = video.play();
             if (playPromise !== undefined) {
@@ -1219,29 +1329,10 @@ function applyVolume() {
                     isPlaying = true;
                     playPauseBtn.textContent = '⏸';
-                    // Web Audio APIで合成音声を再生
-                    if (combinedAudioSource) {
-                        combinedAudioSource.stop();
-                    }
-                    combinedAudioSource = audioContext.createBufferSource();
-                    combinedAudioSource.buffer = combinedAudioBuffer;
-                    combinedAudioSource.connect(audioContext.destination);
-                    combinedAudioSource.start(0, video.currentTime);
-                    // 再生速度を設定
                     video.playbackRate = currentPlaybackRate;
-                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
-                    // 動画と音声の同期を維持
-                    combinedAudioSource.onended = () => {
-                        if (loopCheckbox.checked) {
-                            video.currentTime = startTime;
-                            playMedia();
-                        } else {
-                            pauseMedia();
-                        }
-                    };
                 }).catch(error => {
                     console.error('動画再生エラー:', error);
                 });
@@ -1257,6 +1348,7 @@ function applyVolume() {
             video.pause();
             isPlaying = false;
             playPauseBtn.textContent = '▶';
             if (combinedAudioSource) {
                 combinedAudioSource.stop();
@@ -1276,15 +1368,7 @@ function applyVolume() {
             if (loopCheckbox.checked) {
                 const startTime = parseFloat(startTimeInput.value) || 0;
                 video.currentTime = startTime;
-                if (combinedAudioSource) {
-                    combinedAudioSource.stop();
-                    combinedAudioSource = audioContext.createBufferSource();
-                    combinedAudioSource.buffer = combinedAudioBuffer;
-                    combinedAudioSource.connect(audioContext.destination);
-                    combinedAudioSource.start(0, startTime);
-                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
-                }
             } else {
                 pauseMedia();
                 video.currentTime = endTime;
@@ -1318,7 +1402,7 @@ function applyVolume() {
             if (combinedAudioSource) {
                 combinedAudioSource.stop();
                 combinedAudioSource = audioContext.createBufferSource();
-                combinedAudioBuffer = combinedAudioBuffer;
                 combinedAudioSource.connect(audioContext.destination);
                 if (isPlaying) {
@@ -1356,30 +1440,26 @@ function applyVolume() {
     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() {
@@ -1476,23 +1556,20 @@ volumeBtn.addEventListener('click', 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() {
@@ -1522,35 +1599,32 @@ globalVolumeSlider.addEventListener('input', function() {
     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) {
-                // 0-10の範囲で初期化
-                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();
 });
-</script>
-</body>
-</html>

         .disabled-message p {
             margin-bottom: 15px;
         }
+        #buffering-indicator {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 5px;
+            z-index: 10;
+            display: none;
+        }
+        .sync-status {
+            position: absolute;
+            bottom: 60px;
+            left: 10px;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: #64ffda;
+            padding: 5px 10px;
+            border-radius: 3px;
+            font-size: 12px;
+            z-index: 5;
+        }
     </style>
 </head>
 <body>
 document.addEventListener('DOMContentLoaded', function() {
     const urlParams = new URLSearchParams(window.location.search);
     const isTMode = urlParams.has('mode') && urlParams.get('mode') === 't';
+    const videoSource = document.querySelector('#video source');
     if (isTMode && videoSource) {
         videoSource.src = '/t/v.mp4';
         const video = document.getElementById('video');
         video.load();
     }
     <div class="container">
         <div class="video-container" id="video-container">
+            <!-- バッファリングインジケーター -->
+            <div id="buffering-indicator">読み込み中...</div>
+            <!-- 同期ステータス -->
+            <div class="sync-status" id="sync-status"></div>
             <!-- 無効状態のオーバーレイ -->
             <div class="disabled-overlay" id="disabledOverlay">
                 <div class="disabled-message">
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+    // 同期管理用の変数
+    let lastSyncTime = 0;
+    let isBuffering = false;
+    let syncDriftLog = [];
+    let syncCheckInterval;
+    let audioContext;
+    try {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    } catch (e) {
+        console.error('Web Audio APIがサポートされていません:', e);
+    }
     // テクノロジー風背景を生成
     function createTechBackground() {
         const bg = document.getElementById('techBg');
         window.alert(`${message}\n\nエラー詳細: ${error.message}`);
     }
     // 要素を取得
     const video = document.getElementById('video');
     const videoContainer = document.getElementById('video-container');
     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 audioElements = {};
     let lastVolume = 1;
     let currentPlaybackRate = 1;
     let isFullscreen = false;
+    // 動画のバッファリング状態を監視
+    video.addEventListener('waiting', function() {
+        isBuffering = true;
+        bufferingIndicator.style.display = 'block';
+        if (combinedAudioSource) {
+            combinedAudioSource.stop();
+            combinedAudioSource = null;
+        }
+    });
+    video.addEventListener('playing', function() {
+        isBuffering = false;
+        bufferingIndicator.style.display = 'none';
+        if (!combinedAudioSource && isPlaying) {
+            syncAudioWithVideo();
+        }
+    });
+    video.addEventListener('suspend', function() {
+        console.log('動画の読み込みが一時停止しました');
+    });
+    video.addEventListener('stalled', function() {
+        console.log('動画の読み込みが停滞しました');
+        if (isPlaying) {
+            pauseMedia();
+        }
+    });
+    // 動画と音声の同期をチェックする関数
+    function startSyncCheck() {
+        if (syncCheckInterval) clearInterval(syncCheckInterval);
+        syncCheckInterval = setInterval(checkSync, 100); // 100msごとにチェック
+    }
+    function stopSyncCheck() {
+        if (syncCheckInterval) clearInterval(syncCheckInterval);
+    }
+    function checkSync() {
+        if (!isAudioCombined || !isPlaying || isBuffering) return;
+        const videoTime = video.currentTime;
+        const audioTime = audioContext.currentTime - (combinedAudioSource?.startTime || 0);
+        const drift = videoTime - audioTime;
+        // ズレを記録（直近5回分）
+        syncDriftLog.push(drift);
+        if (syncDriftLog.length > 5) syncDriftLog.shift();
+        // 平均ズレを計算
+        const avgDrift = syncDriftLog.reduce((a, b) => a + b, 0) / syncDriftLog.length;
+        // ズレ表示を更新
+        syncStatus.textContent = `同期ズレ: ${avgDrift.toFixed(3)}秒`;
+        // ズレが大きい場合（0.1秒以上）に修正
+        if (Math.abs(avgDrift) > 0.1) {
+            console.log(`同期ズレを修正: ${avgDrift.toFixed(3)}秒`);
+            syncAudioWithVideo();
+        }
+    }
+    // 音声を動画に同期させる関数
+    function syncAudioWithVideo() {
+        if (!isAudioCombined || !isPlaying) return;
+        const currentTime = video.currentTime;
+        if (combinedAudioSource) {
+            combinedAudioSource.stop();
+        }
+        combinedAudioSource = audioContext.createBufferSource();
+        combinedAudioSource.buffer = combinedAudioBuffer;
+        combinedAudioSource.connect(audioContext.destination);
+        combinedAudioSource.start(0, currentTime);
+        combinedAudioSource.playbackRate.value = currentPlaybackRate;
+        // ズレ記録をリセット
+        syncDriftLog = [];
+        lastSyncTime = performance.now();
+    }
+    // 音声ファイルをロード
     function loadAudioFiles() {
         audioFiles.forEach(file => {
             try {
         }
     }
+    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;
+        // 音量アイコンを更新
+        updateVolumeIcon();
+    }
     // 再生速度を適用（ピッチ維持）
     function applyPlaybackRate() {
         if (combinedAudioSource) {
             combinedAudioSource.playbackRate.value = speed;
             // ピッチを維持する設定
+            if ('preservesPitch' in combinedAudioSource) {
+                combinedAudioSource.preservesPitch = true;
+            } else if ('webkitPreservesPitch' in combinedAudioSource) {
+                combinedAudioSource.webkitPreservesPitch = true;
+            } else if ('mozPreservesPitch' in combinedAudioSource) {
+                combinedAudioSource.mozPreservesPitch = true;
+            }
         }
         speedValue.textContent = speed.toFixed(2) + 'x';
         setStartTimeBtn.disabled = false;
         setEndTimeBtn.disabled = false;
         playbackSpeedSlider.disabled = false;
     }
     // プレビュー再生
                 video.currentTime = startTime;
             }
             const playPromise = video.play();
             if (playPromise !== undefined) {
                     isPlaying = true;
                     playPauseBtn.textContent = '⏸';
+                    syncAudioWithVideo();
+                    startSyncCheck();
                     video.playbackRate = currentPlaybackRate;
                 }).catch(error => {
                     console.error('動画再生エラー:', error);
                 });
             video.pause();
             isPlaying = false;
             playPauseBtn.textContent = '▶';
+            stopSyncCheck();
             if (combinedAudioSource) {
                 combinedAudioSource.stop();
             if (loopCheckbox.checked) {
                 const startTime = parseFloat(startTimeInput.value) || 0;
                 video.currentTime = startTime;
+                syncAudioWithVideo();
             } else {
                 pauseMedia();
                 video.currentTime = endTime;
             if (combinedAudioSource) {
                 combinedAudioSource.stop();
                 combinedAudioSource = audioContext.createBufferSource();
+                combinedAudioSource.buffer = combinedAudioBuffer;
                 combinedAudioSource.connect(audioContext.destination);
                 if (isPlaying) {
     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() {
             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() {
     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(); // 同期チェックを開始
 });
+</script>