이번엔 오디오플레이어 만들자 - Follow Up Deployment

index.html

@@ -790,70 +790,81 @@
 
     <!-- Enhanced Audio Player (Fixed at bottom) -->
     <div class="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-purple-700 to-primary shadow-2xl z-50 border-t border-white border-opacity-20">
-        <div class="max-w-7xl mx-auto px-4 py-2">
+        <div class="max-w-7xl mx-auto px-4 py-3">
             <div class="flex items-center">
                 <!-- Album Art -->
-                <div class="flex-shrink-0 h-14 w-14 rounded-lg overflow-hidden shadow-lg relative group">
-                    <img src="https://image.yes24.com/goods/112163395/XL" alt="Current book cover" class="h-full w-full object-cover">
+                <div class="flex-shrink-0 h-16 w-16 rounded-lg overflow-hidden shadow-lg relative group">
+                    <img src="https://image.yes24.com/goods/112163395/XL" alt="Current book cover" class="h-full w-full object-cover" id="currentBookCover">
                     <button class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                         <i class="fas fa-expand text-white text-lg"></i>
                     </button>
                 </div>
                 
                 <!-- Track Info -->
-                <div class="ml-3 flex-1 min-w-0">
+                <div class="ml-4 flex-1 min-w-0">
                     <div class="flex items-center justify-between">
                         <div class="truncate">
-                            <h3 class="text-sm font-medium text-white truncate">달러구트 꿈 백화점 1장 - 꿈 백화점에 오신 것을 환영합니다</h3>
-                            <p class="text-xs text-gray-200 truncate">이미예 | 7시간 12분 | 챕터 3/12</p>
+                            <h3 class="text-sm font-medium text-white truncate" id="currentTrackTitle">달러구트 꿈 백화점 1장 - 꿈 백화점에 오신 것을 환영합니다</h3>
+                            <p class="text-xs text-gray-200 truncate" id="currentBookInfo">이미예 | 7시간 12분 | 챕터 3/12</p>
                         </div>
                         <div class="flex items-center ml-2">
-                            <span class="text-xs text-gray-300">1:24:35</span>
+                            <span class="text-xs text-gray-300" id="currentTime">1:24:35</span>
                             <span class="mx-1 text-xs text-gray-400">/</span>
-                            <span class="text-xs text-gray-300">7:12:08</span>
+                            <span class="text-xs text-gray-300" id="duration">7:12:08</span>
                         </div>
                     </div>
                     
                     <!-- Player Controls -->
                     <div class="mt-1 flex items-center">
                         <!-- Main Controls -->
-                        <div class="flex items-center space-x-2">
-                            <button class="text-gray-300 hover:text-white transition-colors" title="이전 챕터">
-                                <i class="fas fa-step-backward text-base"></i>
+                        <div class="flex items-center space-x-3">
+                            <button class="text-gray-300 hover:text-white transition-colors" title="이전 챕터" id="prevChapter">
+                                <i class="fas fa-step-backward text-lg"></i>
                             </button>
-                            <button class="p-2 text-white bg-gradient-to-br from-secondary to-yellow-500 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200" title="재생/일시정지">
-                                <i class="fas fa-pause text-sm"></i>
+                            <button class="p-2 text-white bg-gradient-to-br from-secondary to-yellow-500 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200" title="재생/일시정지" id="playPauseBtn">
+                                <i class="fas fa-pause text-base" id="playPauseIcon"></i>
                             </button>
-                            <button class="text-gray-300 hover:text-white transition-colors" title="다음 챕터">
-                                <i class="fas fa-step-forward text-base"></i>
+                            <button class="text-gray-300 hover:text-white transition-colors" title="다음 챕터" id="nextChapter">
+                                <i class="fas fa-step-forward text-lg"></i>
                             </button>
                         </div>
                         
                         <!-- Progress Bar -->
-                        <div class="ml-3 flex-1 relative">
+                        <div class="ml-4 flex-1 relative">
                             <div class="h-1 bg-gray-700 bg-opacity-60 rounded-full overflow-hidden">
