Spaces:

soiz1
/

sing-song-player-2uw9e28u

Running

App Files Files Community

soiz1 commited on Jul 1

Commit

687452b

1 Parent(s): 60ca6fc

Update index.html

Browse files

Files changed (1) hide show

index.html +295 -247

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>音声動画プレイヤー</title>
     <style>
         body {
             font-family: 'Arial', sans-serif;
@@ -50,7 +50,7 @@
         }
         .video-controls {
-            background-color: rgba(0, 0, 0, 0.7);
             padding: 10px;
             border-radius: 0 0 5px 5px;
             display: flex;
@@ -78,34 +78,35 @@
         .progress-time {
             position: absolute;
             top: -25px;
-            background-color: rgba(0, 0, 0, 0.8);
-            padding: 2px 5px;
             border-radius: 3px;
             font-size: 12px;
             display: none;
         }
-        .controls-row {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .left-controls, .right-controls {
             display: flex;
             align-items: center;
-            gap: 10px;
         }
         .control-button {
             background: none;
             border: none;
             color: #e6f1ff;
-            font-size: 16px;
             cursor: pointer;
             padding: 5px;
-            border-radius: 3px;
-            transition: all 0.2s;
         }
         .control-button:hover {
@@ -114,29 +115,40 @@
         .time-display {
             font-size: 14px;
-            color: #e6f1ff;
-            font-family: monospace;
         }
         .volume-control {
             display: flex;
             align-items: center;
             gap: 5px;
         }
         .volume-slider {
             width: 80px;
-            height: 5px;
             -webkit-appearance: none;
             background: #1e2a47;
-            border-radius: 5px;
             outline: none;
             opacity: 0;
-            transition: opacity 0.2s;
         }
         .volume-control:hover .volume-slider {
             opacity: 1;
         }
         .volume-slider::-webkit-slider-thumb {
@@ -148,6 +160,50 @@
             cursor: pointer;
         }
         .audio-controls {
             display: flex;
             flex-direction: column;
@@ -166,7 +222,7 @@
             color: #64ffda;
         }
-        .audio-volume-slider {
             flex-grow: 1;
             height: 8px;
             -webkit-appearance: none;
@@ -175,7 +231,7 @@
             outline: none;
         }
-        .audio-volume-slider::-webkit-slider-thumb {
             -webkit-appearance: none;
             width: 18px;
             height: 18px;
@@ -226,37 +282,10 @@
             background: linear-gradient(90deg, transparent, #64ffda, transparent);
             margin: 20px 0;
         }
-        .fullscreen {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: black;
-            z-index: 1000;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        .fullscreen video {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: 100%;
-        }
-        .fullscreen .video-container {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: 100%;
-        }
     </style>
 </head>
 <body>
-    <h1>音声動画プレイヤー</h1>
     <div class="container">
         <div class="video-container">
@@ -268,18 +297,27 @@
                     <div class="progress-bar" id="progress-bar"></div>
                     <div class="progress-time" id="progress-time">00:00</div>
                 </div>
-                <div class="controls-row">
-                    <div class="left-controls">
-                        <button class="control-button" id="play-pause-btn">▶</button>
-                        <span class="time-display" id="time-display">00:00 / 00:00</span>
                     </div>
-                    <div class="right-controls">
-                        <div class="volume-control">
-                            <button class="control-button" id="volume-btn">🔊</button>
-                            <input type="range" class="volume-slider" id="video-volume" min="0" max="1" step="0.01" value="1">
                         </div>
-                        <button class="control-button" id="fullscreen-btn">⛶</button>
                     </div>
                 </div>
             </div>
         </div>
@@ -300,19 +338,6 @@
                 <label for="loop">ループ再生:</label>
                 <input type="checkbox" id="loop">
             </div>
-            <div class="setting-item">
-                <label for="playback-rate">再生速度:</label>
-                <select id="playback-rate">
-                    <option value="0.25">0.25x</option>
-                    <option value="0.5">0.5x</option>
-                    <option value="0.75">0.75x</option>
-                    <option value="1" selected>1x</option>
-                    <option value="1.25">1.25x</option>
-                    <option value="1.5">1.5x</option>
-                    <option value="2">2x</option>
-                    <option value="3">3x</option>
-                </select>
-            </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">
@@ -326,27 +351,27 @@
             <h2>音声コントロール</h2>
             <div class="audio-item">
                 <label>p.mp3</label>
-                <input type="range" class="audio-volume-slider" data-audio="p" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>a.mp3</label>
-                <input type="range" class="audio-volume-slider" data-audio="a" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>t.mp3</label>
-                <input type="range" class="audio-volume-slider" data-audio="t" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>s.mp3</label>
-                <input type="range" class="audio-volume-slider" data-audio="s" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
             <div class="audio-item">
                 <label>k.mp3</label>
-                <input type="range" class="audio-volume-slider" data-audio="k" min="0" max="1" step="0.01" value="1">
                 <span class="volume-value">1</span>
             </div>
         </div>
@@ -365,24 +390,24 @@
             // 要素を取得
             const video = document.getElementById('video');
             const playPauseBtn = document.getElementById('play-pause-btn');
-            const fullscreenBtn = document.getElementById('fullscreen-btn');
             const progressContainer = document.getElementById('progress-container');
             const progressBar = document.getElementById('progress-bar');
             const progressTime = document.getElementById('progress-time');
-            const timeDisplay = document.getElementById('time-display');
             const volumeBtn = document.getElementById('volume-btn');
-            const videoVolumeSlider = document.getElementById('video-volume');
             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');
-            const playbackRateSelect = document.getElementById('playback-rate');
             const globalVolumeSlider = document.getElementById('global-volume');
             const globalVolumeValue = document.getElementById('global-volume-value');
-            const volumeSliders = document.querySelectorAll('.audio-volume-slider');
             const volumeValues = document.querySelectorAll('.volume-value');
             // 音声オブジェクトを作成
@@ -397,7 +422,7 @@
             // 初期化
             let videoDuration = 0;
             let isPlaying = false;
-            let isFullscreen = false;
             let lastVolume = 1;
             // 動画のメタデータが読み込まれたら
@@ -412,19 +437,137 @@
             // 時間表示を更新
             function updateTimeDisplay() {
                 const currentTime = video.currentTime;
-                const duration = video.duration;
-                timeDisplay.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
-                progressBar.style.width = `${(currentTime / duration) * 100}%`;
             }
-            // 時間をフォーマット (00:00形式)
-            function formatTime(seconds) {
-                const mins = Math.floor(seconds / 60);
-                const secs = Math.floor(seconds % 60);
-                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
             }
             // 音声ファイルを読み込む
             function loadAudioFiles() {
                 audioFiles.forEach(file => {
@@ -440,22 +583,56 @@
                 });
             }
             // 再生関数
             function playMedia() {
-                if (isPlaying) return;
                 const startTime = parseFloat(startTimeInput.value) || 0;
                 let endTime = parseFloat(endTimeInput.value) || videoDuration;
-                const loop = loopCheckbox.checked;
-                const playbackRate = parseFloat(playbackRateSelect.value);
-                const globalVolume = parseFloat(globalVolumeSlider.value);
                 // 終了時間が動画の長さを超えないように
                 endTime = Math.min(endTime, videoDuration);
                 // 動画を設定
                 video.currentTime = startTime;
-                video.playbackRate = playbackRate;
                 video.muted = true;
                 // 音声を再生
@@ -465,49 +642,29 @@
                         if (audioSources[file]) {
                             audioSources[file].stop();
                         }
-                        const source = audioContext.createBufferSource();
-                        source.buffer = audioBuffers[file];
-                        // ボリュームスライダーの値を取得
-                        const volumeSlider = document.querySelector(`.audio-volume-slider[data-audio="${file}"]`);
-                        const volume = parseFloat(volumeSlider.value) * globalVolume;
-                        // ゲインノードを設定
-                        gainNodes[file].gain.value = volume;
-                        // 接続
-                        source.connect(gainNodes[file]);
-                        gainNodes[file].connect(audioContext.destination);
-                        // 再生
-                        source.start(0, startTime, endTime - startTime);
-                        // ループ設定
-                        source.loop = loop;
-                        if (loop) {
-                            source.loopStart = startTime;
-                            source.loopEnd = endTime;
-                        }
-                        audioSources[file] = source;
                     }
                 });
                 // 動画を再生
                 video.play();
                 isPlaying = true;
                 playPauseBtn.textContent = '⏸';
                 // 終了時間に達したら停止
                 video.ontimeupdate = function() {
-                    updateTimeDisplay();
                     if (video.currentTime >= endTime) {
-                        if (!loop) {
                             stopMedia();
                         } else {
                             video.currentTime = startTime;
                         }
                     }
                 };
@@ -526,131 +683,25 @@
                 });
                 isPlaying = false;
                 playPauseBtn.textContent = '▶';
             }
             // 停止関数
             function stopMedia() {
                 pauseMedia();
-                video.currentTime = parseFloat(startTimeInput.value) || 0;
                 updateTimeDisplay();
             }
