Update index.html

index.html

@@ -47,6 +47,7 @@
             border-radius: 5px;
             background-color: #000;
             display: block;
+            cursor: pointer;
         }
         
         .video-controls {
@@ -252,6 +253,37 @@
             color: #ccd6f6;
         }
         
+        .global-volume-container, .playback-speed-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            width: 100%;
+        }
+        
+        .global-volume-slider, .playback-speed-slider {
+            flex-grow: 1;
+            height: 8px;
+            -webkit-appearance: none;
+            background: #1e2a47;
+            border-radius: 5px;
+            outline: none;
+        }
+        
+        .global-volume-slider::-webkit-slider-thumb,
+        .playback-speed-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            background: #64ffda;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+        
+        .slider-value {
+            min-width: 40px;
+            text-align: right;
+        }
+        
         input[type="number"], input[type="checkbox"], select {
             background-color: #112240;
             border: 1px solid #64ffda;
@@ -260,12 +292,6 @@
             border-radius: 3px;
         }
         
-        .buttons {
-            display: flex;
-            gap: 10px;
-            justify-content: center;
-        }
-        
         .tech-decoration {
             width: 100%;
             height: 2px;
@@ -316,8 +342,8 @@
                         <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="1">
                     </div>
                     <div class="speed-control">
-                        <span class="speed-value" id="speed-value">1x</span>
-                        <input type="range" class="speed-slider" id="speed-slider" min="0.25" max="3" step="0.25" value="1">
+                        <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">
                     </div>
                     <button class="control-button fullscreen-button" id="fullscreen-btn">⛶</button>
                 </div>
@@ -341,14 +367,18 @@
                 <input type="checkbox" id="loop">
             </div>
             <div class="setting-item">
-                <label for="global-volume">全体音量係数:</label>
-                <input type="range" id="global-volume" min="0" max="3" step="0.1" value="1">
-                <span id="global-volume-value">1</span>
+                <div class="global-volume-container">
+                    <label>全体音量係数:</label>
+                    <input type="range" class="global-volume-slider" id="global-volume" min="0" max="3" step="0.1" value="1">
+                    <span class="slider-value" id="global-volume-value">1.0</span>
+                </div>
             </div>
             <div class="setting-item">
-                <label for="settings-speed">再生速度:</label>
-                <input type="range" id="settings-speed" min="0.25" max="3" step="0.25" value="1">
-                <span id="settings-speed-value">1x</span>
+                <div class="playback-speed-container">
+                    <label>再生速度:</label>
+                    <input type="range" class="playback-speed-slider" id="playback-speed" min="0.25" max="3" step="0.05" value="1">
+                    <span class="slider-value" id="playback-speed-value">1.00x</span>
+                </div>
             </div>
         </div>
         
@@ -359,37 +389,29 @@
             <div class="audio-item">
                 <label>p.mp3</label>
                 <input type="range" class="audio-slider" data-audio="p" min="0" max="1" step="0.01" value="1">
-                <span class="volume-value">1</span>
+                <span class="slider-value volume-value">1.00</span>
             </div>
             <div class="audio-item">
                 <label>a.mp3</label>
                 <input type="range" class="audio-slider" data-audio="a" min="0" max="1" step="0.01" value="1">
-                <span class="volume-value">1</span>
+                <span class="slider-value volume-value">1.00</span>
             </div>
             <div class="audio-item">
                 <label>t.mp3</label>
                 <input type="range" class="audio-slider" data-audio="t" min="0" max="1" step="0.01" value="1">
-                <span class="volume-value">1</span>
+                <span class="slider-value volume-value">1.00</span>
             </div>
             <div class="audio-item">
                 <label>s.mp3</label>
                 <input type="range" class="audio-slider" data-audio="s" min="0" max="1" step="0.01" value="1">
-                <span class="volume-value">1</span>
+                <span class="slider-value volume-value">1.00</span>
             </div>
             <div class="audio-item">
                 <label>k.mp3</label>
                 <input type="range" class="audio-slider" data-audio="k" min="0" max="1" step="0.01" value="1">
-                <span class="volume-value">1</span>
+                <span class="slider-value volume-value">1.00</span>
             </div>
         </div>
-        
-        <div class="tech-decoration"></div>
-        
-        <div class="buttons">
-            <button id="play-btn">再生</button>
-            <button id="pause-btn">一時停止</button>
-            <button id="stop-btn">停止</button>
-        </div>
     </div>
 
     <script>
@@ -406,12 +428,9 @@
             const volumeSlider = document.getElementById('volume-slider');
             const speedSlider = document.getElementById('speed-slider');
             const speedValue = document.getElementById('speed-value');
-            const settingsSpeedSlider = document.getElementById('settings-speed');
-            const settingsSpeedValue = document.getElementById('settings-speed-value');
+            const playbackSpeedSlider = document.getElementById('playback-speed');
+            const playbackSpeedValue = document.getElementById('playback-speed-value');
             const fullscreenBtn = document.getElementById('fullscreen-btn');
-            const playBtn = document.getElementById('play-btn');
-            const pauseBtn = document.getElementById('pause-btn');
-            const stopBtn = document.getElementById('stop-btn');
             const startTimeInput = document.getElementById('start-time');
             const endTimeInput = document.getElementById('end-time');
             const loopCheckbox = document.getElementById('loop');
@@ -425,6 +444,7 @@
             const audioBuffers = {};
             const audioSources = {};
             const gainNodes = {};
+            const pitchShiftNodes = {};
             
             // 音声ファイル名の配列
             const audioFiles = ['p', 'a', 't', 's', 'k'];
@@ -434,6 +454,7 @@
             let isPlaying = false;
             let isVideoPlaying = false;
             let lastVolume = 1;
+            let shouldPlayFromStartTime = false;
             
             // 動画のメタデータが読み込まれたら
             video.addEventListener('loadedmetadata', function() {
@@ -466,6 +487,16 @@
             // 動画の時間更新イベント
             video.addEventListener('timeupdate', updateTimeDisplay);
             
+            // 動画終了時の処理
+            video.addEventListener('ended', function() {
+                const startTime = parseFloat(startTimeInput.value) || 0;
+                if (!loopCheckbox.checked) {
+                    stopMedia();
+                    video.currentTime = startTime;
+                    updateTimeDisplay();
+                }
+            });
+            
             // プログレスバークリックでシーク
             progressContainer.addEventListener('click', function(e) {
                 if (!video.duration) return;
@@ -474,16 +505,30 @@
                 const pos = (e.clientX - rect.left) / rect.width;
                 const seekTime = pos * video.duration;
                 
+                seekMedia(seekTime);
+            });
+            
+            // 指定した時間にシーク
+            function seekMedia(time) {
+                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 (audioSources[file]) {
                         audioSources[file].stop();
-                        playAudio(file, seekTime);
+                        if (isPlaying) {
+                            playAudio(file, seekTime);
+                        }
                     }
                 });
-            });
+            }
             
             // プログレスバー上でマウス移動時に時間を表示
             progressContainer.addEventListener('mousemove', function(e) {
@@ -505,6 +550,15 @@
                 progressTime.style.display = 'none';
             });
             
