Spaces:

soiz1
/

sing-song-player-2uw9e28u

Running

App Files Files Community

soiz1 commited on Jul 1

Commit

e61a60b

1 Parent(s): 060d8a5

Update index.html

Browse files

Files changed (1) hide show

index.html +318 -375

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;
@@ -11,468 +11,411 @@
             color: #e6f1ff;
             margin: 0;
             padding: 20px;
         }
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-        }
         h1 {
             color: #64ffda;
             text-align: center;
             margin-bottom: 30px;
-            font-size: 2.5em;
         }
-        .player-section {
             display: flex;
-            flex-wrap: wrap;
-            gap: 20px;
-            margin-bottom: 30px;
         }
         .video-container {
-            flex: 1;
-            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;
-            text-align: center;
-            min-height: 100px;
             margin-bottom: 15px;
-            transition: all 0.3s;
-        }
-        .drop-box.highlight {
-            background-color: rgba(100, 255, 218, 0.1);
-            border-color: #ffffff;
         }
-        .sound-item {
-            background: #233554;
-            padding: 10px;
-            margin-bottom: 8px;
-            border-radius: 4px;
             display: flex;
-            justify-content: space-between;
             align-items: center;
         }
-        .sound-item button {
-            background: #ff5555;
-            border: none;
-            color: white;
-            border-radius: 4px;
-            padding: 5px 10px;
-            cursor: pointer;
-        }
-        .controls {
-            background: #112240;
-            border-radius: 8px;
-            padding: 20px;
-            margin-bottom: 20px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-        }
-        .control-group {
-            margin-bottom: 15px;
-        }
-        label {
-            display: block;
-            margin-bottom: 5px;
             color: #64ffda;
         }
-        input[type="range"], input[type="number"] {
-            width: 100%;
-            background: #233554;
-            border: none;
             height: 8px;
-            border-radius: 4px;
             outline: none;
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 16px;
-            height: 16px;
             background: #64ffda;
             border-radius: 50%;
             cursor: pointer;
         }
-        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;
-            top: -3px;
-            right: 0;
-            width: 8px;
-            height: 8px;
-            background: #64ffda;
-            border-radius: 50%;
-        }
-        .hidden {
-            display: none;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>音声合成プレイヤー</h1>
         <div class="tech-decoration"></div>
-        <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="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 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="control-group">
-                <label for="endTime">再生終了秒数 (秒)</label>
-                <input type="number" id="endTime" min="0" step="0.1">
             </div>
-            <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="volumeValue">1</span>
             </div>
-            <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>
     <script>
-        // 要素を取得
-        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;
-            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;
-            }
-            // 音声リストに追加
-            const soundItem = document.createElement('div');
-            soundItem.className = 'sound-item';
-            soundItem.innerHTML = `
-                ${filename}
-                <button data-filename="${filename}">削除</button>
-            `;
-            soundList.appendChild(soundItem);
-            // 削除ボタンのイベントリスナー
-            soundItem.querySelector('button').addEventListener('click', function() {
-                removeSound(filename);
-            });
-            // 音声ファイルを読み込む
-            loadSound(filename);
-        }
-        // 音声を削除
-        function removeSound(filename) {
-            // リストから削除
-            const items = document.querySelectorAll('.sound-item');
-            items.forEach(item => {
-                if (item.querySelector('button').dataset.filename === filename) {
-                    item.remove();
-                }
             });
-            // バッファから削除
-            delete audioBuffers[filename];
-        }
-        // 音声ファイルを読み込む
-        async function loadSound(filename) {
-            if (!audioContext) {
-                audioContext = new (window.AudioContext || window.webkitAudioContext)();
             }
-            try {
-                const response = await fetch(filename);
-                const arrayBuffer = await response.arrayBuffer();
-                const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-                audioBuffers[filename] = audioBuffer;
-                // 最初の音声が読み込まれたら動画の長さを設定
-                if (Object.keys(audioBuffers).length === 1) {
-                    videoDuration = audioBuffer.duration;
-                    endTimeInput.value = videoDuration.toFixed(1);
-                }
-            } catch (error) {
-                console.error('音声の読み込みに失敗しました:', error);
-                alert(`音声 ${filename} の読み込みに失敗しました`);
-                removeSound(filename);
-            }
-        }
-        // 動画のメタデータが読み込まれたら
-        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;
-            // バリデーション
-            if (startTime >= endTime) {
-                alert('終了時間は開始時間より大きくしてください');
-                return;
             }