-            // 再生/一時停止ボタンの切り替え
-            playPauseBtn.addEventListener('click', function() {
-                if (isPlaying) {
-                    pauseMedia();
-                } else {
-                    playMedia();
-                }
-            });
-            // プログレスバークリックでシーク
-            progressContainer.addEventListener('click', function(e) {
-                if (!videoDuration) return;
-                const rect = this.getBoundingClientRect();
-                const pos = (e.clientX - rect.left) / rect.width;
-                const seekTime = pos * videoDuration;
-                video.currentTime = seekTime;
-                if (!isPlaying) {
-                    updateTimeDisplay();
-                }
-            });
-            // プログレスバー上でマウス移動時に時間を表示
-            progressContainer.addEventListener('mousemove', function(e) {
-                if (!videoDuration) return;
-                const rect = this.getBoundingClientRect();
-                const pos = (e.clientX - rect.left) / rect.width;
-                const seekTime = pos * videoDuration;
-                progressTime.textContent = formatTime(seekTime);
-                progressTime.style.left = `${e.clientX - rect.left}px`;
-                progressTime.style.display = 'block';
-            });
-            progressContainer.addEventListener('mouseout', function() {
-                progressTime.style.display = 'none';
-            });
-            // ボリュームコントロール
-            volumeBtn.addEventListener('click', function() {
-                if (video.volume > 0) {
-                    lastVolume = video.volume;
-                    video.volume = 0;
-                    videoVolumeSlider.value = 0;
-                    volumeBtn.textContent = '🔇';
-                } else {
-                    video.volume = lastVolume;
-                    videoVolumeSlider.value = lastVolume;
-                    volumeBtn.textContent = lastVolume > 0.5 ? '🔊' : '🔉';
-                }
-            });
-            videoVolumeSlider.addEventListener('input', function() {
-                const volume = parseFloat(this.value);
-                video.volume = volume;
-                lastVolume = volume;
-                if (volume === 0) {
-                    volumeBtn.textContent = '🔇';
-                } else if (volume > 0.5) {
-                    volumeBtn.textContent = '🔊';
-                } else {
-                    volumeBtn.textContent = '🔉';
-                }
-            });
-            // フルスクリーン
-            fullscreenBtn.addEventListener('click', function() {
-                if (!isFullscreen) {
-                    enterFullscreen();
-                } else {
-                    exitFullscreen();
-                }
-            });
-            function enterFullscreen() {
-                const elem = video.parentElement;
-                if (elem.requestFullscreen) {
-                    elem.requestFullscreen();
-                } else if (elem.webkitRequestFullscreen) {
-                    elem.webkitRequestFullscreen();
-                } else if (elem.msRequestFullscreen) {
-                    elem.msRequestFullscreen();
-                }
-                isFullscreen = true;
-            }
-            function exitFullscreen() {
-                if (document.exitFullscreen) {
-                    document.exitFullscreen();
-                } else if (document.webkitExitFullscreen) {
-                    document.webkitExitFullscreen();
-                } else if (document.msExitFullscreen) {
-                    document.msExitFullscreen();
-                }
-                isFullscreen = false;
-            }
-            // フルスクリーン状態の変更を監視
-            document.addEventListener('fullscreenchange', handleFullscreenChange);
-            document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-            document.addEventListener('msfullscreenchange', handleFullscreenChange);
-            function handleFullscreenChange() {
-                isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
-            }
             // ボリュームスライダーのイベント
