Update app.py

app.py

@@ -27,17 +27,15 @@ if st.button("Generate Audio"):
                     audio_data = f.read()
                 audio_base64 = base64.b64encode(audio_data).decode()
 
-                # Use JavaScript-based audio player with playback speed adjustment
-                st.markdown(
-                    f"""
-                    <div>
-                        <audio id="audio" controls>
-                            <source src="data:audio/wav;base64,{audio_base64}" type="audio/wav">
-                            Your browser does not support the audio element.
-                        </audio>
-                        <br>
-                        <label for="speed">Playback Speed:</label>
-                        <input type="range" id="speed" min="0.5" max="2.0" value="1.0" step="0.1">
+                # Embed custom HTML audio player with speed adjustment
+                audio_html = f"""
+                    <audio id="audio" controls style="width: 100%; margin-top: 10px;">
+                        <source src="data:audio/wav;base64,{audio_base64}" type="audio/wav">
+                        Your browser does not support the audio element.
+                    </audio>
+                    <div style="margin-top: 10px;">
+                        <label for="speed" style="font-weight: bold;">Playback Speed:</label>
+                        <input type="range" id="speed" min="0.5" max="2.0" value="1.0" step="0.1" style="width: 50%; margin-left: 10px;">
                         <span id="speed-value">1.0x</span>
                     </div>
                     <script>
@@ -52,9 +50,8 @@ if st.button("Generate Audio"):
                             speedValue.textContent = speed.toFixed(1) + "x";
                         }});
                     </script>
-                    """,
-                    unsafe_allow_html=True,
-                )
+                """
+                st.components.v1.html(audio_html, height=200)
 
                 st.success("Audio generated successfully!")