Spaces:

soiz1
/

sing-song-player-2uw9e28u

Running

App Files Files Community

soiz1 commited on Jul 4

Commit

b37f884

1 Parent(s): b2580a7

Update index.html

Browse files

Files changed (1) hide show

index.html +380 -322

index.html CHANGED Viewed

@@ -2,10 +2,11 @@
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>高度な音声動画プレイヤー</title>
-    <script src="https://soiz1-eruda3.hf.space/eruda.js"></script>
     <style>
         body {
             font-family: 'Arial', sans-serif;
             background-color: #0a192f;
@@ -320,28 +321,7 @@
             width: 100%;
             border-radius: 0;
         }
-        .time-input-container {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        .set-time-btn {
-            background-color: #112240;
-            border: 1px solid #64ffda;
-            color: #e6f1ff;
-            padding: 5px 8px;
-            border-radius: 3px;
-            cursor: pointer;
-            font-size: 12px;
-            transition: background-color 0.3s;
-        }
-        .set-time-btn:hover {
-            background-color: rgba(100, 255, 218, 0.2);
-        }
         /* ローディングアニメーション */
         .loading-overlay {
             position: fixed;
@@ -433,6 +413,22 @@
                 transform: rotate(360deg);
             }
         }
     </style>
 </head>
 <body>
@@ -482,16 +478,16 @@
             <h2>設定</h2>
             <div class="setting-item">
                 <label for="start-time">再生開始秒数:</label>
-                <div class="time-input-container">
                     <input type="number" id="start-time" min="0" value="0" step="0.1">
-                    <button class="set-time-btn" id="set-start-btn">現在の秒数に設定</button>
                 </div>
             </div>
             <div class="setting-item">
                 <label for="end-time">再生終了秒数:</label>
-                <div class="time-input-container">
                     <input type="number" id="end-time" min="0" value="0" step="0.1">
-                    <button class="set-time-btn" id="set-end-btn">現在の秒数に設定</button>
                 </div>
             </div>
             <div class="setting-item">
@@ -548,6 +544,45 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // 要素を取得
             const video = document.getElementById('video');
             const videoContainer = document.getElementById('video-container');
@@ -565,19 +600,16 @@
             const fullscreenBtn = document.getElementById('fullscreen-btn');
             const startTimeInput = document.getElementById('start-time');
             const endTimeInput = document.getElementById('end-time');
-            const setStartBtn = document.getElementById('set-start-btn');
-            const setEndBtn = document.getElementById('set-end-btn');
             const loopCheckbox = document.getElementById('loop');
             const globalVolumeSlider = document.getElementById('global-volume');
             const globalVolumeValue = document.getElementById('global-volume-value');
             const audioSliders = document.querySelectorAll('.audio-slider');
             const volumeValues = document.querySelectorAll('.volume-value');
-            const loadingOverlay = document.getElementById('loadingOverlay');
             // 音声オブジェクトを作成
             const audioElements = {};
-            const audioContexts = {};
-            const audioGains = {};
             // 音声ファイル名の配列
             const audioFiles = ['p', 'a', 't', 's', 'k'];
@@ -588,80 +620,89 @@
             let isVideoPlaying = false;
             let lastVolume = 1;
             let currentPlaybackRate = 1;
-            let allAudioLoaded = false;
-            let videoLoaded = false;
-            // ローディングアニメーションを非表示にする関数
-            function hideLoadingOverlay() {
-                loadingOverlay.style.opacity = '0';
-                setTimeout(function() {
-                    loadingOverlay.style.display = 'none';
-                }, 1000);
-            }
-            // すべてのメディアが読み込まれたかチェック
-            function checkAllMediaLoaded() {
-                if (allAudioLoaded && videoLoaded) {
-                    setTimeout(hideLoadingOverlay, 500);
-                }
-            }
             // 動画のメタデータが読み込まれたら
             video.addEventListener('loadedmetadata', function() {
-                videoDuration = video.duration;
-                endTimeInput.value = videoDuration.toFixed(1);
-                endTimeInput.max = videoDuration;
-                startTimeInput.max = videoDuration - 0.1;
-                updateTimeDisplay();
-                videoLoaded = true;
-                checkAllMediaLoaded();
             });
-            // 動画のエラー処理
             video.addEventListener('error', function() {
-                console.error('動画の読み込み中にエラーが発生しました');
-                videoLoaded = true;
-                checkAllMediaLoaded();
             });
