Update app.py
Browse files
app.py
CHANGED
@@ -629,72 +629,6 @@ def create_interface():
|
|
629 |
title="YouTube music player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
630 |
allowfullscreen></iframe>
|
631 |
</div>
|
632 |
-
<style>
|
633 |
-
.audio-player-container {
|
634 |
-
text-align: center;
|
635 |
-
margin-top: 20px;
|
636 |
-
}
|
637 |
-
</style>
|
638 |
-
<script>
|
639 |
-
let audio = document.getElementById('mainAudio');
|
640 |
-
let playButton = document.getElementById('playButton');
|
641 |
-
let playButtonText = document.getElementById('playButtonText');
|
642 |
-
|
643 |
-
function toggleAudio() {
|
644 |
-
if (audio.paused) {
|
645 |
-
audio.play().then(() => {
|
646 |
-
playButtonText.textContent = '일시정지';
|
647 |
-
}).catch(error => {
|
648 |
-
console.error('Audio playback failed:', error);
|
649 |
-
alert('음악 재생에 실패했습니다. 다시 시도해주세요.');
|
650 |
-
});
|
651 |
-
} else {
|
652 |
-
audio.pause();
|
653 |
-
playButtonText.textContent = '재생';
|
654 |
-
}
|
655 |
-
}
|
656 |
-
|
657 |
-
audio.addEventListener('ended', () => {
|
658 |
-
playButtonText.textContent = '재생';
|
659 |
-
});
|
660 |
-
|
661 |
-
audio.addEventListener('error', (e) => {
|
662 |
-
console.error('Audio error:', e);
|
663 |
-
alert('음악 파일을 불러오는데 실패했습니다.');
|
664 |
-
});
|
665 |
-
</script>
|
666 |
-
<style>
|
667 |
-
.audio-player-container {
|
668 |
-
margin: 20px 0;
|
669 |
-
width: 100%;
|
670 |
-
text-align: center;
|
671 |
-
}
|
672 |
-
.custom-audio-button {
|
673 |
-
width: 200px;
|
674 |
-
padding: 12px 24px;
|
675 |
-
margin: 10px 0;
|
676 |
-
background-color: #4a90e2;
|
677 |
-
color: white;
|
678 |
-
border: none;
|
679 |
-
border-radius: 8px;
|
680 |
-
cursor: pointer;
|
681 |
-
font-size: 16px;
|
682 |
-
font-weight: bold;
|
683 |
-
transition: background-color 0.3s ease;
|
684 |
-
}
|
685 |
-
.custom-audio-button:hover {
|
686 |
-
background-color: #357abd;
|
687 |
-
}
|
688 |
-
.custom-audio-button:active {
|
689 |
-
background-color: #2a5d8f;
|
690 |
-
transform: scale(0.98);
|
691 |
-
}
|
692 |
-
@media (max-width: 600px) {
|
693 |
-
.custom-audio-button {
|
694 |
-
width: 100%;
|
695 |
-
}
|
696 |
-
}
|
697 |
-
</style>
|
698 |
"""
|
699 |
|
700 |
css = """
|
|
|
629 |
title="YouTube music player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
630 |
allowfullscreen></iframe>
|
631 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
632 |
"""
|
633 |
|
634 |
css = """
|