132 lines
3.5 KiB
PHP
132 lines
3.5 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Remote Audioplayer</title>
|
|
<meta name="robots" content="noindex">
|
|
<style>
|
|
body {
|
|
background: #000 !important;
|
|
height: 100vh;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: sans-serif;
|
|
cursor: pointer;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
const userAccess = "audio";
|
|
|
|
let ws;
|
|
const RETRY_DELAY = 200; // ms
|
|
|
|
function startWebSocket() {
|
|
|
|
console.log("Attempting WebSocket connection...");
|
|
|
|
try {
|
|
ws = new WebSocket(`wss://` + window.location.hostname + `/ws/?access=${userAccess}`);
|
|
} catch (err) {
|
|
scheduleRetry();
|
|
return;
|
|
}
|
|
|
|
ws.onopen = () => {
|
|
console.log("WebSocket connected!");
|
|
document.querySelector('.errorws').style.display = 'none';
|
|
|
|
// SAFE: this executes only on successful connect
|
|
ws.send(JSON.stringify({
|
|
type: "SELF",
|
|
payload: {}
|
|
}));
|
|
};
|
|
|
|
ws.onerror = () => {
|
|
document.querySelector('h1').innerText = 'WS ERROR';
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
document.querySelector('h1').innerText = 'WS DISCONECTED';
|
|
scheduleRetry();
|
|
};
|
|
}
|
|
|
|
function scheduleRetry() {
|
|
console.log(`Retrying in ${RETRY_DELAY}ms...`);
|
|
setTimeout(startWebSocket, RETRY_DELAY);
|
|
}
|
|
|
|
startWebSocket();
|
|
</script>
|
|
<h1>Der Audioplayer startet durch das Berühren des Displays</h1>
|
|
|
|
<audio id="peep" preload="auto"></audio>
|
|
<audio id="musicPlayer" preload="auto"></audio>
|
|
|
|
<script>
|
|
const peep = document.getElementById('peep');
|
|
const music = document.getElementById('musicPlayer');
|
|
|
|
let lastMusicUrl = null;
|
|
let pollingStarted = false; // ensure we start polling only once
|
|
|
|
async function fetchAndHandleMusic() {
|
|
try {
|
|
const response = await fetch('/displays/json/audio.json?t=' + Date.now(), { cache: 'no-store' });
|
|
const data = await response.json();
|
|
|
|
// Stop everything if musik is "stop"
|
|
if (!data.musik || data.musik === 'nan' || data.start == false) {
|
|
if (!music.paused) {
|
|
music.pause();
|
|
music.currentTime = 0;
|
|
}
|
|
if (!peep.paused) {
|
|
peep.pause();
|
|
peep.currentTime = 0;
|
|
}
|
|
lastMusicUrl = null;
|
|
return;
|
|
}
|
|
|
|
// Play only if new URL
|
|
if (data.musik !== lastMusicUrl) {
|
|
lastMusicUrl = data.musik;
|
|
|
|
// Play short peep first
|
|
peep.src = '/files/music/piep.mp3';
|
|
peep.play().then(() => {
|
|
// After 2 seconds, play the main music
|
|
setTimeout(() => {
|
|
music.src = data.musik;
|
|
music.play().catch(err => console.log('Music play error:', err));
|
|
}, 2000);
|
|
}).catch(err => console.log('Peep play error:', err));
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('Error fetching JSON:', err);
|
|
}
|
|
}
|
|
|
|
document.body.addEventListener('click', () => {
|
|
if (!pollingStarted) {
|
|
pollingStarted = true;
|
|
ws.addEventListener("message", () => {
|
|
fetchAndHandleMusic();
|
|
});
|
|
document.querySelector('h1').innerText = 'Player läuft'; // remove instruction
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|