-            // 再生/一時停止ボタン
-            playPauseBtn.addEventListener('click', function(e) {
-                e.stopPropagation();
-                togglePlayPause();
             });
-            // 時間表示を更新 (小数点以下2桁表示)
             function updateTimeDisplay() {
-                const currentTime = video.currentTime;
-                const duration = video.duration || videoDuration;
-                const currentMinutes = Math.floor(currentTime / 60);
-                const currentSeconds = Math.floor(currentTime % 60);
-                const currentMilliseconds = Math.floor((currentTime % 1) * 100);
-                const durationMinutes = Math.floor(duration / 60);
-                const durationSeconds = Math.floor(duration % 60);
-                const durationMilliseconds = Math.floor((duration % 1) * 100);
-                timeDisplay.textContent =
-                    `${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}%`;
-                // 現在の秒数が終了秒数を超えている場合、一時停止
-                const endTime = parseFloat(endTimeInput.value) || duration;
-                if (currentTime >= endTime) {
-                    if (loopCheckbox.checked) {
-                        const startTime = parseFloat(startTimeInput.value) || 0;
-                        seekMedia(startTime);
-                        if (!isPlaying) {
-                            playMedia();
                         }
-                    } else {
-                        pauseMedia();
                     }
                 }
             }
@@ -672,58 +713,74 @@
             // 動画終了時の処理
             video.addEventListener('ended', function() {
-                if (!loopCheckbox.checked) {
-                    const startTime = parseFloat(startTimeInput.value) || 0;
-                    seekMedia(startTime);
-                    pauseMedia();
                 }
             });
             // プログレスバークリックでシーク
             progressContainer.addEventListener('click', function(e) {
-                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) {
-                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;
-                    }
-                });
             }
             // プログレスバー上でマウス移動時に時間を表示
             progressContainer.addEventListener('mousemove', function(e) {
-                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() {
@@ -746,22 +803,30 @@
             // 音量コントロール
             volumeSlider.addEventListener('input', function() {
-                video.volume = this.value;
-                lastVolume = this.value;
-                updateVolumeIcon();
             });
             // 音量ボタン
             volumeBtn.addEventListener('click', function() {
-                if (video.volume > 0) {
-                    lastVolume = video.volume;
-                    video.volume = 0;
-                    volumeSlider.value = 0;
-                } else {
-                    video.volume = lastVolume;
-                    volumeSlider.value = lastVolume;
                 }
-                updateVolumeIcon();
             });
             // 音量アイコンを更新
@@ -777,43 +842,59 @@
             // 再生速度スライダー (動画プレイヤー)
             speedSlider.addEventListener('input', function() {
-                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() {
-                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) {
-                currentPlaybackRate = speed;
-                video.playbackRate = speed;
-                // 音声の再生速度を変更
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        audioElements[file].playbackRate = speed;
-                        audioElements[file].preservesPitch = true; // ピッチを保持
-                    }
-                });
             }
             // 全画面ボタン
             fullscreenBtn.addEventListener('click', function() {
-                if (videoContainer.requestFullscreen) {
-                    videoContainer.requestFullscreen();
-                } else if (videoContainer.webkitRequestFullscreen) {
-                    videoContainer.webkitRequestFullscreen();
-                } else if (videoContainer.msRequestFullscreen) {
-                    videoContainer.msRequestFullscreen();
                 }
             });
@@ -835,119 +916,94 @@
             // 音声ファイルをロード
             function loadAudioFiles() {
-                let loadedCount = 0;
                 audioFiles.forEach(file => {
-                    const audio = new Audio(`${file}.mp3`);
-                    audio.preload = 'auto';
-                    audio.preservesPitch = true; // ピッチを保持
-                    audio.loop = false;
-                    audioElements[file] = audio;
-                    // Web Audio API コンテキストを作成
                     try {
-                        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                        const source = audioContext.createMediaElementSource(audio);
-                        const gainNode = audioContext.createGain();
-                        source.connect(gainNode);
-                        gainNode.connect(audioContext.destination);
-                        audioContexts[file] = audioContext;
-                        audioGains[file] = gainNode;
-                    } catch (e) {
-                        console.error('Web Audio API の初期化に失敗しました:', e);
                     }
-                    // 音声が読み込まれたら
-                    audio.addEventListener('loadedmetadata', function() {
-                        console.log(`${file}.mp3 loaded`);
-                        loadedCount++;
-                        if (loadedCount === audioFiles.length) {
-                            allAudioLoaded = true;
-                            checkAllMediaLoaded();
-                        }
-                    });
-                    // エラー処理
-                    audio.addEventListener('error', function() {
-                        console.error(`Error loading ${file}.mp3`);
-                        loadedCount++;
-                        if (loadedCount === audioFiles.length) {
-                            allAudioLoaded = true;
-                            checkAllMediaLoaded();
-                        }
-                    });
                 });
             }
             function playAudio(file, startTime) {
                 if (!audioElements[file]) return;
-                const audio = audioElements[file];
-                const duration = video.duration || videoDuration;
-                const endTime = parseFloat(endTimeInput.value) || duration;
-                // ボリューム設定
-                const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
-                if (audioGains[file]) {
-                    audioGains[file].gain.value = volume;
-                } else {
                     audio.volume = volume;
-                }
-                // 再生速度設定
-                audio.playbackRate = currentPlaybackRate;
-                audio.preservesPitch = true;
-                // 再生時間計算
-                const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
-                const playEndTime = Math.min(endTime, duration);
-                audio.currentTime = playStartTime;
-                // 再生
-                const playPromise = audio.play();
-                if (playPromise !== undefined) {
-                    playPromise.catch(e => {
-                        console.log("Audio play failed:", e);
-                        // ユーザー操作がない場合、音声をミュートにして再試行
-                        audio.muted = true;
-                        audio.play().catch(e => console.log("Retry with mute failed:", e));
-                    });
-                }
-                // ループ設定
-                audio.loop = loopCheckbox.checked;
-                if (!loopCheckbox.checked) {
-                    // ループ再生でない場合、終了時間に達したら停止
-                    setTimeout(() => {
-                        if (audio.currentTime >= playEndTime) {
-                            audio.pause();
                         }
-                    }, (playEndTime - playStartTime) * 1000);
                 }
             }
             // 再生関数
             function playMedia() {
-                const currentTime = video.currentTime;
-                const duration = video.duration || videoDuration;
-                const endTime = parseFloat(endTimeInput.value) || duration;
-                // 現在位置が終了時間を超えている場合、開始位置に戻る
-                if (currentTime >= endTime) {
-                    const startTime = parseFloat(startTimeInput.value) || 0;
-                    seekMedia(startTime);
-                }
-                // 動画を再生
-                video.play().then(() => {
                     isPlaying = true;
                     isVideoPlaying = true;
                     playPauseBtn.textContent = '⏸';
@@ -956,79 +1012,95 @@
                     audioFiles.forEach(file => {
                         playAudio(file, video.currentTime);
                     });
-                }).catch(e => {
-                    console.error("Video play failed:", e);
-                });
             }
             // 一時停止関数
             function pauseMedia() {
                 if (!isPlaying) return;
-                video.pause();
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        audioElements[file].pause();
-                    }
-                });
-                isPlaying = false;
-                isVideoPlaying = false;
-                playPauseBtn.textContent = '▶';
             }
             // ボリュームスライダーのイベント
             audioSliders.forEach((slider, index) => {
                 slider.addEventListener('input', function() {
-                    const value = parseFloat(this.value);
-                    volumeValues[index].textContent = value.toFixed(2);
-                    if (audioElements[this.dataset.audio]) {
-                        const globalVolume = parseFloat(globalVolumeSlider.value);
-                        if (audioGains[this.dataset.audio]) {
-                            audioGains[this.dataset.audio].gain.value = value * globalVolume;
-                        } else {
                             audioElements[this.dataset.audio].volume = value * globalVolume;
                         }
                     }
                 });
             });
             // 全体音量スライダーのイベント
             globalVolumeSlider.addEventListener('input', function() {
-                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;
-                        if (audioGains[file]) {
-                            audioGains[file].gain.value = volume;
-                        } else {
                             audioElements[file].volume = volume;
                         }
-                    }
-                });
             });
             // ループ設定変更時
             loopCheckbox.addEventListener('change', function() {
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        audioElements[file].loop = this.checked;
-                    }
-                });
             });
