Spaces:
Paused
Paused
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Mini Web Player</title> | |
<style> | |
body { | |
background: #181818; | |
color: #fff; | |
font-family: 'Segoe UI', Arial, sans-serif; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
min-height: 100vh; | |
margin: 0; | |
} | |
.player-container { | |
background: #232323; | |
border-radius: 16px; | |
box-shadow: 0 4px 24px rgba(0,0,0,0.4); | |
padding: 32px 24px 24px 24px; | |
max-width: 350px; | |
width: 100%; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.album-art { | |
width: 180px; | |
height: 180px; | |
border-radius: 12px; | |
background: #333; | |
margin-bottom: 20px; | |
object-fit: cover; | |
box-shadow: 0 2px 12px rgba(0,0,0,0.3); | |
} | |
.song-title { | |
font-size: 1.2em; | |
font-weight: bold; | |
margin-bottom: 6px; | |
text-align: center; | |
} | |
.song-meta { | |
font-size: 0.95em; | |
color: #aaa; | |
margin-bottom: 18px; | |
text-align: center; | |
} | |
audio { | |
width: 100%; | |
margin-top: 10px; | |
} | |
.no-song { | |
color: #ff7675; | |
margin-top: 20px; | |
text-align: center; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="player-container"> | |
<img id="album-art" class="album-art" src="" alt="Album Art" style="display:none;"/> | |
<div id="song-title" class="song-title">Loading...</div> | |
<div id="song-meta" class="song-meta"></div> | |
<audio id="audio" controls autoplay> | |
<source id="audio-src" src="/stream" type="audio/mpeg"> | |
Your browser does not support the audio element. | |
</audio> | |
<div id="no-song" class="no-song" style="display:none;">No song playing.</div> | |
</div> | |
<script> | |
async function fetchSongInfo() { | |
try { | |
const res = await fetch('/current'); | |
if (!res.ok) throw new Error('No song'); | |
const data = await res.json(); | |
document.getElementById('no-song').style.display = 'none'; | |
document.getElementById('song-title').innerText = data.title || 'Unknown Title'; | |
document.getElementById('song-meta').innerText = (data.dur ? `Duration: ${data.dur}` : '') + (data.link ? ` | <a href='${data.link}' target='_blank' style='color:#1db954;'>Source</a>` : ''); | |
// Album art | |
if (data.thumb || data.img) { | |
document.getElementById('album-art').src = data.thumb || data.img; | |
document.getElementById('album-art').style.display = 'block'; | |
} else { | |
document.getElementById('album-art').style.display = 'none'; | |
} | |
} catch (e) { | |
document.getElementById('song-title').innerText = ''; | |
document.getElementById('song-meta').innerText = ''; | |
document.getElementById('album-art').style.display = 'none'; | |
document.getElementById('no-song').style.display = 'block'; | |
} | |
} | |
fetchSongInfo(); | |
setInterval(fetchSongInfo, 5000); | |
</script> | |
</body> | |
</html> |