-                                <div class="h-full bg-secondary rounded-full" style="width: 35%"></div>
+                                <div class="h-full bg-secondary rounded-full" id="progressBar" style="width: 35%"></div>
                             </div>
-                            <input type="range" min="0" max="100" value="35" 
+                            <input type="range" min="0" max="100" value="35" id="progressSlider"
                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                         </div>
                         
                         <!-- Secondary Controls -->
-                        <div class="ml-3 flex items-center space-x-3">
-                            <button class="text-gray-300 hover:text-white relative group" title="속도 조절">
-                                <i class="fas fa-tachometer-alt text-sm"></i>
-                                <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-24 bg-gray-800 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                                    재생속도: 1.0x
+                        <div class="ml-4 flex items-center space-x-4">
+                            <div class="relative group" id="playbackSpeedContainer">
+                                <button class="text-gray-300 hover:text-white" title="속도 조절" id="playbackSpeedBtn">
+                                    <i class="fas fa-tachometer-alt text-base"></i>
+                                </button>
+                                <div class="hidden group-hover:block absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-32 bg-gray-800 text-white text-sm rounded py-1 px-2 shadow-lg">
+                                    <div class="flex space-x-2">
+                                        <button class="speed-option" data-speed="0.5">0.5x</button>
+                                        <button class="speed-option" data-speed="0.75">0.75x</button>
+                                        <button class="speed-option active" data-speed="1.0">1.0x</button>
+                                        <button class="speed-option" data-speed="1.25">1.25x</button>
+                                        <button class="speed-option" data-speed="1.5">1.5x</button>
+                                    </div>
                                 </div>
-                            </button>
-                            <button class="text-gray-300 hover:text-white relative group" title="볼륨 조절">
-                                <i class="fas fa-volume-up text-sm"></i>
-                                <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-16 bg-gray-800 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                                    볼륨: 70%
+                            </div>
+                            <div class="relative group" id="volumeControlContainer">
+                                <button class="text-gray-300 hover:text-white" title="볼륨 조절" id="volumeBtn">
+                                    <i class="fas fa-volume-up text-base"></i>
+                                </button>
+                                <div class="hidden group-hover:block absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-24 bg-gray-800 rounded py-2 px-3 shadow-lg">
+                                    <input type="range" min="0" max="100" value="70" id="volumeSlider" 
+                                           class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer">
                                 </div>
-                            </button>
-                            <button class="text-gray-300 hover:text-white" title="북마크">
-                                <i class="fas fa-bookmark text-sm"></i>
+                            </div>
+                            <button class="text-gray-300 hover:text-white" title="북마크" id="bookmarkBtn">
+                                <i class="fas fa-bookmark text-base"></i>
                             </button>
                         </div>
                     </div>
@@ -863,44 +874,202 @@
     </div>
 
     <script>