-            // 開始秒数を現在の秒数に設定
-            setStartBtn.addEventListener('click', function() {
-                startTimeInput.value = video.currentTime.toFixed(1);
             });
-            // 終了秒数を現在の秒数に設定
-            setEndBtn.addEventListener('click', function() {
-                endTimeInput.value = video.currentTime.toFixed(1);
             });
             // 初期化
@@ -1036,20 +1108,6 @@
             updateVolumeIcon();
             volumeSlider.value = video.volume;
             video.controls = false;
-            // 現在の秒数が終了秒数より後なら、一時停止させる
-            function checkCurrentTime() {
-                const duration = video.duration || videoDuration;
-                const endTime = parseFloat(endTimeInput.value) || duration;
-                if (video.currentTime >= endTime) {
-                    seekMedia(endTime);
-                    pauseMedia();
-                }
-            }
-            // 定期的にチェック
-            setInterval(checkCurrentTime, 1000);
         });
     </script>
 </body>

 <html lang="ja">
 <head>
     <meta charset="UTF-8">
+    <script src="https://soiz1-eruda3.hf.space/eruda.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>高度な音声動画プレイヤー</title>
     <style>
+        /* 既存のスタイルはそのまま保持 */
         body {
             font-family: 'Arial', sans-serif;
             background-color: #0a192f;
             width: 100%;
             border-radius: 0;
         }
         /* ローディングアニメーション */
         .loading-overlay {
             position: fixed;
                 transform: rotate(360deg);
             }
         }
