Update index.html

index.html

@@ -11,566 +11,467 @@
             color: #e6f1ff;
             margin: 0;
             padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
         }
-        
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+        }
         h1 {
             color: #64ffda;
             text-align: center;
             margin-bottom: 30px;
             font-size: 2.5em;
-            text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
         }
-        
-        .container {
+        .player-section {
             display: flex;
-            width: 100%;
-            max-width: 1200px;
+            flex-wrap: wrap;
             gap: 20px;
+            margin-bottom: 30px;
         }
-        
-        .left-panel, .right-panel {
+        .video-container {
             flex: 1;
-            background-color: #112240;
-            border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            min-width: 300px;
+            background: #112240;
+            border-radius: 8px;
+            padding: 15px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        }
+        video {
+            width: 100%;
+            border-radius: 4px;
+        }
+        .drop-area {
+            flex: 1;
+            min-width: 300px;
+            background: #112240;
+            border-radius: 8px;
+            padding: 15px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
         }
-        
         .drop-box {
             border: 2px dashed #64ffda;
             border-radius: 8px;
             padding: 20px;
-            min-height: 150px;
-            margin-bottom: 20px;
+            text-align: center;
+            min-height: 100px;
+            margin-bottom: 15px;
             transition: all 0.3s;
-            background-color: rgba(100, 255, 218, 0.05);
         }
-        
         .drop-box.highlight {
             background-color: rgba(100, 255, 218, 0.1);
-            border-color: #64ffda;
-            box-shadow: 0 0 15px rgba(100, 255, 218, 0.2);
-        }
-        
-        .sound-box {
-            display: inline-block;
-            background-color: #233554;
-            color: #e6f1ff;
-            padding: 8px 15px;
-            margin: 5px;
-            border-radius: 20px;
-            border: 1px solid #64ffda;
-            cursor: move;
-            user-select: none;
-            transition: all 0.2s;
+            border-color: #ffffff;
         }
-        
-        .sound-box:hover {
-            background-color: #1e2a47;
-            transform: translateY(-2px);
-        }
-        
-        .sound-box.selected {
-            background-color: #64ffda;
-            color: #0a192f;
-            font-weight: bold;
-        }
-        
-        .video-container {
-            position: relative;
-            width: 100%;
-            margin-bottom: 20px;
-        }
-        
-        video {
-            width: 100%;
-            border-radius: 8px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        }
-        
-        .controls {
+        .sound-item {
+            background: #233554;
+            padding: 10px;
+            margin-bottom: 8px;
+            border-radius: 4px;
             display: flex;
-            justify-content: center;
-            gap: 15px;
-            margin-bottom: 20px;
+            justify-content: space-between;
+            align-items: center;
         }
-        
-        button {
-            background-color: #233554;
-            color: #e6f1ff;
-            border: 1px solid #64ffda;
-            border-radius: 5px;
-            padding: 10px 20px;
+        .sound-item button {
+            background: #ff5555;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            padding: 5px 10px;
             cursor: pointer;
-            transition: all 0.3s;
-            font-size: 1em;
-        }
-        
-        button:hover {
-            background-color: #64ffda;
-            color: #0a192f;
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(100, 255, 218, 0.3);
         }
-        
-        .settings {
-            background-color: #112240;
-            border-radius: 10px;
+        .controls {
+            background: #112240;
+            border-radius: 8px;
             padding: 20px;
-            margin-top: 20px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-            width: 100%;
-            max-width: 1200px;
-        }
-        
-        .settings h2 {
-            color: #64ffda;
-            margin-top: 0;
-            border-bottom: 1px solid #233554;
-            padding-bottom: 10px;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
         }
-        
-        .setting-group {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 20px;
+        .control-group {
             margin-bottom: 15px;
         }
-        
-        .setting-item {
-            flex: 1;
-            min-width: 200px;
-        }
-        
         label {
             display: block;
             margin-bottom: 5px;
-            color: #ccd6f6;
+            color: #64ffda;
         }
-        
         input[type="range"], input[type="number"] {
             width: 100%;
-            background-color: #233554;
-            border: 1px solid #1e2a47;
-            border-radius: 5px;
-            padding: 8px;
-            color: #e6f1ff;
-        }
-        
-        input[type="range"] {
-            -webkit-appearance: none;
-            height: 5px;
             background: #233554;
-            border-radius: 5px;
+            border: none;
+            height: 8px;
+            border-radius: 4px;
+            outline: none;
         }
-        
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 15px;
-            height: 15px;
+            width: 16px;
+            height: 16px;
             background: #64ffda;
             border-radius: 50%;
             cursor: pointer;
         }
-        
-        .status {
-            margin-top: 20px;
-            padding: 10px;
-            background-color: rgba(100, 255, 218, 0.1);
-            border-left: 3px solid #64ffda;
-            border-radius: 0 5px 5px 0;
+        input[type="number"] {
+            padding: 8px;
+            height: auto;
+            border-radius: 4px;
+            background: #233554;
+            border: 1px solid #405676;
+            color: white;
+        }
+        button {
+            background: #64ffda;
+            color: #0a192f;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background: #52e3c2;
+            transform: translateY(-2px);
+        }
+        .button-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
         }
-        
         .tech-decoration {
+            height: 2px;
+            background: linear-gradient(90deg, #64ffda, #0a192f);
+            margin: 20px 0;
+            position: relative;
+        }
+        .tech-decoration::after {
+            content: "";
             position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-            z-index: -1;
-            opacity: 0.1;
-            background: 
-                linear-gradient(90deg, #112240 1px, transparent 1px) 0 0 / 20px 20px,
-                linear-gradient(#112240 1px, transparent 1px) 0 0 / 20px 20px;
+            top: -3px;
+            right: 0;
+            width: 8px;
+            height: 8px;
+            background: #64ffda;
+            border-radius: 50%;
+        }
+        .hidden {
+            display: none;
         }
     </style>
 </head>
 <body>
-    <div class="tech-decoration"></div>
-    <h1>音声合成プレイヤー</h1>
-    
     <div class="container">
-        <div class="left-panel">
-            <h2>音声アセット</h2>
-            <div id="sound-assets">
-                <div class="sound-box" draggable="true" data-sound="p.mp3">p.mp3</div>
-                <div class="sound-box" draggable="true" data-sound="a.mp3">a.mp3</div>
-                <div class="sound-box" draggable="true" data-sound="t.mp3">t.mp3</div>
-                <div class="sound-box" draggable="true" data-sound="s.mp3">s.mp3</div>
-            </div>
-            
-            <h2>ドロップボックス</h2>
-            <div id="drop-box" class="drop-box">
-                <p>音声ファイルをここにドラッグしてください</p>
-            </div>
-        </div>
+        <h1>音声合成プレイヤー</h1>
+        
+        <div class="tech-decoration"></div>
         
-        <div class="right-panel">
-            <h2>プレビュー</h2>
+        <div class="player-section">
             <div class="video-container">
+                <h2>動画プレビュー</h2>
                 <video id="video" controls>
                     <source src="v.mp4" type="video/mp4">
-                    お使いのブラウザはビデオタグをサポートしていません。
+                    お使いのブラウザは動画をサポートしていません。
                 </video>
             </div>
             
-            <div class="controls">
-                <button id="play-btn">再生</button>
-                <button id="pause-btn">一時停止</button>
-                <button id="stop-btn">停止</button>
-                <button id="reset-btn">リセット</button>
-            </div>
-            
-            <div class="status" id="status">
-                準備ができました。音声をドロップボックスに追加してください。
+            <div class="drop-area">
+                <h2>音声ドロップエリア</h2>
+                <div class="drop-box" id="dropBox">
+                    <p>音声ファイルをここにドラッグ＆ドロップしてください</p>
+                    <p>(p.mp3, a.mp3, t.mp3, s.mp3)</p>
+                </div>
+                <div id="soundList"></div>
             </div>
         </div>
-    </div>
-    
-    <div class="settings">
-        <h2>設定</h2>
-        <div class="setting-group">
-            <div class="setting-item">
-                <label for="start-time">再生開始秒数 (秒)</label>
-                <input type="number" id="start-time" min="0" value="0" step="0.1">
+        
+        <div class="tech-decoration"></div>
+        
+        <div class="controls">
+            <h2>設定メニュー</h2>
+            
+            <div class="control-group">
+                <label for="startTime">再生開始秒数 (秒)</label>
+                <input type="number" id="startTime" min="0" value="0" step="0.1">
             </div>
-            <div class="setting-item">
-                <label for="end-time">再生終了秒数 (秒)</label>
-                <input type="number" id="end-time" min="0" step="0.1">
+            
+            <div class="control-group">
+                <label for="endTime">再生終了秒数 (秒)</label>
+                <input type="number" id="endTime" min="0" step="0.1">
             </div>
-        </div>
-        
-        <div class="setting-group">
-            <div class="setting-item">
+            
+            <div class="control-group">
                 <label for="volume">音量 (0-3)</label>
                 <input type="range" id="volume" min="0" max="3" step="0.1" value="1">
-                <span id="volume-value">1</span>
+                <span id="volumeValue">1</span>
             </div>
-            <div class="setting-item">
-                <label for="playback-rate">再生速度 (0.5-2)</label>
-                <input type="range" id="playback-rate" min="0.5" max="2" step="0.1" value="1">
-                <span id="playback-rate-value">1</span>
+            
+            <div class="control-group">
+                <label for="playbackRate">再生速度 (0.5-2)</label>
+                <input type="range" id="playbackRate" min="0.5" max="2" step="0.1" value="1">
+                <span id="playbackRateValue">1</span>
+            </div>
+            
+            <div class="control-group">
+                <label>
+                    <input type="checkbox" id="loopCheckbox">
+                    ループ再生
+                </label>
+            </div>
+            
+            <div class="button-group">
+                <button id="playButton">再生</button>
+                <button id="pauseButton">一時停止</button>
+                <button id="stopButton">停止</button>
             </div>
-        </div>
-        
-        <div class="setting-item">
-            <label>
-                <input type="checkbox" id="loop-checkbox">
-                ループ再生
-            </label>
         </div>
     </div>
-    
+
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // 要素を取得
-            const soundAssets = document.getElementById('sound-assets');
-            const dropBox = document.getElementById('drop-box');
-            const video = document.getElementById('video');
-            const playBtn = document.getElementById('play-btn');
-            const pauseBtn = document.getElementById('pause-btn');
-            const stopBtn = document.getElementById('stop-btn');
-            const resetBtn = document.getElementById('reset-btn');
-            const statusDiv = document.getElementById('status');
+        // 要素を取得
+        const dropBox = document.getElementById('dropBox');
+        const soundList = document.getElementById('soundList');
+        const video = document.getElementById('video');
+        const startTimeInput = document.getElementById('startTime');
+        const endTimeInput = document.getElementById('endTime');
+        const volumeInput = document.getElementById('volume');
+        const volumeValue = document.getElementById('volumeValue');
+        const playbackRateInput = document.getElementById('playbackRate');
+        const playbackRateValue = document.getElementById('playbackRateValue');
+        const loopCheckbox = document.getElementById('loopCheckbox');
+        const playButton = document.getElementById('playButton');
+        const pauseButton = document.getElementById('pauseButton');
+        const stopButton = document.getElementById('stopButton');
+        
+        // 音声オブジェクトを保持する配列
+        let audioContext;
+        let audioBuffers = {};
+        let soundSources = [];
+        let videoDuration = 0;
+        
+        // 許可された音声ファイル
+        const allowedSounds = ['p.mp3', 'a.mp3', 't.mp3', 's.mp3'];
+        
+        // ドラッグ＆ドロップのイベントハンドラ
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropBox.addEventListener(eventName, preventDefaults, false);
+        });
+        
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropBox.addEventListener(eventName, highlight, false);
+        });
+        
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropBox.addEventListener(eventName, unhighlight, false);
+        });
+        
+        function highlight() {
+            dropBox.classList.add('highlight');
+        }
+        
+        function unhighlight() {
+            dropBox.classList.remove('highlight');
+        }
+        
+        dropBox.addEventListener('drop', handleDrop, false);
+        
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
             
-            // 設定要素
-            const startTimeInput = document.getElementById('start-time');
-            const endTimeInput = document.getElementById('end-time');
-            const volumeInput = document.getElementById('volume');
-            const volumeValue = document.getElementById('volume-value');
-            const playbackRateInput = document.getElementById('playback-rate');
-            const playbackRateValue = document.getElementById('playback-rate-value');
-            const loopCheckbox = document.getElementById('loop-checkbox');
+            handleFiles(files);
+        }
+        
+        function handleFiles(files) {
+            [...files].forEach(file => {
+                if (allowedSounds.includes(file.name)) {
+                    addSound(file.name);
+                }
+            });
+        }
+        
+        // 音声を追加
+        function addSound(filename) {
+            // すでに追加済みかチェック
+            if (audioBuffers[filename]) {
+                alert(`${filename} は既に追加されています`);
+                return;
+            }
             
-            // 音声コンテキストとノード
-            let audioContext;
-            let audioBuffers = {};
-            let soundSources = [];
-            let videoDuration = 0;
+            // 音声リストに追加
+            const soundItem = document.createElement('div');
+            soundItem.className = 'sound-item';
+            soundItem.innerHTML = `
+                ${filename}
+                <button data-filename="${filename}">削除</button>
+            `;
+            soundList.appendChild(soundItem);
             
-            // 初期化
-            init();
+            // 削除ボタンのイベントリスナー
+            soundItem.querySelector('button').addEventListener('click', function() {
+                removeSound(filename);
+            });
             
-            async function init() {
-                try {
-                    // 動画の長さを取得
-                    video.addEventListener('loadedmetadata', function() {
-                        videoDuration = video.duration;
-                        endTimeInput.value = videoDuration.toFixed(1);
-                        endTimeInput.max = videoDuration;
-                    });
-                    
-                    // 音声コンテキストを初期化
-                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                    
-                    // 既存の音声アセットを事前ロード
-                    const soundElements = soundAssets.querySelectorAll('.sound-box');
-                    for (const element of soundElements) {
-                        const soundFile = element.getAttribute('data-sound');
-                        await loadSound(soundFile);
-                    }
-                    
-                    // イベントリスナーを設定
-                    setupEventListeners();
-                    
-                    statusDiv.textContent = "準備ができました。音声をドロップボックスに追加してください。";
-                } catch (error) {
-                    console.error("初期化エラー:", error);
-                    statusDiv.textContent = "初期化中にエラーが発生しました: " + error.message;
+            // 音声ファイルを読み込む
+            loadSound(filename);
+        }
+        
+        // 音声を削除
+        function removeSound(filename) {
+            // リストから削除
+            const items = document.querySelectorAll('.sound-item');
+            items.forEach(item => {
+                if (item.querySelector('button').dataset.filename === filename) {
+                    item.remove();
                 }
-            }
+            });
             
-            function setupEventListeners() {
-                // ドラッグ&ドロップイベント
-                dropBox.addEventListener('dragover', function(e) {
-                    e.preventDefault();
-                    dropBox.classList.add('highlight');
-                });
-                
-                dropBox.addEventListener('dragleave', function() {
-                    dropBox.classList.remove('highlight');
-                });
-                
-                dropBox.addEventListener('drop', function(e) {
-                    e.preventDefault();
-                    dropBox.classList.remove('highlight');
-                    
-                    const soundFile = e.dataTransfer.getData('text/plain');
-                    if (soundFile && soundFile.endsWith('.mp3')) {
-                        addSoundToDropBox(soundFile);
-                    }
-                });
-                
-                // 音声アセットのドラッグ開始
-                soundAssets.querySelectorAll('.sound-box').forEach(box => {
-                    box.addEventListener('dragstart', function(e) {
-                        e.dataTransfer.setData('text/plain', this.getAttribute('data-sound'));
-                    });
-                });
-                
-                // コントロールボタン
-                playBtn.addEventListener('click', playAll);
-                pauseBtn.addEventListener('click', pauseAll);
-                stopBtn.addEventListener('click', stopAll);
-                resetBtn.addEventListener('click', resetAll);
-                
-                // 設定変更イベント
-                volumeInput.addEventListener('input', function() {
-                    volumeValue.textContent = this.value;
-                });
-                
-                playbackRateInput.addEventListener('input', function() {
-                    playbackRateValue.textContent = this.value;
-                    video.playbackRate = this.value;
-                });
-                
-                // 動画のループ処理
-                video.addEventListener('timeupdate', function() {
-                    const startTime = parseFloat(startTimeInput.value) || 0;
-                    const endTime = parseFloat(endTimeInput.value) || videoDuration;
-                    
-                    if (loopCheckbox.checked && video.currentTime >= endTime) {
-                        video.currentTime = startTime;
-                        restartAudio(startTime);
-                    }
-                });
+            // バッファから削除
+            delete audioBuffers[filename];
+        }
+        
+        // 音声ファイルを読み込む
+        async function loadSound(filename) {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
             }
             
-            async function loadSound(soundFile) {
-                if (audioBuffers[soundFile]) return; // 既にロード済み
+            try {
+                const response = await fetch(filename);
+                const arrayBuffer = await response.arrayBuffer();
+                const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+                audioBuffers[filename] = audioBuffer;
                 
-                try {
-                    const response = await fetch(soundFile);
-                    const arrayBuffer = await response.arrayBuffer();
-                    audioBuffers[soundFile] = await audioContext.decodeAudioData(arrayBuffer);
-                } catch (error) {
-                    console.error(`音声ファイルのロードエラー (${soundFile}):`, error);
-                    throw error;
+                // 最初の音声が読み込まれたら動画の長さを設定
+                if (Object.keys(audioBuffers).length === 1) {
+                    videoDuration = audioBuffer.duration;
+                    endTimeInput.value = videoDuration.toFixed(1);
                 }
+            } catch (error) {
+                console.error('音声の読み込みに失敗しました:', error);
+                alert(`音声 ${filename} の読み込みに失敗しました`);
+                removeSound(filename);
             }
-            
-            function addSoundToDropBox(soundFile) {
-                // 既に追加されているかチェック
-                if (dropBox.querySelector(`.sound-box[data-sound="${soundFile}"]`)) {
-                    statusDiv.textContent = `"${soundFile}" は既に追加されています。`;
-                    return;
-                }
-                
-                // 新しい音声ボックスを作成
-                const soundBox = document.createElement('div');
-                soundBox.className = 'sound-box';
-                soundBox.setAttribute('data-sound', soundFile);
-                soundBox.textContent = soundFile;
-                soundBox.draggable = true;
-                
-                // ドラッグ開始イベント
-                soundBox.addEventListener('dragstart', function(e) {
-                    e.dataTransfer.setData('text/plain', this.getAttribute('data-sound'));
-                    e.dataTransfer.effectAllowed = 'move';
-                });
-                
-                // ドロップボックス内で���ドラッグオーバー
-                soundBox.addEventListener('dragover', function(e) {
-                    e.preventDefault();
-                    e.dataTransfer.dropEffect = 'move';
-                });
-                
-                // ドロップボックス内でのドロップ（並べ替え）
-                soundBox.addEventListener('drop', function(e) {
-                    e.preventDefault();
-                    const draggedSound = e.dataTransfer.getData('text/plain');
-                    const draggedElement = dropBox.querySelector(`.sound-box[data-sound="${draggedSound}"]`);
-                    
-                    if (draggedElement && draggedElement !== this) {
-                        const dropY = e.clientY;
-                        const thisY = this.getBoundingClientRect().top;
-                        
-                        if (dropY < thisY) {
-                            dropBox.insertBefore(draggedElement, this);
-                        } else {
-                            dropBox.insertBefore(draggedElement, this.nextSibling);
-                        }
-                    }
-                });
-                
-                // ダブルクリックで削除
-                soundBox.addEventListener('dblclick', function() {
-                    this.remove();
-                    statusDiv.textContent = `"${soundFile}" を削除しました。`;
-                });
-                
-                dropBox.appendChild(soundBox);
-                statusDiv.textContent = `"${soundFile}" を追加しました。`;
+        }
+        
+        // 動画のメタデータが読み込まれたら
+        video.addEventListener('loadedmetadata', function() {
+            if (video.duration !== Infinity) {
+                videoDuration = video.duration;
+                endTimeInput.value = videoDuration.toFixed(1);
             }
+            video.muted = true; // 動画の音声をミュート
+        });
+        
+        // 音量スライダーの値を表示
+        volumeInput.addEventListener('input', function() {
+            volumeValue.textContent = this.value;
+        });
+        
+        // 再生速度スライダーの値を表示
+        playbackRateInput.addEventListener('input', function() {
+            playbackRateValue.textContent = this.value;
+        });
+        
+        // 再生ボタン
+        playButton.addEventListener('click', function() {
+            const startTime = parseFloat(startTimeInput.value);
+            const endTime = parseFloat(endTimeInput.value);
+            const volume = parseFloat(volumeInput.value);
+            const playbackRate = parseFloat(playbackRateInput.value);
+            const loop = loopCheckbox.checked;
             
-            function playAll() {
-                const startTime = parseFloat(startTimeInput.value) || 0;
-                const endTime = parseFloat(endTimeInput.value) || videoDuration;
-                const volume = parseFloat(volumeInput.value) || 1;
-                const playbackRate = parseFloat(playbackRateInput.value) || 1;
-                
-                // 動画を再生
-                video.currentTime = startTime;
-                video.playbackRate = playbackRate;
-                video.play().catch(e => console.error("動画再生エラー:", e));
-                
-                // 音声を再生
-                stopAudio(); // 既存の音声を停止
-                
-                const soundBoxes = dropBox.querySelectorAll('.sound-box');
-                if (soundBoxes.length === 0) {
-                    statusDiv.textContent = "再生中 (音声なし)";
-                    return;
-                }
-                
-                let playTime = audioContext.currentTime;
-                
-                soundBoxes.forEach(box => {
-                    const soundFile = box.getAttribute('data-sound');
-                    const audioBuffer = audioBuffers[soundFile];
-                    
-                    if (audioBuffer) {
-                        const source = audioContext.createBufferSource();
-                        const gainNode = audioContext.createGain();
-                        
-                        source.buffer = audioBuffer;
-                        source.playbackRate.value = playbackRate;
-                        gainNode.gain.value = volume;
-                        
-                        source.connect(gainNode);
-                        gainNode.connect(audioContext.destination);
-                        
-                        source.start(playTime, startTime, endTime - startTime);
-                        
-                        soundSources.push({
-                            source: source,
-                            gain: gainNode
-                        });
-                    }
-                });
-                
-                statusDiv.textContent = `再生中 (${startTime.toFixed(1)}秒～${endTime.toFixed(1)}秒)`;
+            // バリデーション
+            if (startTime >= endTime) {
+                alert('終了時間は開始時間より大きくしてください');
+                return;
             }
             
-            function pauseAll() {
-                video.pause();
-                statusDiv.textContent = "一時停止中";
+            if (Object.keys(audioBuffers).length === 0) {
+                alert('音声が追加されていません');
+                return;
             }
             
-            function stopAll() {
-                video.pause();
-                video.currentTime = parseFloat(startTimeInput.value) || 0;
-                stopAudio();
-                statusDiv.textContent = "停止中";
-            }
+            // 既存の音声ソースを停止
+            stopAllSounds();
             
-            function resetAll() {
-                video.pause();
-                video.currentTime = 0;
-                stopAudio();
-                statusDiv.textContent = "リセットしました";
+            // 動画を設定
+            video.currentTime = startTime;
+            video.playbackRate = playbackRate;
+            video.play();
+            
+            // 各音声を再生
+            for (const filename in audioBuffers) {
+                playSound(filename, startTime, endTime, volume, playbackRate, loop);
+            }
+        });
+        
+        // 音声を再生
+        function playSound(filename, startTime, endTime, volume, playbackRate, loop) {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
             }
             
-            function stopAudio() {
-                soundSources.forEach(source => {
-                    try {
-                        source.source.stop();
-                    } catch (e) {
-                        console.error("音声停止エラー:", e);
-                    }
-                });
-                soundSources = [];
+            const source = audioContext.createBufferSource();
+            source.buffer = audioBuffers[filename];
+            source.playbackRate.value = playbackRate;
+            
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = volume;
+            
+            source.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            
+            source.start(0, startTime % audioBuffers[filename].duration);
+            
+            if (loop) {
+                source.loop = true;
+                source.loopStart = startTime % audioBuffers[filename].duration;
+                source.loopEnd = endTime % audioBuffers[filename].duration;
+            } else {
+                source.stop(audioContext.currentTime + (endTime - startTime));
             }
             
-            function restartAudio(startTime) {
-                if (soundSources.length === 0) return;
-                
-                stopAudio();
-                
-                const volume = parseFloat(volumeInput.value) || 1;
-                const playbackRate = parseFloat(playbackRateInput.value) || 1;
-                const endTime = parseFloat(endTimeInput.value) || videoDuration;
-                
-                let playTime = audioContext.currentTime;
-                
-                const soundBoxes = dropBox.querySelectorAll('.sound-box');
-                soundBoxes.forEach(box => {
-                    const soundFile = box.getAttribute('data-sound');
-                    const audioBuffer = audioBuffers[soundFile];
-                    
-                    if (audioBuffer) {
-                        const source = audioContext.createBufferSource();
-                        const gainNode = audioContext.createGain();
-                        
-                        source.buffer = audioBuffer;
-                        source.playbackRate.value = playbackRate;
-                        gainNode.gain.value = volume;
-                        
-                        source.connect(gainNode);
-                        gainNode.connect(audioContext.destination);
-                        
-                        source.start(playTime, startTime, endTime - startTime);
-                        
-                        soundSources.push({
-                            source: source,
-                            gain: gainNode
-                        });
-                    }
-                });
+            soundSources.push(source);
+        }
+        
+        // 一時停止ボタン
+        pauseButton.addEventListener('click', function() {
+            video.pause();
+            stopAllSounds();
+        });
+        
+        // 停止ボタン
+        stopButton.addEventListener('click', function() {
+            video.pause();
+            video.currentTime = parseFloat(startTimeInput.value);
+            stopAllSounds();
+        });
+        
+        // 全ての音声を停止
+        function stopAllSounds() {
+            soundSources.forEach(source => {
+                try {
+                    source.stop();
+                } catch (e) {
+                    console.log('音声ソースは既に停止しています');
+                }
+            });
+            soundSources = [];
+        }
+        
+        // 動画の再生位置が終了時間を超えたら停止
+        video.addEventListener('timeupdate', function() {
+            const endTime = parseFloat(endTimeInput.value);
+            const loop = loopCheckbox.checked;
+            
+            if (!loop && video.currentTime >= endTime) {
+                video.pause();
+                stopAllSounds();
+            } else if (loop && video.currentTime >= endTime) {
+                video.currentTime = parseFloat(startTimeInput.value);
             }
         });
     </script>