Update app.py

app.py

@@ -623,12 +623,75 @@ def create_interface():
     """
     
     # HTML5 Audio Player 템플릿
-        AUDIO_PLAYER_HTML = """
-        <div class="audio-player-container">
-            <iframe width="300" height="80" src="https://www.youtube.com/embed/[음악의 비디오 ID]?autoplay=1&loop=1&playlist=[음악의 비디오 ID]" 
-                    title="YouTube music player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                    allowfullscreen></iframe>
-        </div>
+    AUDIO_PLAYER_HTML = """
+    <div class="audio-player-container">
+        <audio id="mainAudio" preload="auto" style="display:none;">
+            <source src="/assets/main_music.mp3" type="audio/mp3">
+        </audio>
+        <button id="playButton" onclick="toggleAudio()" class="custom-audio-button">
+            <span id="playButtonText">재생</span>
+        </button>
+    </div>
+    <script>
+        let audio = document.getElementById('mainAudio');
+        let playButton = document.getElementById('playButton');
+        let playButtonText = document.getElementById('playButtonText');
+        
+        function toggleAudio() {
+            if (audio.paused) {
+                audio.play().then(() => {
+                    playButtonText.textContent = '일시정지';
+                }).catch(error => {
+                    console.error('Audio playback failed:', error);
+                    alert('음악 재생에 실패했습니다. 다시 시도해주세요.');
+                });
+            } else {
+                audio.pause();
+                playButtonText.textContent = '재생';
+            }
+        }
+        
+        audio.addEventListener('ended', () => {
+            playButtonText.textContent = '재생';
+        });
+        
+        audio.addEventListener('error', (e) => {
+            console.error('Audio error:', e);
+            alert('음악 파일을 불러오는데 실패했습니다.');
+        });
+    </script>
+    <style>
+        .audio-player-container {
+            margin: 20px 0;
+            width: 100%;
+            text-align: center;
+        }
+        .custom-audio-button {
+            width: 200px;
+            padding: 12px 24px;
+            margin: 10px 0;
+            background-color: #4a90e2;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+            transition: background-color 0.3s ease;
+        }
+        .custom-audio-button:hover {
+            background-color: #357abd;
+        }
+        .custom-audio-button:active {
+            background-color: #2a5d8f;
+            transform: scale(0.98);
+        }
+        @media (max-width: 600px) {
+            .custom-audio-button {
+                width: 100%;
+            }
+        }
+    </style>
     """
 
     css = """
@@ -873,7 +936,16 @@ def create_interface():
                 온천천 온천장역에서 장전역까지 걸으며 더 깊은 체험이 가능합니다.
                 """)
                 
-                gr.HTML(audio_player_html)
+                # 커스텀 오디오 플레이어
+                with gr.Blocks(css=css) as demo:
+                    gr.Markdown("## 온천천의 소리를 들어보세요")
+                    # HTML로 오디오 플레이어를 직접 삽입
+                    gr.HTML("""
+                    <audio controls class="audio-player">
+                        <source src="/assets/main_music.mp3" type="audio/mpeg">
+                        브라우저가 오디오 태그를 지원하지 않습니다.
+                    </audio>
+                    """)
                 
                 with gr.Column():
                     reflection_input = gr.Textbox(