+        .time-set-button {
+            background-color: #112240;
+            border: 1px solid #64ffda;
+            color: #e6f1ff;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 12px;
+            margin-left: 5px;
+            transition: background-color 0.3s;
+        }
+        .time-set-button:hover {
+            background-color: rgba(100, 255, 218, 0.2);
+        }
     </style>
 </head>
 <body>
             <h2>設定</h2>
             <div class="setting-item">
                 <label for="start-time">再生開始秒数:</label>
+                <div>
                     <input type="number" id="start-time" min="0" value="0" step="0.1">
+                    <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">
+                    <button class="time-set-button" id="set-end-time">現在の秒数に設定</button>
                 </div>
             </div>
             <div class="setting-item">
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // ローディング状態を管理
+            let loadingCount = 0;
+            let totalToLoad = 6; // 動画 + 5音声ファイル
+            // ローディング完了チェック
+            function checkLoadingComplete() {
+                loadingCount++;
+                if (loadingCount >= totalToLoad) {
+                    setTimeout(function() {
+                        const loadingOverlay = document.getElementById('loadingOverlay');
+                        loadingOverlay.style.opacity = '0';
+                        setTimeout(function() {
+                            loadingOverlay.style.display = 'none';
+                        }, 1000);
+                    }, 500);
+                }
+            }
+            // エラーハンドリング関数
+            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, 'ピッチ設定中にエラーが発生しました');
+                }
+            }
             // 要素を取得
             const video = document.getElementById('video');
             const videoContainer = document.getElementById('video-container');
             const fullscreenBtn = document.getElementById('fullscreen-btn');
             const startTimeInput = document.getElementById('start-time');
             const endTimeInput = document.getElementById('end-time');
             const loopCheckbox = document.getElementById('loop');
             const globalVolumeSlider = document.getElementById('global-volume');
             const globalVolumeValue = document.getElementById('global-volume-value');
             const audioSliders = document.querySelectorAll('.audio-slider');
             const volumeValues = document.querySelectorAll('.volume-value');
+            const setStartTimeBtn = document.getElementById('set-start-time');
+            const setEndTimeBtn = document.getElementById('set-end-time');
             // 音声オブジェクトを作成
             const audioElements = {};
             // 音声ファイル名の配列
             const audioFiles = ['p', 'a', 't', 's', 'k'];
             let isVideoPlaying = false;
             let lastVolume = 1;
             let currentPlaybackRate = 1;
             // 動画のメタデータが読み込まれたら
             video.addEventListener('loadedmetadata', function() {
+                try {
+                    videoDuration = video.duration;
+                    endTimeInput.value = videoDuration.toFixed(1);
+                    endTimeInput.max = videoDuration;
+                    startTimeInput.max = videoDuration - 0.1;
+                    updateTimeDisplay();
+                    checkLoadingComplete();
+                } catch (error) {
+                    handleError(error, '動画メタデータ読み込み中にエラーが発生しました');
+                }
             });
+            // 動画エラー処理
             video.addEventListener('error', function() {
+                handleError(video.error, '動画読み込み中にエラーが発生しました');
             });