+            // 動画クリックで再生/一時停止
+            video.addEventListener('click', function() {
+                if (isVideoPlaying) {
+                    pauseMedia();
+                } else {
+                    playMedia();
+                }
+            });
+            
             // 再生/一時停止ボタン
             playPauseBtn.addEventListener('click', function() {
                 if (isVideoPlaying) {
@@ -548,24 +602,26 @@
             // 再生速度スライダー (動画プレイヤー)
             speedSlider.addEventListener('input', function() {
                 const speed = parseFloat(this.value);
-                speedValue.textContent = `${speed}x`;
+                speedValue.textContent = speed.toFixed(2) + 'x';
+                playbackSpeedSlider.value = speed;
+                playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
                 updatePlaybackRate(speed);
             });
             
             // 再生速度スライダー (設定メニュー)
-            settingsSpeedSlider.addEventListener('input', function() {
+            playbackSpeedSlider.addEventListener('input', function() {
                 const speed = parseFloat(this.value);
-                settingsSpeedValue.textContent = `${speed}x`;
+                playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
                 speedSlider.value = speed;
-                speedValue.textContent = `${speed}x`;
+                speedValue.textContent = speed.toFixed(2) + 'x';
                 updatePlaybackRate(speed);
             });
             
-            // 再生速度を更新
+            // 再生速度を更新 (音の高さを維持)
             function updatePlaybackRate(speed) {
                 video.playbackRate = speed;
                 
-                // 音声の再生速度も更新
+                // 音声の再生速度も更新 (音の高さは維持)
                 audioFiles.forEach(file => {
                     if (audioSources[file]) {
                         audioSources[file].playbackRate.value = speed;
@@ -596,7 +652,7 @@
                     video.controls = false;
                 } else {
                     // 通常表示時の処理
-                    video.controls = false; // ブラウザのコントロールは非表示のまま
+                    video.controls = false;
                 }
             }
             
@@ -639,7 +695,11 @@
                 const endTime = parseFloat(endTimeInput.value) || duration;
                 const loop = loopCheckbox.checked;
                 
-                source.start(0, currentTime, endTime - currentTime);
+                // 再生範囲を計算
+                const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
+                const playDuration = Math.min(endTime, duration) - playStartTime;
+                
+                source.start(0, playStartTime, playDuration);
                 
                 // ループ設定
                 source.loop = loop;
@@ -649,7 +709,7 @@
                     source.loopEnd = endTime;
                 }
                 
-                // 再生速度を同期
+                // 再生速度を同期 (音の高さは維持)
                 source.playbackRate.value = video.playbackRate;
                 
                 audioSources[file] = source;
@@ -657,8 +717,9 @@
             
             // 再生関数
             function playMedia() {
-                const startTime = parseFloat(startTimeInput.value) || 0;
+                const startTime = shouldPlayFromStartTime ? (parseFloat(startTimeInput.value) || 0) : video.currentTime;
                 let endTime = parseFloat(endTimeInput.value) || videoDuration;
+                shouldPlayFromStartTime = false;
                 
                 // 終了時間が動画の長さを超えないように
                 endTime = Math.min(endTime, videoDuration);
@@ -683,23 +744,6 @@
                 isPlaying = true;
                 isVideoPlaying = true;
                 playPauseBtn.textContent = '⏸';
-                
-                // 終了時間に達したら停止
-                video.ontimeupdate = function() {
-                    if (video.currentTime >= endTime) {
-                        if (!loopCheckbox.checked) {
-                            stopMedia();
-                        } else {
-                            video.currentTime = startTime;
-                            audioFiles.forEach(file => {
-                                if (audioSources[file]) {
-                                    audioSources[file].stop();
-                                    playAudio(file, startTime);
-                                }
-                            });
-                        }
-                    }
-                };
             }
             
             // 一時停止関数
@@ -717,6 +761,7 @@
                 isPlaying = false;
                 isVideoPlaying = false;
                 playPauseBtn.textContent = '▶';
+                shouldPlayFromStartTime = true;
             }
             
             // 停止関数
@@ -727,11 +772,6 @@
                 updateTimeDisplay();
             }
             
-            // イベントリスナーを設定
-            playBtn.addEventListener('click', playMedia);
-            pauseBtn.addEventListener('click', pauseMedia);
-            stopBtn.addEventListener('click', stopMedia);
-            
             // ボリュームスライダーのイベント
             audioSliders.forEach((slider, index) => {
                 slider.addEventListener('input', function() {
@@ -765,7 +805,7 @@
             loadAudioFiles();
             updateVolumeIcon();
             volumeSlider.value = video.volume;
-            video.controls = false; // ブラウザのコントロールを非表示
+            video.controls = false;
         });
     </script>
 </body>