-        // Sample interactive elements
         document.addEventListener('DOMContentLoaded', function() {
-            // Book card play button click event
-            const playButtons = document.querySelectorAll('.book-card button');
-            playButtons.forEach(button => {
-                button.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    alert('오디오북 샘플을 재생합니다! 실제 앱에서는 자동재생이 시작됩니다.');
-                });
+            // Audio player state
+            const audioPlayer = {
+                isPlaying: false,
+                currentTime: 0,
+                duration: 0,
+                playbackRate: 1.0,
+                volume: 0.7,
+                currentChapter: 3,
+                totalChapters: 12
+            };
+
+            // DOM elements
+            const playPauseBtn = document.getElementById('playPauseBtn');
+            const playPauseIcon = document.getElementById('playPauseIcon');
+            const progressBar = document.getElementById('progressBar');
+            const progressSlider = document.getElementById('progressSlider');
+            const currentTimeEl = document.getElementById('currentTime');
+            const durationEl = document.getElementById('duration');
+            const volumeSlider = document.getElementById('volumeSlider');
+            const volumeBtn = document.getElementById('volumeBtn');
+            const playbackSpeedBtn = document.getElementById('playbackSpeedBtn');
+            const speedOptions = document.querySelectorAll('.speed-option');
+            const prevChapterBtn = document.getElementById('prevChapter');
+            const nextChapterBtn = document.getElementById('nextChapter');
+            const bookmarkBtn = document.getElementById('bookmarkBtn');
+            const currentTrackTitle = document.getElementById('currentTrackTitle');
+            const currentBookInfo = document.getElementById('currentBookInfo');
+            const currentBookCover = document.getElementById('currentBookCover');
+
+            // Initialize player
+            function initPlayer() {
+                updateTimeDisplay();
+                updateVolumeIcon();
+            }
+
+            // Play/Pause toggle
+            playPauseBtn.addEventListener('click', function() {
+                audioPlayer.isPlaying = !audioPlayer.isPlaying;
+                if (audioPlayer.isPlaying) {
+                    playPauseIcon.classList.remove('fa-play');
+                    playPauseIcon.classList.add('fa-pause');
+                    // In a real app, you would call audioElement.play() here
+                } else {
+                    playPauseIcon.classList.remove('fa-pause');
+                    playPauseIcon.classList.add('fa-play');
+                    // In a real app, you would call audioElement.pause() here
+                }
             });
-            
-            // Mobile menu toggle (placeholder)
-            const mobileMenuButton = document.querySelector('nav button:last-child');
-            mobileMenuButton.addEventListener('click', function() {
-                alert('모바일 메뉴가 열립니다! 실제 앱에서는 사이드 메뉴가 표시됩니다.');
+
+            // Progress slider
+            progressSlider.addEventListener('input', function() {
+                const percent = this.value;
+                progressBar.style.width = `${percent}%`;
+                // Calculate and update current time based on percentage
+                audioPlayer.currentTime = (percent / 100) * audioPlayer.duration;
+                updateTimeDisplay();
             });
-            
-            // Subscription plan buttons
-            const subscriptionButtons = document.querySelectorAll('.bg-white button');
-            subscriptionButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    const planName = this.closest('div').querySelector('h2').textContent;
-                    alert(`${planName} 플랜을 선택하셨습니다!`);
-                });
+
+            // Volume control
+            volumeSlider.addEventListener('input', function() {
+                audioPlayer.volume = this.value / 100;
+                updateVolumeIcon();
+                // In a real app, you would set audioElement.volume here
             });
-            
-            // Audio player play/pause toggle
-            const playerPlayButton = document.querySelector('.audio-player .fa-play').closest('button');
-            playerPlayButton.addEventListener('click', function() {
-                const icon = this.querySelector('i');
-                if(icon.classList.contains('fa-play')) {
-                    icon.classList.remove('fa-play');
-                    icon.classList.add('fa-pause');
+
+            function updateVolumeIcon() {
+                const volIcon = volumeBtn.querySelector('i');
+                if (audioPlayer.volume === 0) {
+                    volIcon.classList.remove('fa-volume-up', 'fa-volume-down');
+                    volIcon.classList.add('fa-volume-mute');
+                } else if (audioPlayer.volume < 0.5) {
+                    volIcon.classList.remove('fa-volume-up', 'fa-volume-mute');
+                    volIcon.classList.add('fa-volume-down');
                 } else {
-                    icon.classList.remove('fa-pause');
-                    icon.classList.add('fa-play');
+                    volIcon.classList.remove('fa-volume-down', 'fa-volume-mute');
+                    volIcon.classList.add('fa-volume-up');
+                }
+            }
+
+            // Playback speed control
+            speedOptions.forEach(option => {
+                option.addEventListener('click', function() {
+                    const speed = parseFloat(this.dataset.speed);
+                    audioPlayer.playbackRate = speed;
+                    
+                    // Update active state
+                    speedOptions.forEach(opt => opt.classList.remove('active'));
+                    this.classList.add('active');
+                    
+                    // In a real app, you would set audioElement.playbackRate here
+                });
+            });
+
+            // Chapter navigation
+            prevChapterBtn.addEventListener('click', function() {
+                if (audioPlayer.currentChapter > 1) {
+                    audioPlayer.currentChapter--;
+                    updateBookInfo();
+                    resetProgress();
                 }
             });
+
+            nextChapterBtn.addEventListener('click', function() {
+                if (audioPlayer.currentChapter < audioPlayer.totalChapters) {
+                    audioPlayer.currentChapter++;
+                    updateBookInfo();
+                    resetProgress();
+                }
+            });
+
+            // Bookmark
+            bookmarkBtn.addEventListener('click', function() {
+                alert(`현재 ${formatTime(audioPlayer.currentTime)}에 북마크를 추가했습니다.`);
+            });
+
+            // Update time display
+            function updateTimeDisplay() {
+                currentTimeEl.textContent = formatTime(audioPlayer.currentTime);
+                durationEl.textContent = formatTime(audioPlayer.duration);
+            }
+
+            // Update book/chapter info
+            function updateBookInfo() {
+                currentBookInfo.textContent = `이미예 | 7시간 12분 | 챕터 ${audioPlayer.currentChapter}/${audioPlayer.totalChapters}`;
+            }
+
+            // Reset progress when changing chapters
+            function resetProgress() {
+                audioPlayer.currentTime = 0;
+                progressBar.style.width = '0%';
+                progressSlider.value = 0;
+                updateTimeDisplay();
+            }
+
+            // Format time (HH:MM:SS)
+            function formatTime(seconds) {
+                const hrs = Math.floor(seconds / 3600);
+                const mins = Math.floor((seconds % 3600) / 60);
+                const secs = Math.floor(seconds % 60);
+                return `${hrs}:${mins < 10 ? '0' : ''}${mins}:${secs < 10 ? '0' : ''}${secs}`;
+            }
+
+            // Simulate playback progress (for demo)
+            function simulatePlayback() {
+                if (audioPlayer.isPlaying) {
+                    // Update current time (demo only - in real app use actual audio position)
+                    audioPlayer.currentTime += 0.5;
+                    
+                    // Update progress
+                    const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+                    progressBar.style.width = `${percent}%`;
+                    progressSlider.value = percent;
+                    updateTimeDisplay();
+                    
+                    // Check if chapter ended
+                    if (percent >= 100 && audioPlayer.currentChapter < audioPlayer.totalChapters) {
+                        audioPlayer.currentChapter++;
+                        updateBookInfo();
+                        audioPlayer.currentTime = 0;
+                    }
+                }
+            }
+
+            // Initialize demo values
+            audioPlayer.currentTime = 5065; // 1:24:25 in seconds
+            audioPlayer.duration = 25920; // 7:12:00 in seconds
+            initPlayer();
+
+            // Start playback simulation (for demo)
+            setInterval(simulatePlayback, 500);
+
+            // Book card play buttons
+            document.querySelectorAll('.book-card button').forEach(button => {
+                button.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const bookCard = this.closest('.book-card');
+                    const title = bookCard.querySelector('h3').textContent;
+                    const author = bookCard.querySelector('p').textContent;
+                    const cover = bookCard.querySelector('img').src;
+                    
+                    // Update player with new book
+                    currentTrackTitle.textContent = title;
+                    currentBookInfo.textContent = `${author} | 7시간 12분 | 챕터 1/12`;
+                    currentBookCover.src = cover;
+                    
+                    // Reset player state
+                    audioPlayer.currentChapter = 1;
+                    audioPlayer.isPlaying = true;
+                    playPauseIcon.classList.remove('fa-play');
+                    playPauseIcon.classList.add('fa-pause');
+                    resetProgress();
+                    
+                    alert(`${title} 오디오북 재생을 시작합니다!`);
+                });
+            });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nkjoy/audio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>