Update app.py

app.py

@@ -616,16 +616,17 @@ def create_interface():
     # HTML5 Audio Player 템플릿
     AUDIO_PLAYER_HTML = """
     <div class="audio-player-container">
-        <audio id="mainAudio" preload="auto" style="width: 100%;">
+        <audio id="mainAudio" preload="auto">
             <source src="/assets/main_music.mp3" type="audio/mp3">
             Your browser does not support the audio element.
         </audio>
         <button id="playButton" onclick="togglePlay()" class="custom-audio-button">
-            재생/일시정지
+            <span id="playButtonText">재생</span>
         </button>
     </div>
     <script>
         let audioElement = document.getElementById('mainAudio');
+        let playButtonText = document.getElementById('playButtonText');
         let isPlaying = false;
         
         function togglePlay() {
@@ -633,6 +634,7 @@ def create_interface():
                 audioElement.play()
                 .then(() => {
                     isPlaying = true;
+                    playButtonText.textContent = '일시정지';
                 })
                 .catch(error => {
                     console.error("Audio playback failed:", error);
@@ -641,6 +643,7 @@ def create_interface():
             } else {
                 audioElement.pause();
                 isPlaying = false;
+                playButtonText.textContent = '재생';
             }
         }
         
@@ -658,6 +661,38 @@ def create_interface():
             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 = """
@@ -778,7 +813,7 @@ def create_interface():
                 온천천 온천장역에서 장전역까지 걸으며 더 깊은 체험이 가능합니다.
                 """)
                 
-                # 커스텀 오디오 플레이어로 교체
+                # 커스텀 오디오 플레이어
                 gr.HTML(AUDIO_PLAYER_HTML)
                 
                 with gr.Column():
@@ -1086,6 +1121,7 @@ def create_interface():
             inputs=[final_reflection, state],
             outputs=[baseline_status, wishes_display]
         )
+        
     return app
 
 if __name__ == "__main__":