Update index.html

index.html

@@ -138,6 +138,7 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
+            transition: opacity 0.3s;
         }
         
         .progress-container {
@@ -169,6 +170,19 @@
             white-space: nowrap;
         }
         
+        /* プログレスバーのマーカー */
+        .progress-marker {
+            position: absolute;
+            bottom: -5px;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 10px solid #ff5555;
+            transform: translateX(-50%);
+            z-index: 2;
+        }
+        
         .main-controls {
             display: flex;
             align-items: center;
@@ -598,15 +612,53 @@
         .disabled-message p {
             margin-bottom: 15px;
         }
+        
+        /* 新しいローダースタイル */
+        .loader {
+            width: 80px;
+            aspect-ratio: 1;
+            border: 10px solid #000;
+            box-sizing: border-box;
+            background: 
+                radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
+                radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
+                radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
+                radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
+                radial-gradient(farthest-side,#fff 98%,#0000) 50%/80% 80%,
+                #000;
+            background-repeat: no-repeat;
+            filter: blur(4px) contrast(10); 
+            animation: squarePulse 1s infinite alternate;
+        }
+
+        @keyframes squarePulse {
+            0% {
+                background-position: 
+                    50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+            }
+            25% {
+                background-position: 
+                    50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+            }
+            50% {
+                background-position: 
+                    50% 0, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
+            }
+            75% {
+                background-position: 
+                    50% 0, 50% 100%, 0 50%, 50% 50%, 50% 50%, 50% 50%;
+            }
+            100% {
+                background-position: 
+                    50% 0, 50% 100%, 0 50%, 100% 50%, 50% 50%, 50% 50%;
+            }
+        }
+        
         #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;
         }
@@ -621,6 +673,39 @@
             border-radius: 3px;
             font-size: 12px;
             z-index: 5;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        
+        .sync-status button {
+            background: none;
+            border: none;
+            color: #fff;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        
+        .lock-controls-btn {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: rgba(0, 0, 0, 0.7);
+            border: none;
+            color: #fff;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 100;
+            display: none;
+        }
+        
+        .lock-controls-btn.locked {
+            color: #64ffda;
         }
     </style>
 </head>
@@ -649,7 +734,6 @@ if ('serviceWorker' in navigator) {
     });
   });
 }
-
 </script>
     <!-- テクノロジー風背景 -->
     <div class="tech-background" id="techBg"></div>