+            // 再生ボタンクリック
+            playPauseBtn.addEventListener('click', function() {
+                try {
+                    // 現在の秒数が終了秒数を超えている場合は開始位置に戻す
+                    const endTime = parseFloat(endTimeInput.value) || videoDuration;
+                    if (video.currentTime >= endTime) {
+                        const startTime = parseFloat(startTimeInput.value) || 0;
+                        seekMedia(startTime);
+                    }
+                    togglePlayPause();
+                    // 音声要素の再生を許可
+                    audioFiles.forEach(file => {
+                        if (audioElements[file]) {
+                            audioElements[file].play().catch(e => {
+                                if (e.name !== 'AbortError') {
+                                    handleError(e, `音声再生中にエラーが発生しました (${file}.mp3)`);
+                                }
+                            });
+                        }
+                    });
+                } catch (error) {
+                    handleError(error, '再生/一時停止操作中にエラーが発生しました');
+                }
             });
+            // 時間表示を更新
             function updateTimeDisplay() {
+                try {
+                    const currentTime = video.currentTime;
+                    const duration = video.duration || videoDuration;
+                    const currentMinutes = Math.floor(currentTime / 60);
+                    const currentSeconds = Math.floor(currentTime % 60);
+                    const currentMilliseconds = Math.floor((currentTime % 1) * 100);
+                    const durationMinutes = Math.floor(duration / 60);
+                    const durationSeconds = Math.floor(duration % 60);
+                    const durationMilliseconds = Math.floor((duration % 1) * 100);
+                    timeDisplay.textContent =
+                        `${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}%`;
+                    // 現在の秒数が終了秒数を超えている場合
+                    const endTime = parseFloat(endTimeInput.value) || duration;
+                    if (currentTime >= endTime && endTime > 0) {
+                        if (loopCheckbox.checked) {
+                            const startTime = parseFloat(startTimeInput.value) || 0;
+                            seekMedia(startTime);
+                            if (!isPlaying) {
+                                playMedia();
+                            }
+                        } else {
+                            pauseMedia();
                         }
                     }
+                } catch (error) {
+                    handleError(error, '時間表示更新中にエラーが発生しました');
                 }
             }
             // 動画終了時の処理
             video.addEventListener('ended', function() {
+                try {
+                    if (!loopCheckbox.checked) {
+                        const startTime = parseFloat(startTimeInput.value) || 0;
+                        seekMedia(startTime);
+                        pauseMedia();
+                    }
+                } catch (error) {
+                    handleError(error, '動画終了処理中にエラーが発生しました');
                 }
             });
             // プログレスバークリックでシーク
             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, 'シーク操作中にエラーが発生しました');
+                }
             });
             // 指定した時間にシーク
             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;
+                        }
+                    });
+                } catch (error) {
+                    handleError(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, 'プログレスバー操作中にエラーが発生しました');
+                }
             });
             progressContainer.addEventListener('mouseleave', function() {
             // 音量コントロール
             volumeSlider.addEventListener('input', function() {
+                try {
+                    video.volume = this.value;
+                    lastVolume = this.value;
+                    updateVolumeIcon();
+                } catch (error) {
+                    handleError(error, '音量設定中にエラーが発生しました');
+                }
             });
             // 音量ボタン
             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, '音量切り替え中にエラーが発生しました');
                 }
             });
             // 音量アイコンを更新
             // 再生速度スライダー (動画プレイヤー)
             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, '再生速度設定中にエラーが発生しました');
+                }
             });
             // 再生速度スライダー (設定メニュー)
             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, '再生速度設定中にエラーが発生しました');
+                }
             });
             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, '再生速度更新中にエラーが発生しました');
+                }
             }
             // 全画面ボタン
             fullscreenBtn.addEventListener('click', function() {
+                try {
+                    if (videoContainer.requestFullscreen) {
+                        videoContainer.requestFullscreen();
+                    } else if (videoContainer.webkitRequestFullscreen) {
+                        videoContainer.webkitRequestFullscreen();
+                    } else if (videoContainer.msRequestFullscreen) {
+                        videoContainer.msRequestFullscreen();
+                    }
+                } catch (error) {
+                    handleError(error, '全画面表示中にエラーが発生しました');
                 }
             });
             // 音声ファイルをロード
             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(); // エラー時もカウント
