Update index.html

index.html

@@ -6,16 +6,93 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>高度な音声動画プレイヤー</title>
     <style>
-        /* 既存のスタイルはそのまま保持 */
+        /* テクノロジー風背景スタイル */
+        .tech-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -2;
+            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+            overflow: hidden;
+        }
+
+        .circuit-line {
+            position: absolute;
+            background: rgba(0, 255, 255, 0.1);
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+        }
+
+        .grid-dot {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: rgba(0, 255, 255, 0.3);
+            border-radius: 50%;
+        }
+
+        .hexagon {
+            position: absolute;
+            width: 40px;
+            height: 23px;
+            background: rgba(0, 255, 255, 0.05);
+            border: 1px solid rgba(0, 255, 255, 0.1);
+            box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
+        }
+
+        .hexagon:before, .hexagon:after {
+            content: "";
+            position: absolute;
+            width: 0;
+            border-left: 20px solid transparent;
+            border-right: 20px solid transparent;
+        }
+
+        .hexagon:before {
+            bottom: 100%;
+            border-bottom: 11.5px solid rgba(0, 255, 255, 0.05);
+        }
+
+        .hexagon:after {
+            top: 100%;
+            width: 0;
+            border-top: 11.5px solid rgba(0, 255, 255, 0.05);
+        }
+
+        .pulse {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: rgba(0, 255, 255, 0.7);
+            border-radius: 50%;
+            box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.5);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(0.8); opacity: 0.7; }
+            50% { transform: scale(1.2); opacity: 1; }
+            100% { transform: scale(0.8); opacity: 0.7; }
+        }
+
+        @keyframes float {
+            0% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(5deg); }
+            100% { transform: translateY(0) rotate(0deg); }
+        }
+
+        /* メインスタイル */
         body {
             font-family: 'Arial', sans-serif;
-            background-color: #0a192f;
+            background-color: rgba(10, 25, 47, 0.8);
             color: #e6f1ff;
             margin: 0;
             padding: 20px;
             display: flex;
             flex-direction: column;
             align-items: center;
+            min-height: 100vh;
         }
         
         h1 {
@@ -32,10 +109,12 @@
             flex-direction: column;
             width: 100%;
             max-width: 800px;
-            background-color: #112240;
+            background-color: rgba(17, 34, 64, 0.9);
             border-radius: 10px;
             padding: 20px;
             box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
+            backdrop-filter: blur(5px);
+            border: 1px solid rgba(100, 255, 218, 0.1);
         }
         
         .video-container {
@@ -147,6 +226,9 @@
             outline: none;
             opacity: 0;
             transition: opacity 0.3s, width 0.3s;
+            background-image: linear-gradient(#64ffda, #64ffda);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
         }
         
         .volume-control:hover .volume-slider {
@@ -176,6 +258,9 @@
             background: #1e2a47;
             border-radius: 3px;
             outline: none;
+            background-image: linear-gradient(#64ffda, #64ffda);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
         }
         
         .speed-slider::-webkit-slider-thumb {
@@ -222,6 +307,9 @@
             background: #1e2a47;
             border-radius: 5px;
             outline: none;
+            background-image: linear-gradient(#64ffda, #64ffda);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
         }
         
         .audio-slider::-webkit-slider-thumb {
@@ -269,6 +357,9 @@
             background: #1e2a47;
             border-radius: 5px;
             outline: none;
+            background-image: linear-gradient(#64ffda, #64ffda);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
         }
         
         .global-volume-slider::-webkit-slider-thumb,
@@ -432,6 +523,9 @@
     </style>
 </head>
 <body>
+    <!-- テクノロジー風背景 -->
+    <div class="tech-background" id="techBg"></div>
+    
     <!-- ローディングオーバーレイ -->
     <div class="loading-overlay" id="loadingOverlay">
         <div class="spinner-box">
@@ -465,7 +559,7 @@
                     </div>
                     <div class="speed-control">
                         <span class="speed-value" id="speed-value">1.00x</span>
-                        <input type="range" class="speed-slider" id="speed-slider" min="0.25" max="3" step="0.05" value="1">
+                        <input type="range" class="speed-slider" id="speed-slider" min="0.5" max="2" step="0.01" value="1">
                     </div>
                     <button class="control-button fullscreen-button" id="fullscreen-btn">⛶</button>
                 </div>
@@ -479,14 +573,14 @@
             <div class="setting-item">
                 <label for="start-time">再生開始秒数:</label>
                 <div>
-                    <input type="number" id="start-time" min="0" value="0" step="0.1">
+                    <input type="number" id="start-time" min="0" value="0" step="0.01">
                     <button class="time-set-button" id="set-start-time">現在の秒数に設定</button>
                 </div>
             </div>
             <div class="setting-item">
                 <label for="end-time">再生終了秒数:</label>
                 <div>
-                    <input type="number" id="end-time" min="0" value="0" step="0.1">
+                    <input type="number" id="end-time" min="0" value="0" step="0.01">
                     <button class="time-set-button" id="set-end-time">現在の秒数に設定</button>
                 </div>
             </div>
@@ -544,9 +638,69 @@
     
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // テクノロジー風背景を生成
+            function createTechBackground() {
+                const bg = document.getElementById('techBg');
+                
+                // 回路風の線を生成
+                for (let i = 0; i < 30; i++) {
+                    const line = document.createElement('div');
+                    line.className = 'circuit-line';
+                    
+                    const isHorizontal = Math.random() > 0.5;
+                    if (isHorizontal) {
+                        line.style.width = `${Math.random() * 300 + 100}px`;
+                        line.style.height = '1px';
+                    } else {
+                        line.style.width = '1px';
+                        line.style.height = `${Math.random() * 300 + 100}px`;
+                    }
+                    
+                    line.style.left = `${Math.random() * 100}%`;
+                    line.style.top = `${Math.random() * 100}%`;
+                    line.style.opacity = Math.random() * 0.5 + 0.1;
+                    
+                    bg.appendChild(line);
+                }
+                
+                // グリッドドットを生成
+                for (let i = 0; i < 200; i++) {
+                    const dot = document.createElement('div');
+                    dot.className = 'grid-dot';
+                    dot.style.left = `${Math.random() * 100}%`;
+                    dot.style.top = `${Math.random() * 100}%`;
+                    bg.appendChild(dot);
+                }
+                
+                // 六角形を生成
+                for (let i = 0; i < 15; i++) {
+                    const hex = document.createElement('div');
+                    hex.className = 'hexagon';
+                    hex.style.left = `${Math.random() * 100}%`;
+                    hex.style.top = `${Math.random() * 100}%`;
+                    hex.style.transform = `rotate(${Math.random() * 360}deg)`;
+                    hex.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out`;
+                    bg.appendChild(hex);
+                }
+                
+                // パルスする点を生成
+                for (let i = 0; i < 8; i++) {
+                    const pulse = document.createElement('div');
+                    pulse.className = 'pulse';
+                    pulse.style.left = `${Math.random() * 100}%`;
+                    pulse.style.top = `${Math.random() * 100}%`;
+                    pulse.style.animationDelay = `${Math.random() * 2}s`;
+                    bg.appendChild(pulse);
+                }
+            }
+            
+            createTechBackground();
+            
             // ローディング状態を管理
             let loadingCount = 0;
             let totalToLoad = 6; // 動画 + 5音声ファイル
+            let lastUpdateTime = 0;
+            const updateInterval = 50; // 50msごとに更新 (20fps)
             
             // ローディング完了チェック
             function checkLoadingComplete() {
@@ -620,12 +774,13 @@
             let isVideoPlaying = false;
             let lastVolume = 1;
             let currentPlaybackRate = 1;
+            let isFullscreen = false;
             
             // 動画のメタデータが読み込まれたら
             video.addEventListener('loadedmetadata', function() {
                 try {
                     videoDuration = video.duration;
-                    endTimeInput.value = videoDuration.toFixed(1);
+                    endTimeInput.value = videoDuration.toFixed(2);
                     endTimeInput.max = videoDuration;
                     startTimeInput.max = videoDuration - 0.1;
                     updateTimeDisplay();
@@ -669,6 +824,10 @@
             
             // 時間表示を更新
             function updateTimeDisplay() {
+                const now = performance.now();
+                if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
+                lastUpdateTime = now;
+                
                 try {
                     const currentTime = video.currentTime;
                     const duration = video.duration || videoDuration;
@@ -886,12 +1045,22 @@
             // 全画面ボタン
             fullscreenBtn.addEventListener('click', function() {
                 try {
-                    if (videoContainer.requestFullscreen) {
-                        videoContainer.requestFullscreen();
-                    } else if (videoContainer.webkitRequestFullscreen) {
-                        videoContainer.webkitRequestFullscreen();
-                    } else if (videoContainer.msRequestFullscreen) {
-                        videoContainer.msRequestFullscreen();
+                    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, '全画面表示中にエラーが発生しました');
@@ -904,7 +1073,9 @@
             document.addEventListener('msfullscreenchange', handleFullscreenChange);
             
             function handleFullscreenChange() {
-                const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+                isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+                fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
+                
                 if (isFullscreen) {
                     // 全画面時の処理
                     video.controls = false;
@@ -914,6 +1085,19 @@
                 }
             }
             
+            // キーボードイベント (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 loadAudioFiles() {
                 audioFiles.forEach(file => {
@@ -1003,10 +1187,13 @@
                     }
                     
                     // 動画を再生
-                    video.play();
-                    isPlaying = true;
-                    isVideoPlaying = true;
-                    playPauseBtn.textContent = '⏸';
+                    video.play().then(() => {
+                        isPlaying = true;
+                        isVideoPlaying = true;
+                        playPauseBtn.textContent = '⏸';
+                    }).catch(error => {
+                        handleError(error, '動画再生中にエラーが発生しました');
+                    });
                     
                     // 音声を再生
                     audioFiles.forEach(file => {
@@ -1019,19 +1206,17 @@
             
             // 一時停止関数
             function pauseMedia() {
-                if (!isPlaying) return;
-                
                 try {
                     video.pause();
+                    isPlaying = false;
+                    isVideoPlaying = false;
+                    playPauseBtn.textContent = '▶';
+                    
                     audioFiles.forEach(file => {
                         if (audioElements[file]) {
                             audioElements[file].pause();
                         }
                     });
-                    
-                    isPlaying = false;
-                    isVideoPlaying = false;
-                    playPauseBtn.textContent = '▶';
                 } catch (error) {
                     handleError(error, 'メディア一時停止中にエラーが発生しました');
                 }
@@ -1063,7 +1248,7 @@
                     audioFiles.forEach(file => {
                         if (audioElements[file]) {
                             const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                            const volume = parseFloat(volumeSlider.value) * value;
+                            const volume = parseFloat(volumeSlider.value) * (value/10);
                             audioElements[file].volume = volume;
                         }
                     });
@@ -1088,7 +1273,7 @@
             // 現在の秒数を開始時間に設定
             setStartTimeBtn.addEventListener('click', function() {
                 try {
-                    startTimeInput.value = video.currentTime.toFixed(1);
+                    startTimeInput.value = video.currentTime.toFixed(2);
                 } catch (error) {
                     handleError(error, '開始時間設定中にエラーが発生しました');
                 }
@@ -1097,17 +1282,79 @@
             // 現在の秒数を終了時間に設定
             setEndTimeBtn.addEventListener('click', function() {
                 try {
-                    endTimeInput.value = video.currentTime.toFixed(1);
+                    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 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, 
+                    playbackSpeedSlider, 
+                    ...audioSliders
+                ];
+                
+                sliders.forEach(slider => {
+                    if (slider) {
+                        slider.style.backgroundImage = 'linear-gradient(#64ffda, #64ffda)';
+                        slider.style.backgroundRepeat = 'no-repeat';
+                    }
+                });
+                
+                updateSliderBackgrounds();
+            }
+            
+            // スライダー変更時に背景を更新
+            const allSliders = [
+                volumeSlider, 
+                speedSlider, 
+                globalVolumeSlider, 
+                playbackSpeedSlider, 
+                ...audioSliders
+            ];
+            
+            allSliders.forEach(slider => {
+                if (slider) {
+                    slider.addEventListener('input', updateSliderBackgrounds);
+                }
+            });
+            
             // 初期化
             loadAudioFiles();
             updateVolumeIcon();
             volumeSlider.value = video.volume;
             video.controls = false;
+            initSliderBackgrounds();
         });
     </script>
 </body>