| | <!DOCTYPE html> |
| | <html> |
| |
|
| | <head> |
| | <title>FoxDot Stream Test</title> |
| | <style> |
| | body { |
| | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | padding: 40px; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | color: white; |
| | min-height: 100vh; |
| | margin: 0; |
| | } |
| | |
| | .container { |
| | max-width: 600px; |
| | margin: 0 auto; |
| | background: rgba(255, 255, 255, 0.1); |
| | backdrop-filter: blur(10px); |
| | padding: 30px; |
| | border-radius: 15px; |
| | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
| | } |
| | |
| | h1 { |
| | text-align: center; |
| | margin-bottom: 10px; |
| | } |
| | |
| | .subtitle { |
| | text-align: center; |
| | opacity: 0.8; |
| | margin-bottom: 30px; |
| | } |
| | |
| | audio { |
| | width: 100%; |
| | margin: 20px 0; |
| | border-radius: 10px; |
| | } |
| | |
| | .status { |
| | padding: 15px; |
| | background: rgba(0, 0, 0, 0.3); |
| | border-radius: 8px; |
| | margin: 15px 0; |
| | } |
| | |
| | .status-indicator { |
| | display: inline-block; |
| | width: 12px; |
| | height: 12px; |
| | border-radius: 50%; |
| | margin-right: 8px; |
| | animation: pulse 2s ease-in-out infinite; |
| | } |
| | |
| | .status-connecting { |
| | background: #ffd700; |
| | } |
| | |
| | .status-playing { |
| | background: #00ff00; |
| | } |
| | |
| | .status-error { |
| | background: #ff0000; |
| | animation: none; |
| | } |
| | |
| | .status-buffering { |
| | background: #ffa500; |
| | } |
| | |
| | @keyframes pulse { |
| | |
| | 0%, |
| | 100% { |
| | opacity: 1; |
| | } |
| | |
| | 50% { |
| | opacity: 0.5; |
| | } |
| | } |
| | |
| | .info { |
| | background: rgba(0, 0, 0, 0.2); |
| | padding: 15px; |
| | border-radius: 8px; |
| | margin-top: 20px; |
| | font-size: 14px; |
| | } |
| | |
| | .info code { |
| | background: rgba(0, 0, 0, 0.3); |
| | padding: 2px 6px; |
| | border-radius: 3px; |
| | font-family: 'Courier New', monospace; |
| | } |
| | </style> |
| | </head> |
| |
|
| | <body> |
| | <div class="container"> |
| | <h1>🎵 FoxDot Audio Stream</h1> |
| | <p class="subtitle">Live audio streaming from SuperCollider</p> |
| |
|
| | <audio id="audioPlayer" controls autoplay> |
| | <source src="http://localhost:8000/stream.mp3" type="audio/mpeg"> |
| | Your browser does not support the audio element. |
| | </audio> |
| |
|
| | <div class="status"> |
| | <span id="statusIndicator" class="status-indicator status-connecting"></span> |
| | <strong>Status:</strong> <span id="statusText">Connecting...</span> |
| | </div> |
| |
|
| | <div class="info"> |
| | <strong>Stream Info:</strong><br> |
| | URL: <code id="streamUrl">http://localhost:8000/stream.mp3</code><br> |
| | Format: <code>MP3 (128kbps)</code><br> |
| | Source: <code>SuperCollider → JACK → FFmpeg → Icecast</code> |
| | </div> |
| |
|
| | <div class="info" id="debugInfo" style="display: none;"> |
| | <strong>Debug Info:</strong><br> |
| | <div id="debugText"></div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | const audio = document.getElementById('audioPlayer'); |
| | const statusText = document.getElementById('statusText'); |
| | const statusIndicator = document.getElementById('statusIndicator'); |
| | const debugInfo = document.getElementById('debugInfo'); |
| | const debugText = document.getElementById('debugText'); |
| | |
| | function updateStatus(status, message) { |
| | statusText.innerText = message; |
| | statusIndicator.className = 'status-indicator status-' + status; |
| | } |
| | |
| | function log(message) { |
| | const timestamp = new Date().toLocaleTimeString(); |
| | debugText.innerHTML += `[${timestamp}] ${message}<br>`; |
| | debugInfo.style.display = 'block'; |
| | console.log(message); |
| | } |
| | |
| | audio.onloadstart = () => { |
| | updateStatus('connecting', 'Loading stream...'); |
| | log('Loading stream from /stream'); |
| | }; |
| | |
| | audio.oncanplay = () => { |
| | updateStatus('playing', 'Ready to play'); |
| | log('Stream is ready to play'); |
| | }; |
| | |
| | audio.onplaying = () => { |
| | updateStatus('playing', 'Playing ♪'); |
| | log('Stream is playing'); |
| | }; |
| | |
| | audio.onwaiting = () => { |
| | updateStatus('buffering', 'Buffering...'); |
| | log('Buffering stream data'); |
| | }; |
| | |
| | audio.onpause = () => { |
| | updateStatus('connecting', 'Paused'); |
| | log('Stream paused'); |
| | }; |
| | |
| | audio.onerror = (e) => { |
| | updateStatus('error', 'Error loading stream'); |
| | const error = audio.error; |
| | let errorMsg = 'Unknown error'; |
| | if (error) { |
| | switch (error.code) { |
| | case 1: errorMsg = 'MEDIA_ERR_ABORTED - Playback aborted'; break; |
| | case 2: errorMsg = 'MEDIA_ERR_NETWORK - Network error'; break; |
| | case 3: errorMsg = 'MEDIA_ERR_DECODE - Decoding error'; break; |
| | case 4: errorMsg = 'MEDIA_ERR_SRC_NOT_SUPPORTED - Stream not supported'; break; |
| | } |
| | } |
| | log(`ERROR: ${errorMsg}`); |
| | |
| | |
| | fetch('/stream', { method: 'HEAD' }) |
| | .then(response => { |
| | log(`Stream endpoint status: ${response.status}`); |
| | log(`Content-Type: ${response.headers.get('content-type')}`); |
| | }) |
| | .catch(err => { |
| | log(`Cannot reach stream endpoint: ${err.message}`); |
| | }); |
| | }; |
| | |
| | |
| | document.getElementById('streamUrl').innerText = window.location.origin + '/stream'; |
| | |
| | |
| | log('Page loaded, attempting to connect to stream'); |
| | </script> |
| | </body> |
| |
|
| | </html> |