@@ -667,7 +751,7 @@ if ('serviceWorker' in navigator) {
     </div>
     
     <h1>高度な音声動画プレイヤー</h1>
-    <div class="settings">
+    <div class="settings" hidden>
     <h2>サービスワーカー設定</h2>
     <div class="setting-item">
         <label><input type="checkbox" id="sw-video" checked> 動画ファイル (/v.mp4)</label>
@@ -717,9 +801,12 @@ if ('serviceWorker' in navigator) {
     <div class="container">
         <div class="video-container" id="video-container">
             <!-- バッファリングインジケーター -->
-            <div id="buffering-indicator">読み込み中...</div>
+            <div id="buffering-indicator"><div class="loader"></div></div>
             <!-- 同期ステータス -->
-            <div class="sync-status" id="sync-status"></div>
+            <div class="sync-status" id="sync-status">
+                <span id="sync-status-text"></span>
+                <button id="sync-status-close">×</button>
+            </div>
             
             <!-- 無効状態のオーバー��イ -->
             <div class="disabled-overlay" id="disabledOverlay">
@@ -736,6 +823,8 @@ if ('serviceWorker' in navigator) {
                 <div class="progress-container" id="progress-container">
                     <div class="progress-bar" id="progress-bar"></div>
                     <div class="progress-time" id="progress-time">00:00</div>
+                    <div class="progress-marker" id="start-marker" style="left: 0%; display: none;"></div>
+                    <div class="progress-marker" id="end-marker" style="left: 100%; display: none;"></div>
                 </div>
                 <div class="main-controls">
                     <button class="control-button" id="play-pause-btn" disabled>▶</button>
@@ -769,12 +858,18 @@ if ('serviceWorker' in navigator) {
                 <div>
                     <input type="number" id="end-time" min="0" value="0" step="0.01" disabled>
                     <button class="time-set-button" id="set-end-time" disabled>現在の秒数に設定</button>
+                    <button class="time-set-button" id="reset-end-time" disabled>動画の長さに戻す</button>
                 </div>
             </div>
             <div class="setting-item">
                 <label for="loop">ループ再生:</label>
                 <input type="checkbox" id="loop" disabled>
             </div>
+            <div class="setting-item">
+                <label for="tempo">テンポ (BPM):</label>
+                <input type="number" id="tempo" min="40" max="200" value="92" step="1">
+                <span id="tempo-speed-value">1.00x</span>
+            </div>
             <div class="setting-item">
                 <div class="global-volume-container">
                     <label>全体音量係数:</label>
@@ -835,6 +930,9 @@ if ('serviceWorker' in navigator) {
         </div>
     </div>
     
+    <!-- 全画面時のロックボタン -->
+    <button class="lock-controls-btn" id="lock-controls-btn" title="コントロールバーを固定">🔒</button>
+    
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     // 同期管理用の変数
@@ -843,6 +941,9 @@ document.addEventListener('DOMContentLoaded', function() {
     let syncDriftLog = [];
     let syncCheckInterval;
     let audioContext;
+    let controlsHideTimeout;
+    let isControlsLocked = false;
+    let controlsVisible = true;
     
     try {
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
@@ -933,9 +1034,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // 要素を取得
     const video = document.getElementById('video');
-  video.preservesPitch = true;
-video.mozPreservesPitch = true; // Firefox用
-video.webkitPreservesPitch = true; // 古いWebKit用
+    video.preservesPitch = true;
+    video.mozPreservesPitch = true; // Firefox用
+    video.webkitPreservesPitch = true; // 古いWebKit用
     const videoContainer = document.getElementById('video-container');
     const playPauseBtn = document.getElementById('play-pause-btn');
     const timeDisplay = document.getElementById('time-display');
@@ -958,6 +1059,7 @@ video.webkitPreservesPitch = true; // 古いWebKit用
     const volumeValues = document.querySelectorAll('.volume-value');
     const setStartTimeBtn = document.getElementById('set-start-time');
     const setEndTimeBtn = document.getElementById('set-end-time');
+    const resetEndTimeBtn = document.getElementById('reset-end-time');
     const disabledOverlay = document.getElementById('disabledOverlay');
     const combineButton = document.getElementById('combine-button');
     const combineStatus = document.getElementById('combine-status');
@@ -966,7 +1068,14 @@ video.webkitPreservesPitch = true; // 古いWebKit用
     const previewTime = document.getElementById('preview-time');
     const bufferingIndicator = document.getElementById('buffering-indicator');
     const syncStatus = document.getElementById('sync-status');
-
+    const syncStatusText = document.getElementById('sync-status-text');
+    const syncStatusClose = document.getElementById('sync-status-close');
+    const lockControlsBtn = document.getElementById('lock-controls-btn');
+    const startMarker = document.getElementById('start-marker');
+    const endMarker = document.getElementById('end-marker');
+    const tempoInput = document.getElementById('tempo');
+    const tempoSpeedValue = document.getElementById('tempo-speed-value');
+    const videoControls = document.querySelector('.video-controls');
   
     // 音声オブジェクトを作成
     const audioElements = {};
@@ -1036,7 +1145,7 @@ video.webkitPreservesPitch = true; // 古いWebKit用
         const avgDrift = syncDriftLog.reduce((a, b) => a + b, 0) / syncDriftLog.length;
         
         // ズレ表示を更新
-        syncStatus.textContent = `同期ズレ: ${avgDrift.toFixed(3)}秒`;
+        syncStatusText.textContent = `同期ズレ: ${avgDrift.toFixed(3)}秒`;
         
         // ズレが大きい場合（0.1秒以上）に修正
         if (Math.abs(avgDrift) > 0.1) {
@@ -1104,6 +1213,9 @@ video.webkitPreservesPitch = true; // 古いWebKit用
                 const audio = audioElements[file];
                 if (!audio) return null;
 
+                // 音量が0の場合はスキップ
+                if (currentVolumes[file] === 0) return null;
+
                 const response = await fetch(`${basePath}${file}.mp3`);
                 const arrayBuffer = await response.arrayBuffer();
                 return await audioContext.decodeAudioData(arrayBuffer);
@@ -1127,14 +1239,11 @@ video.webkitPreservesPitch = true; // 古いWebKit用
 
             // 各音声バッファを結合
             for (let file of audioFiles) {
-                if (!audioBuffers[file]) continue;
+                if (!audioBuffers[file] || currentVolumes[file] === 0) continue;
 
                 const buffer = audioBuffers[file];
                 const volume = currentVolumes[file];
 
-                // 音量が0の場合はスキップ
-                if (volume === 0) continue;
-
                 // 各チャンネルに音声を加算
                 for (let channel = 0; channel < 2; channel++) {
                     const inputData = buffer.getChannelData(channel % buffer.numberOfChannels);
@@ -1191,58 +1300,58 @@ video.webkitPreservesPitch = true; // 古いWebKit用
         }
     }
 
-function bufferToWave(abuffer) {
-    const numOfChan = abuffer.numberOfChannels,
-        length = abuffer.length * numOfChan * 2 + 44,
-        buffer = new ArrayBuffer(length),
-        view = new DataView(buffer),
-        channels = [],
-        sampleRate = abuffer.sampleRate;
-        
-    // posをletで宣言（constから変更）
-    let pos = 0;
-
-    // write WAV header
-    setUint32(0x46464952); // "RIFF"
-    setUint32(length - 8); // file length - 8
-    setUint32(0x45564157); // "WAVE"
-
-    setUint32(0x20746d66); // "fmt " chunk
-    setUint32(16); // length = 16
-    setUint16(1); // PCM (uncompressed)
-    setUint16(numOfChan);
-    setUint32(sampleRate);
-    setUint32(sampleRate * 2 * numOfChan);
-    setUint16(numOfChan * 2);
-    setUint16(16);
-
-    setUint32(0x61746164); // "data" - chunk
-    setUint32(length - pos - 4);
-
-    // write interleaved data
-    for (let i = 0; i < abuffer.length; i++) {
-        for (let channel = 0; channel < numOfChan; channel++) {
-            let sample = abuffer.getChannelData(channel)[i] * 0x7fff;
-            if (sample < -32768) sample = -32768;
-            if (sample > 32767) sample = 32767;
-            view.setInt16(pos, sample, true);
+    function bufferToWave(abuffer) {
+        const numOfChan = abuffer.numberOfChannels,
+            length = abuffer.length * numOfChan * 2 + 44,
+            buffer = new ArrayBuffer(length),
+            view = new DataView(buffer),
+            channels = [],
+            sampleRate = abuffer.sampleRate;
+            
+        // posをletで宣言（constから変更）
+        let pos = 0;
+
+        // write WAV header
+        setUint32(0x46464952); // "RIFF"
+        setUint32(length - 8); // file length - 8
+        setUint32(0x45564157); // "WAVE"
+
+        setUint32(0x20746d66); // "fmt " chunk
+        setUint32(16); // length = 16
+        setUint16(1); // PCM (uncompressed)
+        setUint16(numOfChan);
+        setUint32(sampleRate);
+        setUint32(sampleRate * 2 * numOfChan);
+        setUint16(numOfChan * 2);
+        setUint16(16);
+
+        setUint32(0x61746164); // "data" - chunk
+        setUint32(length - pos - 4);
+
+        // write interleaved data
+        for (let i = 0; i < abuffer.length; i++) {
+            for (let channel = 0; channel < numOfChan; channel++) {
+                let sample = abuffer.getChannelData(channel)[i] * 0x7fff;
+                if (sample < -32768) sample = -32768;
+                if (sample > 32767) sample = 32767;
+                view.setInt16(pos, sample, true);
+                pos += 2;
+            }
+        }
+
+        function setUint16(data) {
+            view.setUint16(pos, data, true);
             pos += 2;
         }
-    }
 
-    function setUint16(data) {
-        view.setUint16(pos, data, true);
-        pos += 2;
-    }
+        function setUint32(data) {
+            view.setUint32(pos, data, true);
+            pos += 4;
+        }
 
-    function setUint32(data) {
-        view.setUint32(pos, data, true);
-        pos += 4;
+        return new Blob([buffer], { type: 'audio/wav' });
     }
 
-    return new Blob([buffer], { type: 'audio/wav' });
-}
-
     function applyVolume() {
         if (!isAudioCombined) return;
         
@@ -1290,6 +1399,7 @@ function bufferToWave(abuffer) {
         fullscreenBtn.disabled = false;
         startTimeInput.disabled = false;
         endTimeInput.disabled = false;
+        resetEndTimeBtn.disabled = false;
         loopCheckbox.disabled = false;
         globalVolumeSlider.disabled = false;
         setStartTimeBtn.disabled = false;
@@ -1585,26 +1695,44 @@ function bufferToWave(abuffer) {
         updatePlaybackRate(speed);
     });
     
-function updatePlaybackRate(speed) {
-    if (!isAudioCombined) return;
-    
-    currentPlaybackRate = speed;
-    video.playbackRate = speed;
-    
-    // ピッチ保持を再設定
-    video.preservesPitch = true;
-    video.mozPreservesPitch = true;
-    video.webkitPreservesPitch = true;
+    // テンポ入力による再生速度更新
+    tempoInput.addEventListener('input', function() {
+        const tempo = parseFloat(this.value);
+        const baseTempo = isTMode ? 66 : 92;
+        const speed = tempo / baseTempo;
+        
+        // 速度を0.5～2.0の範囲に制限
+        const clampedSpeed = Math.max(0.5, Math.min(2.0, speed));
+        
+        playbackSpeedSlider.value = clampedSpeed;
+        playbackSpeedValue.textContent = clampedSpeed.toFixed(2) + 'x';
+        speedSlider.value = clampedSpeed;
+        speedValue.textContent = clampedSpeed.toFixed(2) + 'x';
+        tempoSpeedValue.textContent = clampedSpeed.toFixed(2) + 'x';
+        
+        updatePlaybackRate(clampedSpeed);
+    });
     
-    if (combinedAudioElement) {
-        combinedAudioElement.playbackRate = speed;
+    function updatePlaybackRate(speed) {
+        if (!isAudioCombined) return;
+        
+        currentPlaybackRate = speed;
+        video.playbackRate = speed;
         
-        // 合成音声のピッチ保持を設定
-        combinedAudioElement.preservesPitch = true;
-        combinedAudioElement.mozPreservesPitch = true;
-        combinedAudioElement.webkitPreservesPitch = true;
+        // ピッチ保持を再設定
+        video.preservesPitch = true;
+        video.mozPreservesPitch = true;
+        video.webkitPreservesPitch = true;
+        
+        if (combinedAudioElement) {
+            combinedAudioElement.playbackRate = speed;
+            
+            // 合成音声のピッチ保持を設定
+            combinedAudioElement.preservesPitch = true;
+            combinedAudioElement.mozPreservesPitch = true;
+            combinedAudioElement.webkitPreservesPitch = true;
+        }
     }
-}
     
     // 全画面ボタン
     fullscreenBtn.addEventListener('click', function() {
@@ -1636,8 +1764,66 @@ function updatePlaybackRate(speed) {
         isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
         fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
         video.controls = false;
+        
+        // 全画面時にロックボタンを表示
+        lockControlsBtn.style.display = isFullscreen ? 'flex' : 'none';
+        
+        // 全画面時にコントロールバー自動非表示機能を有効化
+        if (isFullscreen) {
+            resetControlsHideTimer();
+            document.addEventListener('mousemove', handleFullscreenMouseMove);
+        } else {
+            document.removeEventListener('mousemove', handleFullscreenMouseMove);
+            clearTimeout(controlsHideTimeout);
+            showControls();
+        }
+    }
+    
+    // 全画面時のマウス移動処理
+    function handleFullscreenMouseMove() {
+        if (!isControlsLocked) {
+            showControls();
+            resetControlsHideTimer();
+        }
+    }
+    
+    // コントロールバーを表示
+    function showControls() {
+        if (!controlsVisible) {
+            videoControls.style.opacity = '1';
+            controlsVisible = true;
+        }
+    }
+    
+    // コントロールバーを非表示
+    function hideControls() {
+        if (!isControlsLocked && controlsVisible) {
+            videoControls.style.opacity = '0';
+            controlsVisible = false;
+        }
     }
     
+    // コントロールバー非表示タイマーをリセット
+    function resetControlsHideTimer() {
+        clearTimeout(controlsHideTimeout);
+        if (!isControlsLocked) {
+            controlsHideTimeout = setTimeout(hideControls, 1500); // 1.5秒後に非表示
+        }
+    }
+    
+    // ロックボタンのクリック処理
+    lockControlsBtn.addEventListener('click', function() {
+        isControlsLocked = !isControlsLocked;
+        this.classList.toggle('locked', isControlsLocked);
+        
+        if (isControlsLocked) {
+            showControls();
+            clearTimeout(controlsHideTimeout);
+        } else {
+            resetControlsHideTimer();
+        }
+    });
+    
     // キーボードイベント (ESCで全画面終了)
     document.addEventListener('keydown', function(e) {
         if (e.key === 'Escape' && isFullscreen) {
@@ -1680,19 +1866,51 @@ function updatePlaybackRate(speed) {
     // 現在の秒数を開始時間に設定
     setStartTimeBtn.addEventListener('click', function() {
         startTimeInput.value = video.currentTime.toFixed(2);
+        updateProgressMarkers();
     });
     
     // 現在の秒数を終了時間に設定
     setEndTimeBtn.addEventListener('click', function() {
         endTimeInput.value = video.currentTime.toFixed(2);
+        updateProgressMarkers();
     });
     
+    // 終了時間を動画の長さにリセット
+    resetEndTimeBtn.addEventListener('click', function() {
+        endTimeInput.value = video.duration.toFixed(2);
+        updateProgressMarkers();
+    });
+    
+    // プログレスバーのマーカーを更新
+    function updateProgressMarkers() {
+        const duration = video.duration || videoDuration;
+        const startTime = parseFloat(startTimeInput.value) || 0;
+        const endTime = parseFloat(endTimeInput.value) || duration;
+        
+        if (duration > 0) {
+            startMarker.style.left = `${(startTime / duration) * 100}%`;
+            endMarker.style.left = `${(endTime / duration) * 100}%`;
+            
+            startMarker.style.display = 'block';
+            endMarker.style.display = 'block';
+        }
+    }
+    
+    // 開始/終了時間変更時にマーカーを更新
+    startTimeInput.addEventListener('input', updateProgressMarkers);
+    endTimeInput.addEventListener('input', updateProgressMarkers);
+    
     // 合成ボタンクリック
     combineButton.addEventListener('click', combineAudio);
     
     // プレビューボタンクリック
     previewButton.addEventListener('click', togglePreview);
     
+    // 同期ステータスを閉じる
+    syncStatusClose.addEventListener('click', function() {
+        syncStatus.style.display = 'none';
+    });
+    
     // 初期化
     loadAudioFiles();
     updateVolumeIcon();
@@ -1727,5 +1945,11 @@ function updatePlaybackRate(speed) {
     
     initSliderBackgrounds();
     startSyncCheck(); // 同期チェックを開始
+    
+    // 初期テンポ設定
+    tempoInput.value = isTMode ? 66 : 92;
+    tempoInput.dispatchEvent(new Event('input'));
 });
-</script>
+</script>
+</body>
+</html>