+                        });
+                    } catch (error) {
+                        handleError(error, `音声ファイル初期化中にエラーが発生しました (${file}.mp3)`);
+                        checkLoadingComplete(); // エラー時もカウント
                     }
                 });
             }
             function playAudio(file, startTime) {
                 if (!audioElements[file]) return;
+                try {
+                    const audio = audioElements[file];
+                    const duration = video.duration || videoDuration;
+                    const endTime = parseFloat(endTimeInput.value) || duration;
+                    // ボリューム設定
+                    const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
+                    const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
                     audio.volume = volume;
+                    // 再生速度設定
+                    audio.playbackRate = currentPlaybackRate;
+                    setPreservesPitch(audio, true);
+                    // 再生時間計算
+                    const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
+                    const playEndTime = Math.min(endTime, duration);
+                    audio.currentTime = playStartTime;
+                    // 再生
+                    audio.play().catch(e => {
+                        if (e.name !== 'AbortError') {
+                            handleError(e, `音声再生中にエラーが発生しました (${file}.mp3)`);
                         }
+                    });
+                    // ループ設定
+                    audio.loop = loopCheckbox.checked;
+                    if (!loopCheckbox.checked) {
+                        // ループ再生でない場合、終了時間に達したら停止
+                        setTimeout(() => {
+                            if (audio.currentTime >= playEndTime) {
+                                audio.pause();
+                            }
+                        }, (playEndTime - playStartTime) * 1000);
+                    }
+                } catch (error) {
+                    handleError(error, `音声再生中にエラーが発生しました (${file}.mp3)`);
                 }
             }
             // 再生関数
             function playMedia() {
+                try {
+                    const startTime = video.currentTime;
+                    const endTime = parseFloat(endTimeInput.value) || videoDuration;
+                    // 終了時間が動画の長さを超えないように
+                    const actualEndTime = Math.min(endTime, videoDuration);
+                    // 現在位置が終了時間を超えている場合、開始位置に戻る
+                    if (startTime >= actualEndTime) {
+                        video.currentTime = parseFloat(startTimeInput.value) || 0;
+                    }
+                    // 動画を再生
+                    video.play();
                     isPlaying = true;
                     isVideoPlaying = true;
                     playPauseBtn.textContent = '⏸';
                     audioFiles.forEach(file => {
                         playAudio(file, video.currentTime);
                     });
+                } catch (error) {
+                    handleError(error, 'メディア再生中にエラーが発生しました');
+                }
             }
             // 一時停止関数
             function pauseMedia() {
                 if (!isPlaying) return;
+                try {
+                    video.pause();
+                    audioFiles.forEach(file => {
+                        if (audioElements[file]) {
+                            audioElements[file].pause();
+                        }
+                    });
+                    isPlaying = false;
+                    isVideoPlaying = false;
+                    playPauseBtn.textContent = '▶';
+                } catch (error) {
+                    handleError(error, 'メディア一時停止中にエラーが発生しました');
+                }
             }
             // ボリュームスライダーのイベント
             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);
                             audioElements[this.dataset.audio].volume = value * globalVolume;
                         }
+                    } catch (error) {
+                        handleError(error, '音声ボリューム設定中にエラーが発生しました');
                     }
                 });
             });
             // 全体音量スライダーのイベント
             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;
                             audioElements[file].volume = volume;
                         }
+                    });
+                } catch (error) {
+                    handleError(error, '全体音量設定中にエラーが発生しました');
+                }
             });
             // ループ設定変更時
             loopCheckbox.addEventListener('change', function() {
+                try {
+                    audioFiles.forEach(file => {
+                        if (audioElements[file]) {
+                            audioElements[file].loop = this.checked;
+                        }
+                    });
+                } catch (error) {
+                    handleError(error, 'ループ設定変更中にエラーが発生しました');
+                }
             });
+            // 現在の秒数を開始時間に設定
+            setStartTimeBtn.addEventListener('click', function() {
+                try {
+                    startTimeInput.value = video.currentTime.toFixed(1);
+                } catch (error) {
+                    handleError(error, '開始時間設定中にエラーが発生しました');
+                }
             });
+            // 現在の秒数を終了時間に設定
+            setEndTimeBtn.addEventListener('click', function() {
+                try {
+                    endTimeInput.value = video.currentTime.toFixed(1);
+                } catch (error) {
+                    handleError(error, '終了時間設定中にエラーが発生しました');
+                }
             });
             // 初期化
             updateVolumeIcon();
             volumeSlider.value = video.volume;
             video.controls = false;
         });
     </script>
 </body>