win-stream-audio
Version:
🎧 Stream Windows system audio to Android devices over WiFi with professional audio controls, EQ, pitch shifting, and effects
175 lines (152 loc) • 7.96 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎧 AudioPilot - Mission Control</title>
<link rel="stylesheet" href="css/audiopilot.css">
</head>
<body>
<!-- Screen wake overlay with fake video -->
<div class="screen-wake-overlay" id="screenWakeOverlay">
<video class="screen-wake-video" id="screenWakeVideo" muted loop autoplay playsinline>
<!-- Transparent video to keep screen awake -->
</video>
</div>
<div class="cockpit-container">
<div class="header">
🎧 AudioPilot - Mission Control
</div>
<div class="status-panel">
<div class="panel-title">🛰️ System Status</div>
<div class="status-indicator">
<span>Connection</span>
<div class="status-light" id="connectionLight"></div>
</div>
<div class="status-indicator">
<span>Audio Stream</span>
<div class="status-light" id="audioLight"></div>
</div>
<div class="status-indicator">
<span>Screen Lock</span>
<div class="status-light" id="screenLight"></div>
</div>
<div class="status-indicator">
<span>Buffer Level</span>
<span id="bufferLevel">0/5</span>
</div>
<div class="status-indicator">
<span>Latency</span>
<span id="latencyDisplay">-- ms</span>
</div>
<div class="knob-container">
<div class="knob" id="volumeKnob"></div>
<div class="knob-label">Master Volume</div>
<div id="volumeValue">50%</div>
</div>
</div>
<div class="control-panel">
<div class="panel-title">🎛️ Flight Controls</div>
<button class="cockpit-button" id="connectBtn">🔗 Establish Link</button>
<button class="cockpit-button" id="disconnectBtn" disabled>❌ Terminate Link</button>
<button class="cockpit-button" id="reconnectBtn" disabled>🔄 Reconnect</button>
<div style="margin: 15px 0; border-top: 1px solid #666; padding-top: 15px;">
<button class="cockpit-button" id="testBtn">🔊 Audio Test</button>
<button class="cockpit-button" id="screenLockBtn">📱 Screen Lock</button>
<button class="cockpit-button" id="lowLatencyBtn">⚡ Low Latency</button>
<button class="cockpit-button" id="internetModeBtn">🌐 Internet Mode</button>
<button class="cockpit-button" id="audioFilterBtn">🎛️ Audio Filter</button>
</div>
<div style="margin: 15px 0; border-top: 1px solid #666; padding-top: 15px;">
<button class="cockpit-button" id="debugToggle">📋 Debug Log</button>
<button class="cockpit-button" id="clearDebugBtn">🗑️ Clear Log</button>
</div>
</div>
<div class="audio-control-panel">
<div class="panel-title">🎚️ Audio Processing</div>
<!-- Equalizer Controls -->
<div class="eq-section">
<div class="eq-title">🎛️ Equalizer</div>
<div class="eq-controls">
<div class="eq-band">
<div class="eq-slider-container">
<input type="range" class="eq-slider" id="bassSlider" min="-20" max="20" value="0" orient="vertical">
<div class="eq-value" id="bassValue">0dB</div>
</div>
<div class="eq-label">Bass<br>80Hz</div>
</div>
<div class="eq-band">
<div class="eq-slider-container">
<input type="range" class="eq-slider" id="midSlider" min="-20" max="20" value="0" orient="vertical">
<div class="eq-value" id="midValue">0dB</div>
</div>
<div class="eq-label">Mid<br>1kHz</div>
</div>
<div class="eq-band">
<div class="eq-slider-container">
<input type="range" class="eq-slider" id="trebleSlider" min="-20" max="20" value="0" orient="vertical">
<div class="eq-value" id="trebleValue">0dB</div>
</div>
<div class="eq-label">Treble<br>8kHz</div>
</div>
</div>
</div>
<!-- Pitch Control -->
<div class="pitch-section">
<div class="pitch-title">🎵 Pitch Control</div>
<div class="pitch-controls">
<div class="pitch-knob-container">
<div class="pitch-knob" id="pitchKnob"></div>
<div class="pitch-label">Pitch Shift</div>
<div class="pitch-value" id="pitchValue">0 cents</div>
</div>
<div class="pitch-presets">
<button class="preset-btn" id="pitchReset">Reset</button>
<button class="preset-btn" id="pitchMale">♂️ Male</button>
<button class="preset-btn" id="pitchFemale">♀️ Female</button>
<button class="preset-btn" id="pitchChild">👶 Child</button>
<button class="preset-btn" id="pitchRobot">🤖 Robot</button>
</div>
</div>
</div>
<!-- Audio Effects -->
<div class="effects-section">
<div class="effects-title">🎭 Audio Effects</div>
<div class="effects-controls">
<button class="effect-btn" id="reverbBtn">🏛️ Reverb</button>
<button class="effect-btn" id="echoBtn">📢 Echo</button>
<button class="effect-btn" id="distortionBtn">⚡ Distortion</button>
<button class="effect-btn" id="chorusBtn">🌊 Chorus</button>
</div>
</div>
</div>
<div class="visualization-panel">
<div class="panel-title">📊 Audio Visualization</div>
<div class="canvas-container">
<canvas class="visualization-canvas" id="waveformCanvas"></canvas>
</div>
<div class="meter-container">
<div class="vu-meter" id="leftMeter">
<div style="position: absolute; bottom: 5px; left: 5px; font-size: 10px;">L</div>
</div>
<div class="vu-meter" id="rightMeter">
<div style="position: absolute; bottom: 5px; right: 5px; font-size: 10px;">R</div>
</div>
</div>
</div>
<div class="debug-panel">
<div class="panel-title">🔍 Mission Log</div>
<div class="debug-text" id="debugOutput">AudioPilot System Online - Awaiting Commands...</div>
</div>
</div>
<!-- External Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/nosleep.js@0.12.0/dist/NoSleep.min.js"></script>
<!-- AudioPilot Modules -->
<script src="js/logger.js"></script>
<script src="js/audio-processor.js"></script>
<script src="js/visualizer.js"></script>
<script src="js/connection-manager.js"></script>
<script src="js/ui-controls.js"></script>
<script src="js/audiopilot-main.js"></script>
</body>
</html>