-            volumeSliders.forEach((slider, index) => {
                 slider.addEventListener('input', function() {
                     const value = parseFloat(this.value);
                     volumeValues[index].textContent = value.toFixed(2);
@@ -670,7 +721,7 @@
                 if (isPlaying) {
                     audioFiles.forEach(file => {
                         if (gainNodes[file]) {
-                            const volumeSlider = document.querySelector(`.audio-volume-slider[data-audio="${file}"]`);
                             const volume = parseFloat(volumeSlider.value) * value;
                             gainNodes[file].gain.value = volume;
                         }
@@ -678,13 +729,10 @@
                 }
             });
-            // 再生ボタン
-            playBtn.addEventListener('click', playMedia);
-            pauseBtn.addEventListener('click', pauseMedia);
-            stopBtn.addEventListener('click', stopMedia);
             // 初期化
             loadAudioFiles();
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>高度な音声動画プレイヤー</title>
     <style>
         body {
             font-family: 'Arial', sans-serif;
         }
         .video-controls {
+            background-color: rgba(17, 34, 64, 0.9);
             padding: 10px;
             border-radius: 0 0 5px 5px;
             display: flex;
         .progress-time {
             position: absolute;
             top: -25px;
+            transform: translateX(-50%);
+            background-color: rgba(30, 42, 71, 0.9);
+            padding: 3px 6px;
             border-radius: 3px;
             font-size: 12px;
             display: none;
+            white-space: nowrap;
         }
+        .main-controls {
             display: flex;
             align-items: center;
+            gap: 15px;
         }
         .control-button {
             background: none;
             border: none;
             color: #e6f1ff;
+            font-size: 18px;
             cursor: pointer;
             padding: 5px;
+            border-radius: 50%;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.3s;
         }
         .control-button:hover {
         .time-display {
             font-size: 14px;
+            color: #ccd6f6;
+            white-space: nowrap;
         }
         .volume-control {
             display: flex;
             align-items: center;
             gap: 5px;
+            margin-left: auto;
+        }
+        .volume-button {
+            background: none;
+            border: none;
+            color: #e6f1ff;
+            font-size: 18px;
+            cursor: pointer;
+            padding: 5px;
         }
         .volume-slider {
             width: 80px;
+            height: 6px;
             -webkit-appearance: none;
             background: #1e2a47;
+            border-radius: 3px;
             outline: none;
             opacity: 0;
+            transition: opacity 0.3s, width 0.3s;
         }
         .volume-control:hover .volume-slider {
             opacity: 1;
+            width: 100px;
         }
         .volume-slider::-webkit-slider-thumb {
             cursor: pointer;
         }
+        .speed-control {
+            position: relative;
+        }
+        .speed-button {
+            background: none;
+            border: none;
+            color: #e6f1ff;
+            font-size: 14px;
+            cursor: pointer;
+            padding: 5px 10px;
+            border-radius: 3px;
+        }
+        .speed-options {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            background-color: #1e2a47;
+            border-radius: 5px;
+            padding: 5px 0;
+            display: none;
+            min-width: 80px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        }
+        .speed-options.show {
+            display: block;
+        }
+        .speed-option {
+            padding: 5px 10px;
+            cursor: pointer;
+            text-align: center;
+        }
+        .speed-option:hover {
+            background-color: rgba(100, 255, 218, 0.2);
+        }
+        .fullscreen-button {
+            margin-left: 10px;
+        }
         .audio-controls {
             display: flex;
             flex-direction: column;
             color: #64ffda;
         }
+        .audio-slider {
             flex-grow: 1;
             height: 8px;
             -webkit-appearance: none;
             outline: none;
         }
+        .audio-slider::-webkit-slider-thumb {
             -webkit-appearance: none;
             width: 18px;
             height: 18px;
             background: linear-gradient(90deg, transparent, #64ffda, transparent);
             margin: 20px 0;
         }
     </style>
 </head>
 <body>
+    <h1>高度な音声動画プレイヤー</h1>
     <div class="container">
         <div class="video-container">
                     <div class="progress-bar" id="progress-bar"></div>
                     <div class="progress-time" id="progress-time">00:00</div>
                 </div>
+                <div class="main-controls">
+                    <button class="control-button" id="play-pause-btn">▶</button>
+                    <div class="time-display" id="time-display">00:00 / 00:00</div>
+                    <div class="volume-control">
+                        <button class="volume-button" id="volume-btn">🔊</button>
+                        <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="1">
                     </div>
+                    <div class="speed-control">
+                        <button class="speed-button" id="speed-btn">1x</button>
+                        <div class="speed-options" id="speed-options">
+                            <div class="speed-option" data-speed="0.25">0.25x</div>
+                            <div class="speed-option" data-speed="0.5">0.5x</div>
+                            <div class="speed-option" data-speed="0.75">0.75x</div>
+                            <div class="speed-option" data-speed="1">1x</div>
+                            <div class="speed-option" data-speed="1.25">1.25x</div>
+                            <div class="speed-option" data-speed="1.5">1.5x</div>
+                            <div class="speed-option" data-speed="2">2x</div>
+                            <div class="speed-option" data-speed="3">3x</div>
                         </div>
                     </div>
+                    <button class="control-button fullscreen-button" id="fullscreen-btn">⛶</button>
                 </div>
             </div>
         </div>
                 <label for="loop">ループ再生:</label>
                 <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">
             <h2>音声コントロール</h2>
             <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>
             </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>
             </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>
             </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>
             </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>
             </div>
         </div>
             // 要素を取得
             const video = document.getElementById('video');
             const playPauseBtn = document.getElementById('play-pause-btn');
+            const timeDisplay = document.getElementById('time-display');
             const progressContainer = document.getElementById('progress-container');
             const progressBar = document.getElementById('progress-bar');
             const progressTime = document.getElementById('progress-time');
             const volumeBtn = document.getElementById('volume-btn');
+            const volumeSlider = document.getElementById('volume-slider');
+            const speedBtn = document.getElementById('speed-btn');
+            const speedOptions = document.getElementById('speed-options');
+            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');
             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');
             // 音声オブジェクトを作成
             // 初期化
             let videoDuration = 0;
             let isPlaying = false;
+            let isVideoPlaying = false;
             let lastVolume = 1;
             // 動画のメタデータが読み込まれたら
             // 時間表示を更新
             function updateTimeDisplay() {
                 const currentTime = video.currentTime;
+                const duration = video.duration || videoDuration;
+                const currentMinutes = Math.floor(currentTime / 60);
+                const currentSeconds = Math.floor(currentTime % 60);
+                const durationMinutes = Math.floor(duration / 60);
+                const durationSeconds = Math.floor(duration % 60);
+                timeDisplay.textContent =
+                    `${String(currentMinutes).padStart(2, '0')}:${String(currentSeconds).padStart(2, '0')} / ` +
+                    `${String(durationMinutes).padStart(2, '0')}:${String(durationSeconds).padStart(2, '0')}`;
+                // プログレスバーを更新
+                const progressPercent = (currentTime / duration) * 100;
+                progressBar.style.width = `${progressPercent}%`;
             }
+            // 動画の時間更新イベント
+            video.addEventListener('timeupdate', updateTimeDisplay);
+            // プログレスバークリックでシーク
+            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;
+                video.currentTime = seekTime;
+                // 音声も同期
+                audioFiles.forEach(file => {
+                    if (audioSources[file]) {
+                        audioSources[file].stop();
+                        playAudio(file, 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);
+                progressTime.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+                progressTime.style.display = 'block';
+                progressTime.style.left = `${pos * 100}%`;
+            });
+            progressContainer.addEventListener('mouseleave', function() {
+                progressTime.style.display = 'none';
+            });
+            // 再生/一時停止ボタン
+            playPauseBtn.addEventListener('click', function() {
+                if (isVideoPlaying) {
+                    pauseMedia();
+                } else {
+                    playMedia();
+                }
+            });
+            // 音量コントロール
+            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();
+            });
+            // 音量アイコンを更新
+            function updateVolumeIcon() {
+                if (video.volume === 0) {
+                    volumeBtn.textContent = '🔇';
+                } else if (video.volume < 0.5) {
+                    volumeBtn.textContent = '🔈';
+                } else {
+                    volumeBtn.textContent = '🔊';
+                }
             }
+            // 再生速度コントロール
+            speedBtn.addEventListener('click', function() {
+                speedOptions.classList.toggle('show');
+            });
+            // 再生速度オプション選択
+            document.querySelectorAll('.speed-option').forEach(option => {
+                option.addEventListener('click', function() {
+                    const speed = parseFloat(this.dataset.speed);
+                    video.playbackRate = speed;
+                    speedBtn.textContent = `${speed}x`;
+                    speedOptions.classList.remove('show');
+                    // 音声の再生速度も更新
+                    audioFiles.forEach(file => {
+                        if (audioSources[file]) {
+                            audioSources[file].playbackRate.value = speed;
+                        }
+                    });
+                });
+            });
+            // 全画面ボタン
+            fullscreenBtn.addEventListener('click', function() {
+                if (video.requestFullscreen) {
+                    video.requestFullscreen();
+                } else if (video.webkitRequestFullscreen) {
+                    video.webkitRequestFullscreen();
+                } else if (video.msRequestFullscreen) {
+                    video.msRequestFullscreen();
+                }
+            });
             // 音声ファイルを読み込む
             function loadAudioFiles() {
                 audioFiles.forEach(file => {
                 });
             }
+            // 音声を再生
+            function playAudio(file, startTime) {
+                if (!audioBuffers[file]) return;
+                const source = audioContext.createBufferSource();
+                source.buffer = audioBuffers[file];
+                // ボリュームスライダーの値を取得
+                const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
+                const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
+                // ゲインノードを設定
+                gainNodes[file].gain.value = volume;
+                // 接続
+                source.connect(gainNodes[file]);
+                gainNodes[file].connect(audioContext.destination);
+                // 再生
+                const currentTime = video.currentTime;
+                const duration = video.duration || videoDuration;
+                const endTime = parseFloat(endTimeInput.value) || duration;
+                const loop = loopCheckbox.checked;
+                source.start(0, currentTime, endTime - currentTime);
+                // ループ設定
+                source.loop = loop;
+                if (loop) {
+                    const start = parseFloat(startTimeInput.value) || 0;
+                    source.loopStart = start;
+                    source.loopEnd = endTime;
+                }
+                // 再生速度を同期
+                source.playbackRate.value = video.playbackRate;
+                audioSources[file] = source;
+            }
             // 再生関数
             function playMedia() {
                 const startTime = parseFloat(startTimeInput.value) || 0;
                 let endTime = parseFloat(endTimeInput.value) || videoDuration;
                 // 終了時間が動画の長さを超えないように
                 endTime = Math.min(endTime, videoDuration);
                 // 動画を設定
                 video.currentTime = startTime;
                 video.muted = true;
                 // 音声を再生
                         if (audioSources[file]) {
                             audioSources[file].stop();
                         }
+                        playAudio(file, startTime);
                     }
                 });
                 // 動画を再生
                 video.play();
                 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);
+                                }
+                            });
                         }
                     }
                 };
                 });
                 isPlaying = false;
+                isVideoPlaying = false;
                 playPauseBtn.textContent = '▶';
             }
             // 停止関数
             function stopMedia() {
                 pauseMedia();
+                const startTime = parseFloat(startTimeInput.value) || 0;
+                video.currentTime = startTime;
                 updateTimeDisplay();
             }
+            // イベントリスナーを設定
+            playBtn.addEventListener('click', playMedia);
+            pauseBtn.addEventListener('click', pauseMedia);
+            stopBtn.addEventListener('click', stopMedia);
             // ボリュームスライダーのイベント
+            audioSliders.forEach((slider, index) => {
                 slider.addEventListener('input', function() {
                     const value = parseFloat(this.value);
                     volumeValues[index].textContent = value.toFixed(2);
                 if (isPlaying) {
                     audioFiles.forEach(file => {
                         if (gainNodes[file]) {
+                            const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
                             const volume = parseFloat(volumeSlider.value) * value;
                             gainNodes[file].gain.value = volume;
                         }
                 }
             });
             // 初期化
             loadAudioFiles();
+            updateVolumeIcon();
+            volumeSlider.value = video.volume;
         });
     </script>
 </body>