88 lines
2.7 KiB
HTML
88 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Music Player</title>
|
|
<style>
|
|
body { font-family: sans-serif; padding: 1rem; }
|
|
button { margin: 0.5rem; }
|
|
#queueList { margin-top: 1rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Music Player</h1>
|
|
|
|
<div>
|
|
<h2>Player Controls</h2>
|
|
<button onclick="play()">Play</button>
|
|
<button onclick="pause()">Pause</button>
|
|
<button onclick="resume()">Resume</button>
|
|
<button onclick="stop()">Stop</button>
|
|
<button onclick="skip()">Skip</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Volume</h2>
|
|
<input type="range" min="0" max="1" step="0.01" id="volumeSlider" oninput="setVolume(this.value)">
|
|
<span id="volumeValue">0</span>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Queue</h2>
|
|
<input type="text" id="trackUrl" placeholder="Track URL">
|
|
<button onclick="addToQueue()">Add to Queue</button>
|
|
<div id="queueList"></div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Player State</h2>
|
|
<pre id="playerState"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
const api = (endpoint, options = {}) =>
|
|
fetch(endpoint, options).then(res => res.json()).catch(console.error);
|
|
|
|
const updateVolume = async () => {
|
|
const res = await api("/player/volume");
|
|
document.getElementById("volumeSlider").value = res.volume;
|
|
document.getElementById("volumeValue").textContent = res.volume;
|
|
};
|
|
|
|
const setVolume = async (val) => {
|
|
await api(`/player/volume?volume=${val}`, { method: "PUT" });
|
|
document.getElementById("volumeValue").textContent = val;
|
|
};
|
|
|
|
const updateQueue = async () => {
|
|
const queue = await api("/queue");
|
|
document.getElementById("queueList").textContent = JSON.stringify(queue, null, 2);
|
|
};
|
|
|
|
const updateState = async () => {
|
|
const state = await api("/player");
|
|
document.getElementById("playerState").textContent = JSON.stringify(state, null, 2);
|
|
};
|
|
|
|
const addToQueue = async () => {
|
|
const url = document.getElementById("trackUrl").value;
|
|
await api(`/queue?url=${encodeURIComponent(url)}`, { method: "POST" });
|
|
updateQueue();
|
|
};
|
|
|
|
const play = async () => { await api("/player/play", { method: "POST" }); updateState(); };
|
|
const pause = async () => { await api("/player/pause", { method: "POST" }); updateState(); };
|
|
const resume = async () => { await api("/player/resume", { method: "POST" }); updateState(); };
|
|
const stop = async () => { await api("/player/stop", { method: "POST" }); updateState(); };
|
|
const skip = async () => { await api("/player/skip", { method: "POST" }); updateState(); updateQueue(); };
|
|
|
|
// Init
|
|
updateVolume();
|
|
updateQueue();
|
|
updateState();
|
|
setInterval(updateState, 3000); // auto-refresh state
|
|
setInterval(updateQueue, 3000); // auto-refresh state
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|