47 lines
1.7 KiB
HTML
47 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>TechDJ Live</title>
|
|
<link rel="stylesheet" href="listener.css?v=2.0">
|
|
</head>
|
|
|
|
<body class="listener-glow listening-active">
|
|
<!-- Listener UI -->
|
|
<div class="listener-mode" id="listener-mode">
|
|
<div class="listener-header">
|
|
<h1>TECHDJ LIVE</h1>
|
|
<div class="live-indicator">
|
|
<span class="pulse-dot"></span>
|
|
<span>LIVE</span>
|
|
</div>
|
|
</div>
|
|
<div class="listener-content">
|
|
<div class="now-playing" id="listener-now-playing">Waiting for stream...</div>
|
|
|
|
<canvas id="viz-listener" width="400" height="100"></canvas>
|
|
|
|
<!-- Enable Audio Button (shown when autoplay is blocked) -->
|
|
<button class="enable-audio-btn" id="enable-audio-btn" onclick="enableListenerAudio()">
|
|
<span class="audio-icon">🎧</span>
|
|
<span class="audio-text">ENABLE AUDIO</span>
|
|
<span class="audio-subtitle">Click to start listening</span>
|
|
</button>
|
|
|
|
<div class="volume-control">
|
|
<label>Volume</label>
|
|
<input type="range" id="listener-volume" min="0" max="100" value="80"
|
|
oninput="setListenerVolume(this.value)">
|
|
</div>
|
|
<div class="connection-status" id="connection-status">Connecting...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
|
<script src="listener.js?v=2.0"></script>
|
|
</body>
|
|
|
|
</html>
|