-            if (Object.keys(audioBuffers).length === 0) {
-                alert('音声が追加されていません');
-                return;
             }
-            // 既存の音声ソースを停止
-            stopAllSounds();
-            // 動画を設定
-            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)();
             }
-            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));
-            }
-            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>
 </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;
             color: #e6f1ff;
             margin: 0;
             padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
         h1 {
             color: #64ffda;
             text-align: center;
             margin-bottom: 30px;
+            border-bottom: 1px solid #64ffda;
+            padding-bottom: 10px;
+            width: 100%;
         }
+        .container {
             display: flex;
+            flex-direction: column;
+            width: 100%;
+            max-width: 800px;
+            background-color: #112240;
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
         }
         .video-container {
+            position: relative;
+            width: 100%;
+            margin-bottom: 20px;
         }
         video {
             width: 100%;
+            border-radius: 5px;
+            background-color: #000;
         }
+        .controls {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            margin-bottom: 20px;
         }
+        .audio-controls {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
             margin-bottom: 15px;
         }
+        .audio-item {
             display: flex;
             align-items: center;
+            gap: 10px;
         }
+        .audio-item label {
+            min-width: 50px;
             color: #64ffda;
         }
+        input[type="range"] {
+            flex-grow: 1;
             height: 8px;
+            -webkit-appearance: none;
+            background: #1e2a47;
+            border-radius: 5px;
             outline: none;
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
+            width: 18px;
+            height: 18px;
             background: #64ffda;
             border-radius: 50%;
             cursor: pointer;
         }
+        .settings {
+            background-color: #1e2a47;
+            padding: 15px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        .setting-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
         }
+        .setting-item:last-child {
+            margin-bottom: 0;
+        }
+        .setting-item label {
+            color: #ccd6f6;
+        }
+        input[type="number"], input[type="checkbox"], select {
+            background-color: #112240;
+            border: 1px solid #64ffda;
+            color: #e6f1ff;
+            padding: 5px;
+            border-radius: 3px;
+        }
         button {
+            background-color: #0a192f;
+            color: #64ffda;
+            border: 1px solid #64ffda;
             padding: 10px 20px;
+            border-radius: 5px;
             cursor: pointer;
             font-weight: bold;
             transition: all 0.3s;
         }
         button:hover {
+            background-color: #64ffda;
+            color: #0a192f;
         }
