139 lines
6.9 KiB
HTML
139 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multi-Matrix Audio Control</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; background: #111; color: #f4f4f4; margin: 0; padding: 2rem; }
|
|
h1 { color: #4caf50; }
|
|
button { margin: 0.25rem; padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 4px; cursor: pointer; }
|
|
button { background: #4caf50; color: #fff; }
|
|
button.secondary { background: #1976d2; }
|
|
button.danger { background: #f44336; }
|
|
.controls { display: flex; flex-wrap: wrap; margin-bottom: 1.5rem; }
|
|
.status { margin-top: 1.5rem; }
|
|
.status span { font-weight: bold; }
|
|
.volume-control { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
|
|
input[type="range"] { width: 200px; }
|
|
.card { background: #1f1f1f; border-radius: 8px; padding: 1.5rem; box-shadow: 0 0 10px rgba(0,0,0,0.4); max-width: 400px; }
|
|
.status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 0.5rem; }
|
|
.status-indicator.ready { background: #4caf50; }
|
|
.status-indicator.not-ready { background: #f44336; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>Multi-Matrix Audio</h1>
|
|
<div class="controls">
|
|
<button onclick="sendAction('play')">Play</button>
|
|
<button class="secondary" onclick="sendAction('pause')">Pause</button>
|
|
<button class="secondary" onclick="sendAction('resume')">Resume</button>
|
|
<button class="danger" onclick="sendAction('stop')">Stop</button>
|
|
<button onclick="sendAction('previous')">Previous</button>
|
|
<button onclick="sendAction('next')">Next</button>
|
|
</div>
|
|
<div class="volume-control">
|
|
<label for="volume">Volume</label>
|
|
<input type="range" id="volume" min="0" max="30" value="15" oninput="updateVolumeDisplay(this.value)" onchange="setVolume(this.value)">
|
|
<span id="volumeValue">15</span>
|
|
</div>
|
|
<div class="status">
|
|
<p>Player Status: <span id="playerStatus">Unknown</span><span id="statusIndicator" class="status-indicator not-ready"></span></p>
|
|
<p>Volume: <span id="currentVolume">-</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function fetchStatus() {
|
|
try {
|
|
const response = await fetch('/api/audio/status');
|
|
if (!response.ok) {
|
|
throw new Error('Status request failed');
|
|
}
|
|
const status = await response.json();
|
|
document.getElementById('playerStatus').textContent = status.ready ? 'Ready' : 'Not Ready';
|
|
document.getElementById('currentVolume').textContent = status.volume;
|
|
document.getElementById('volume').value = status.volume;
|
|
document.getElementById('volumeValue').textContent = status.volume;
|
|
document.getElementById('statusIndicator').className = 'status-indicator ' + (status.ready ? 'ready' : 'not-ready');
|
|
} catch (error) {
|
|
document.getElementById('playerStatus').textContent = 'Error';
|
|
document.getElementById('statusIndicator').className = 'status-indicator not-ready';
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
async function sendAction(action, params = {}) {
|
|
try {
|
|
const formData = new URLSearchParams({ action, ...params });
|
|
const response = await fetch('/api/audio', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: formData
|
|
});
|
|
const result = await response.json();
|
|
document.getElementById('playerStatus').textContent = result.ready ? 'Ready' : 'Not Ready';
|
|
document.getElementById('currentVolume').textContent = result.volume;
|
|
document.getElementById('volume').value = result.volume;
|
|
document.getElementById('volumeValue').textContent = result.volume;
|
|
document.getElementById('statusIndicator').className = 'status-indicator ' + (result.ready ? 'ready' : 'not-ready');
|
|
if (!result.success) {
|
|
alert(result.message || 'Action failed');
|
|
}
|
|
} catch (error) {
|
|
alert('Request failed: ' + error.message);
|
|
}
|
|
}
|
|
|
|
function updateVolumeDisplay(value) {
|
|
document.getElementById('volumeValue').textContent = value;
|
|
}
|
|
|
|
function setVolume(value) {
|
|
sendAction('volume', { volume: value });
|
|
}
|
|
|
|
fetchStatus();
|
|
setInterval(fetchStatus, 5000);
|
|
|
|
function setupWebSocket() {
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const ws = new WebSocket(protocol + '//' + window.location.host + '/ws');
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const payload = JSON.parse(event.data);
|
|
if (payload.event === 'audio/player' && payload.payload) {
|
|
const data = JSON.parse(payload.payload);
|
|
if ('volume' in data) {
|
|
document.getElementById('volume').value = data.volume;
|
|
document.getElementById('volumeValue').textContent = data.volume;
|
|
document.getElementById('currentVolume').textContent = data.volume;
|
|
}
|
|
if (data.action) {
|
|
let statusText = data.action.charAt(0).toUpperCase() + data.action.slice(1);
|
|
if (data.action === 'play' || data.action === 'resume' || data.action === 'next' || data.action === 'previous') {
|
|
statusText = 'Playing';
|
|
} else if (data.action === 'pause') {
|
|
statusText = 'Paused';
|
|
} else if (data.action === 'stop') {
|
|
statusText = 'Stopped';
|
|
} else if (data.action === 'ready') {
|
|
statusText = 'Ready';
|
|
}
|
|
document.getElementById('playerStatus').textContent = statusText;
|
|
const indicatorClass = (data.action === 'stop') ? 'not-ready' : 'ready';
|
|
document.getElementById('statusIndicator').className = 'status-indicator ' + indicatorClass;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('WebSocket parse error', err);
|
|
}
|
|
};
|
|
}
|
|
|
|
setupWebSocket();
|
|
</script>
|
|
</body>
|
|
</html>
|