|
|
<!DOCTYPE html> |
|
|
<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>` : ''); |
|
|
|
|
|
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> |
