oberon/mkcontrol-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update for random soundfile list

Browse Source
This commit is contained in:
oberon 2026-02-18 22:25:07 +01:00
parent 232f250aa5
commit f580d67ccb
1 changed files with 83 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
templates/soundboard.html
View File

@ -19,7 +19,7 @@
<div class="col-md-6 d-flex align-items-end">
<div class="btn-group">
<button id="btn-load-sb" class="btn btn-primary">Laden</button>
<button id="btn-play-random" class="btn btn-outline-secondary" disabled>Zufällig (max 2/h pro Datei)</button>
<button id="btn-play-random" class="btn btn-outline-secondary" disabled>1x Zufällig</button>
</div>
</div>
</div>
@ -33,6 +33,7 @@
<div id="sb-backgrounds" class="mb-4"></div>
<div id="sb-sounds" class="mb-4"></div>
<div id="sb-random" class="mb-4"></div>
<div id="sb-auto" class="mb-4"></div>
</div>
<div class="mt-4">
@ -49,6 +50,7 @@
const content = document.getElementById('sb-content');
let currentSB = null;
let autoTimer = null;
const statusBox = (msg, type='info') => {
console.log(msg);
};
@ -117,6 +119,81 @@
if (!list.length) { container.innerHTML=''; randBtn.disabled=true; return; }
const items = list.map(s => `<li>${s.name || s.id || s.file}</li>`).join('');
container.innerHTML = '<h4>Zufallspool</h4><p class="text-muted">max 2x pro Stunde je Datei.</p><ul>' + items + '</ul>';
renderAutoRandomControls();
}
function renderAutoRandomControls() {
const container = document.getElementById('sb-auto');
container.innerHTML = `
<h4>Automatik (Random)</h4>
<div class="row g-3 align-items-end">
<div class="col-md-3">
<label class="form-label">Intervall min (Minuten)</label>
<input id="auto-interval-min" type="number" class="form-control" value="5" min="1" max="60">
</div>
<div class="col-md-3">
<label class="form-label">Intervall max (Minuten)</label>
<input id="auto-interval-max" type="number" class="form-control" value="10" min="1" max="120">
</div>
<div class="col-md-3">
<label class="form-label">Startverzögerung min (Minuten)</label>
<input id="auto-delay-min" type="number" class="form-control" value="3" min="0" max="60">
</div>
<div class="col-md-3">
<label class="form-label">Startverzögerung max (Minuten)</label>
<input id="auto-delay-max" type="number" class="form-control" value="12" min="0" max="120">
</div>
</div>
<div class="mt-3 d-flex gap-2 align-items-center">
<button id="auto-start" class="btn btn-success" ${!randBtn.disabled ? '' : 'disabled'}>Auto-Start</button>
<button id="auto-stop" class="btn btn-outline-danger" disabled>Stop</button>
<span id="auto-status" class="text-muted ms-2">Aus</span>
</div>
`;
const start = document.getElementById('auto-start');
const stop = document.getElementById('auto-stop');
const status = document.getElementById('auto-status');
start.onclick = () => {
const imin = Math.max(1, parseInt(document.getElementById('auto-interval-min').value, 10) || 5);
const imax = Math.max(imin, parseInt(document.getElementById('auto-interval-max').value, 10) || 10);
const dmin = Math.max(0, parseInt(document.getElementById('auto-delay-min').value, 10) || 3);
const dmax = Math.max(dmin, parseInt(document.getElementById('auto-delay-max').value, 10) || 12);
const delayMs = randBetween(dmin, dmax) * 60 * 1000;
scheduleAuto(imin, imax, delayMs, status, start, stop);
};
stop.onclick = () => stopAuto(status, start, stop);
}
function randBetween(min, max) {
return min + Math.random() * (max - min);
}
function scheduleAuto(imin, imax, delayMs, status, startBtn, stopBtn) {
stopAuto(status, startBtn, stopBtn);
status.textContent = `Geplant in ${(delayMs/60000).toFixed(1)} min`;
startBtn.disabled = true;
stopBtn.disabled = false;
autoTimer = setTimeout(async function tick() {
await playRandom();
const nextMs = randBetween(imin, imax) * 60 * 1000;
status.textContent = `Nächster in ${(nextMs/60000).toFixed(1)} min`;
autoTimer = setTimeout(tick, nextMs);
}, delayMs);
}
function stopAuto(status, startBtn, stopBtn) {
if (autoTimer) {
clearTimeout(autoTimer);
autoTimer = null;
}
if (status) status.textContent = 'Aus';
if (startBtn) startBtn.disabled = false;
if (stopBtn) stopBtn.disabled = true;
}
async function playSound(sound) {
@ -146,10 +223,14 @@
loadBtn.onclick = () => loadSoundboard(selectEl.value);
randBtn.onclick = async () => {
await playRandom();
};
async function playRandom() {
const res = await fetch('/api/soundboard/play_random', { method: 'POST' });
const data = await res.json();
if (!data.success) statusBox(data.message || 'Random fehlgeschlagen', 'warn');
};
}
// Lautstärke
const vol = document.getElementById('sb-volume');