+        .buttons {
             display: flex;
             gap: 10px;
+            justify-content: center;
         }
         .tech-decoration {
+            width: 100%;
             height: 2px;
+            background: linear-gradient(90deg, transparent, #64ffda, transparent);
             margin: 20px 0;
         }
     </style>
 </head>
 <body>
+    <h1>音声動画プレイヤー</h1>
     <div class="container">
+        <div class="video-container">
+            <video id="video" muted>
+                <source src="v.mp4" type="video/mp4">
+            </video>
+        </div>
         <div class="tech-decoration"></div>
+        <div class="settings">
+            <h2>設定</h2>
+            <div class="setting-item">
+                <label for="start-time">再生開始秒数:</label>
+                <input type="number" id="start-time" 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" value="0" step="0.1">
+            </div>
+            <div class="setting-item">
+                <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">
+                <span id="global-volume-value">1</span>
             </div>
         </div>
         <div class="tech-decoration"></div>
+        <div class="audio-controls">
+            <h2>音声コントロール</h2>
+            <div class="audio-item">
+                <label>p.mp3</label>
+                <input type="range" class="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="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="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="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="volume-slider" data-audio="k" min="0" max="1" step="0.01" value="1">
+                <span class="volume-value">1</span>
             </div>
         </div>
+        <div class="tech-decoration"></div>
+        <div class="buttons">
+            <button id="play-btn">再生</button>
+            <button id="pause-btn">一時停止</button>
+            <button id="stop-btn">停止</button>
+        </div>
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // 要素を取得
+            const video = document.getElementById('video');
+            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('.volume-slider');
+            const volumeValues = document.querySelectorAll('.volume-value');
+            // 音声オブジェクトを作成
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const audioBuffers = {};
+            const audioSources = {};
+            const gainNodes = {};
+            // 音声ファイル名の配列
+            const audioFiles = ['p', 'a', 't', 's', 'k'];
+            // 初期化
+            let videoDuration = 0;
+            let isPlaying = false;
+            // 動画のメタデータが読み込まれたら
+            video.addEventListener('loadedmetadata', function() {
+                videoDuration = video.duration;
+                endTimeInput.value = videoDuration.toFixed(1);
+                endTimeInput.max = videoDuration;
+                startTimeInput.max = videoDuration - 0.1;
             });
+            // 音声ファイルを読み込む
+            function loadAudioFiles() {
+                audioFiles.forEach(file => {
+                    fetch(`${file}.mp3`)
+                        .then(response => response.arrayBuffer())
+                        .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
+                        .then(audioBuffer => {
+                            audioBuffers[file] = audioBuffer;
+                            gainNodes[file] = audioContext.createGain();
+                            gainNodes[file].gain.value = 1;
+                        })
+                        .catch(error => console.error(`Error loading ${file}.mp3:`, error));
+                });
             }
+            // 再生関数
+            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;
+                // 音声を再生
+                audioFiles.forEach(file => {
+                    if (audioBuffers[file]) {
+                        // 既存のソースがあれば停止
+                        if (audioSources[file]) {
+                            audioSources[file].stop();
+                        }
+                        const source = audioContext.createBufferSource();
+                        source.buffer = audioBuffers[file];
+                        // ボリュームスライダーの値を取得
+                        const volumeSlider = document.querySelector(`.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;
+                // 終了時間に達したら停止
+                video.ontimeupdate = function() {
+                    if (video.currentTime >= endTime) {
+                        if (!loop) {
+                            stopMedia();
+                        } else {
+                            video.currentTime = startTime;
+                        }
+                    }
+                };
             }
+            // 一時停止関数
+            function pauseMedia() {
+                if (!isPlaying) return;
+                video.pause();
+                audioFiles.forEach(file => {
+                    if (audioSources[file]) {
+                        audioSources[file].stop();
+                        audioSources[file] = null;
+                    }
+                });
+                isPlaying = false;
             }
+            // 停止関数
+            function stopMedia() {
+                pauseMedia();
+                video.currentTime = parseFloat(startTimeInput.value) || 0;
             }
+            // イベントリスナーを設定
+            playBtn.addEventListener('click', playMedia);
+            pauseBtn.addEventListener('click', pauseMedia);
+            stopBtn.addEventListener('click', stopMedia);
+            // ボリュームスライダーのイベント
+            volumeSliders.forEach((slider, index) => {
+                slider.addEventListener('input', function() {
+                    const value = parseFloat(this.value);
+                    volumeValues[index].textContent = value.toFixed(2);
+                    if (isPlaying && audioSources[this.dataset.audio] && gainNodes[this.dataset.audio]) {
+                        const globalVolume = parseFloat(globalVolumeSlider.value);
+                        gainNodes[this.dataset.audio].gain.value = value * globalVolume;
+                    }
+                });
+            });
+            // 全体音量スライダーのイベント
+            globalVolumeSlider.addEventListener('input', function() {
+                const value = parseFloat(this.value);
+                globalVolumeValue.textContent = value.toFixed(1);
+                if (isPlaying) {
+                    audioFiles.forEach(file => {
+                        if (gainNodes[file]) {
+                            const volumeSlider = document.querySelector(`.volume-slider[data-audio="${file}"]`);
+                            const volume = parseFloat(volumeSlider.value) * value;
+                            gainNodes[file].gain.value = volume;
+                        }
+                    });
                 }
             });
+            // 初期化
+            loadAudioFiles();
         });
     </script>
 </body>