Add 1 files

index.html

@@ -13,8 +13,10 @@
         :root {
             --primary: #00f0ff;
             --secondary: #ff00f0;
+            --tertiary: #f0ff00;
             --bg-dark: #0a0a1a;
             --bg-light: #1a1a2e;
+            --bg-darker: #050510;
         }
         
         body {
@@ -22,6 +24,9 @@
             background-color: var(--bg-dark);
             color: white;
             overflow-x: hidden;
+            background-image: 
+                radial-gradient(circle at 10% 20%, rgba(0, 240, 255, 0.05) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(255, 0, 240, 0.05) 0%, transparent 20%);
         }
         
         .orbitron {
@@ -36,25 +41,50 @@
             text-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary);
         }
         
+        .glow-tertiary {
+            text-shadow: 0 0 10px var(--tertiary), 0 0 20px var(--tertiary);
+        }
+        
         .btn-glow {
             box-shadow: 0 0 15px var(--primary);
+            transition: all 0.3s ease;
         }
         
         .btn-glow:hover {
-            box-shadow: 0 0 25px var(--primary);
+            box-shadow: 0 0 25px var(--primary), 0 0 15px var(--primary);
+            transform: translateY(-2px);
         }
         
         .btn-glow-secondary {
             box-shadow: 0 0 15px var(--secondary);
+            transition: all 0.3s ease;
         }
         
         .btn-glow-secondary:hover {
-            box-shadow: 0 0 25px var(--secondary);
+            box-shadow: 0 0 25px var(--secondary), 0 0 15px var(--secondary);
+            transform: translateY(-2px);
+        }
+        
+        .btn-glow-tertiary {
+            box-shadow: 0 0 15px var(--tertiary);
+            transition: all 0.3s ease;
+        }
+        
+        .btn-glow-tertiary:hover {
+            box-shadow: 0 0 25px var(--tertiary), 0 0 15px var(--tertiary);
+            transform: translateY(-2px);
         }
         
         .border-glow {
             border: 1px solid var(--primary);
             box-shadow: 0 0 10px var(--primary), inset 0 0 10px var(--primary);
+            background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.05));
+        }
+        
+        .border-glow-secondary {
+            border: 1px solid var(--secondary);
+            box-shadow: 0 0 10px var(--secondary), inset 0 0 10px var(--secondary);
+            background: linear-gradient(135deg, rgba(255, 0, 240, 0.1), rgba(255, 0, 240, 0.05));
         }
         
         .pulse {
@@ -123,12 +153,119 @@
             font-size: 10px;
             color: var(--secondary);
         }
+        
+        .cyberpunk-box {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .cyberpunk-box::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                rgba(0, 240, 255, 0) 0%,
+                rgba(0, 240, 255, 0) 30%,
+                rgba(0, 240, 255, 0.3) 45%,
+                rgba(0, 240, 255, 0) 60%,
+                rgba(0, 240, 255, 0) 100%
+            );
+            transform: rotate(30deg);
+            animation: shine-overlay 6s infinite linear;
+        }
+        
+        @keyframes shine-overlay {
+            0% { transform: translateX(-100%) rotate(30deg); }
+            100% { transform: translateX(100%) rotate(30deg); }
+        }
+        
+        .device-selector {
+            background-color: var(--bg-light);
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 14px;
+            width: 100%;
+            transition: all 0.3s ease;
+        }
+        
+        .device-selector:hover {
+            border-color: var(--primary);
+            box-shadow: 0 0 10px var(--primary);
+        }
+        
+        .device-selector:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 15px var(--primary);
+        }
+        
+        .holographic-effect {
+            position: relative;
+        }
+        
+        .holographic-effect::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+                135deg,
+                rgba(0, 240, 255, 0.05) 0%,
+                rgba(255, 0, 240, 0.05) 50%,
+                rgba(0, 240, 255, 0.05) 100%
+            );
+            pointer-events: none;
+            z-index: -1;
+        }
+        
+        .scanlines {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .scanlines::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+                to bottom,
+                transparent 0%,
+                rgba(0, 240, 255, 0.05) 50%,
+                transparent 100%
+            );
+            background-size: 100% 2px;
+            pointer-events: none;
+            z-index: 1;
+        }
+        
+        .grid-pattern {
+            background-image: 
+                linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
     </style>
 </head>
-<body class="min-h-screen flex flex-col">
-    <header class="container mx-auto px-4 py-6">
-        <h1 class="orbitron text-4xl md:text-5xl font-bold text-center mb-2 glow">NEON NOISE MONITOR</h1>
-        <p class="text-center text-gray-400">Real-time ambient noise level visualization</p>
+<body class="min-h-screen flex flex-col grid-pattern">
+    <header class="container mx-auto px-4 py-8 relative">
+        <div class="cyberpunk-box absolute inset-0 opacity-20"></div>
+        <h1 class="orbitron text-5xl md:text-6xl font-bold text-center mb-2 glow tracking-wider">
+            <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">NEON</span> 
+            <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500">NOISE</span> 
+            <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-yellow-400">MONITOR</span>
+        </h1>
+        <p class="text-center text-gray-400 font-light tracking-wider">REAL-TIME AMBIENT NOISE LEVEL VISUALIZATION SYSTEM</p>
     </header>
     
     <main class="flex-grow container mx-auto px-4 py-6">
@@ -136,67 +273,79 @@
             <!-- Left Panel -->
             <div class="lg:col-span-1 space-y-6">
                 <!-- Microphone Status -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border-glow">
-                    <h2 class="orbitron text-xl mb-4 flex items-center">
-                        <i class="fas fa-microphone mr-3 text-purple-500"></i>
-                        <span>MICROPHONE STATUS</span>
+                <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border-glow relative overflow-hidden scanlines">
+                    <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/20 opacity-30"></div>
+                    <h2 class="orbitron text-xl mb-4 flex items-center relative z-10">
+                        <i class="fas fa-microphone mr-3 text-purple-400"></i>
+                        <span class="tracking-wider">MICROPHONE STATUS</span>
                     </h2>
-                    <div class="flex items-center justify-between">
-                        <span id="micStatus" class="text-gray-400">Click start to begin</span>
+                    <div class="flex items-center justify-between relative z-10">
+                        <span id="micStatus" class="text-gray-300">Click start to begin</span>
                         <div id="micStatusIndicator" class="w-4 h-4 rounded-full bg-gray-600"></div>
                     </div>
+                    
+                    <!-- Microphone Selector -->
+                    <div class="mt-4 relative z-10">
+                        <label for="microphoneSelect" class="block text-sm text-gray-400 mb-2 tracking-wider">SELECT INPUT DEVICE</label>
+                        <select id="microphoneSelect" class="device-selector">
+                            <option value="">Default Microphone</option>
+                        </select>
+                    </div>
                 </div>
                 
                 <!-- Current Session -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border-glow">
-                    <h2 class="orbitron text-xl mb-4 flex items-center">
+                <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border-glow-secondary relative overflow-hidden scanlines">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-pink-900/20 opacity-30"></div>
+                    <h2 class="orbitron text-xl mb-4 flex items-center relative z-10">
                         <i class="fas fa-clock mr-3 text-blue-400"></i>
-                        <span>CURRENT SESSION</span>
+                        <span class="tracking-wider">CURRENT SESSION</span>
                     </h2>
-                    <div class="text-center">
+                    <div class="text-center relative z-10">
                         <div id="sessionTimer" class="orbitron text-3xl mb-2 glow">00:00:00</div>
-                        <div class="text-sm text-gray-400">Monitoring duration</div>
+                        <div class="text-sm text-gray-400 tracking-wider">MONITORING DURATION</div>
                     </div>
                 </div>
                 
                 <!-- Controls -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border-glow">
-                    <h2 class="orbitron text-xl mb-4 flex items-center">
+                <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border-glow relative overflow-hidden scanlines">
+                    <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-cyan-900/20 opacity-30"></div>
+                    <h2 class="orbitron text-xl mb-4 flex items-center relative z-10">
                         <i class="fas fa-sliders-h mr-3 text-green-400"></i>
-                        <span>CONTROLS</span>
+                        <span class="tracking-wider">CONTROLS</span>
                     </h2>
-                    <div class="flex flex-col space-y-4">
-                        <button id="startBtn" class="btn-glow orbitron py-3 px-6 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold transition-all">
+                    <div class="flex flex-col space-y-4 relative z-10">
+                        <button id="startBtn" class="btn-glow orbitron py-3 px-6 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold transition-all tracking-wider">
                             <i class="fas fa-play mr-2"></i> START MONITORING
                         </button>
-                        <button id="stopBtn" disabled class="btn-glow-secondary orbitron py-3 px-6 bg-purple-600 hover:bg-purple-700 rounded-lg font-bold transition-all">
+                        <button id="stopBtn" disabled class="btn-glow-secondary orbitron py-3 px-6 bg-purple-600 hover:bg-purple-700 rounded-lg font-bold transition-all tracking-wider">
                             <i class="fas fa-stop mr-2"></i> STOP
                         </button>
-                        <button id="resetBtn" class="orbitron py-3 px-6 bg-gray-700 hover:bg-gray-600 rounded-lg font-bold transition-all">
+                        <button id="resetBtn" class="btn-glow-tertiary orbitron py-3 px-6 bg-yellow-600 hover:bg-yellow-700 rounded-lg font-bold transition-all tracking-wider">
                             <i class="fas fa-redo mr-2"></i> RESET DATA
                         </button>
                     </div>
                 </div>
                 
                 <!-- Threshold Settings -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border-glow">
-                    <h2 class="orbitron text-xl mb-4 flex items-center">
+                <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border-glow-secondary relative overflow-hidden scanlines">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-pink-900/20 opacity-30"></div>
+                    <h2 class="orbitron text-xl mb-4 flex items-center relative z-10">
                         <i class="fas fa-bell mr-3 text-yellow-400"></i>
-                        <span>NOISE THRESHOLD</span>
+                        <span class="tracking-wider">NOISE THRESHOLD</span>
                     </h2>
-                    <div class="space-y-4">
+                    <div class="space-y-4 relative z-10">
                         <div>
-                            <label for="thresholdSlider" class="block text-sm text-gray-400 mb-2">Alert Level (0-100)</label>
-                            <input type="range" id="thresholdSlider" min="0" max="100" value="70" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
-                            <div class="flex justify-between text-xs text-gray-400 mt-1">
+                            <label for="thresholdSlider" class="block text-sm text-gray-400 mb-2 tracking-wider">ALERT LEVEL (0-100)</label>
+                            <input type="range" id="thresholdSlider" min="0" max="100" value="70" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
+                            <div class="flex justify-between text-xs text-gray-400 mt-1 tracking-wider">
                                 <span>0</span>
                                 <span id="thresholdValue">70</span>
                                 <span>100</span>
                             </div>
                         </div>
                         <div class="flex items-center">
-                            <input type="checkbox" id="enableThreshold" class="mr-2" checked>
-                            <label for="enableThreshold" class="text-sm">Enable threshold alerts</label>
+                            <input type="checkbox" id="enableThreshold" class="mr-2 w-4 h-4 accent-purple-500" checked>
+                            <label for="enableThreshold" class="text-sm tracking-wider">ENABLE THRESHOLD ALERTS</label>
                         </div>
                     </div>
                 </div>
@@ -205,86 +354,89 @@
             <!-- Main Panel -->
             <div class="lg:col-span-2 space-y-6">
                 <!-- Real-time Noise Level -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border-glow">
-                    <h2 class="orbitron text-xl mb-4 flex items-center">
+                <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border-glow relative overflow-hidden scanlines">
+                    <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-cyan-900/20 opacity-30"></div>
+                    <h2 class="orbitron text-xl mb-4 flex items-center relative z-10">
                         <i class="fas fa-volume-up mr-3 text-red-400"></i>
-                        <span>REAL-TIME NOISE LEVEL</span>
+                        <span class="tracking-wider">REAL-TIME NOISE LEVEL</span>
                     </h2>
-                    <div class="text-center mb-6">
+                    <div class="text-center mb-6 relative z-10">
                         <div id="noiseLevel" class="orbitron text-6xl md:text-8xl font-bold mb-2 glow pulse">--</div>
-                        <div id="noiseDescription" class="text-xl text-gray-400">Microphone inactive</div>
+                        <div id="noiseDescription" class="text-xl text-gray-400 tracking-wider">MICROPHONE INACTIVE</div>
                     </div>
                     
                     <!-- Visualizer -->
-                    <div class="flex justify-center items-end h-32 mb-4" id="audioVisualizer">
+                    <div class="flex justify-center items-end h-32 mb-4 relative z-10" id="audioVisualizer">
                         <!-- Bars will be added dynamically -->
                     </div>
                     
                     <!-- Noise Level Indicator -->
-                    <div class="noise-level-indicator mb-2">
+                    <div class="noise-level-indicator mb-2 relative z-10">
                         <div id="noiseLevelBar" class="h-full bg-green-500 rounded-lg" style="width: 0%"></div>
                     </div>
-                    <div class="flex justify-between text-xs text-gray-400">
-                        <span>Quiet</span>
-                        <span>Moderate</span>
-                        <span>Loud</span>
+                    <div class="flex justify-between text-xs text-gray-400 tracking-wider relative z-10">
+                        <span>QUIET</span>
+                        <span>MODERATE</span>
+                        <span>LOUD</span>
                     </div>
                     
                     <!-- Stats -->
-                    <div class="grid grid-cols-2 gap-4 mt-6">
-                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4">
-                            <div class="text-sm text-gray-400 mb-1">PEAK LEVEL</div>
+                    <div class="grid grid-cols-2 gap-4 mt-6 relative z-10">
+                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 border border-gray-700 hover:border-blue-400 transition-all">
+                            <div class="text-sm text-gray-400 mb-1 tracking-wider">PEAK LEVEL</div>
                             <div id="peakLevel" class="orbitron text-2xl glow-secondary">--</div>
                         </div>
-                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4">
-                            <div class="text-sm text-gray-400 mb-1">AVERAGE</div>
+                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 border border-gray-700 hover:border-purple-400 transition-all">
+                            <div class="text-sm text-gray-400 mb-1 tracking-wider">AVERAGE</div>
                             <div id="averageLevel" class="orbitron text-2xl">--</div>
                         </div>
                     </div>
                 </div>
                 
                 <!-- Historical Data -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border-glow">
-                    <h2 class="orbitron text-xl mb-4 flex items-center">
+                <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border-glow-secondary relative overflow-hidden scanlines">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-pink-900/20 opacity-30"></div>
+                    <h2 class="orbitron text-xl mb-4 flex items-center relative z-10">
                         <i class="fas fa-chart-line mr-3 text-green-400"></i>
-                        <span>HISTORICAL DATA</span>
+                        <span class="tracking-wider">HISTORICAL DATA</span>
                     </h2>
-                    <div class="relative h-64">
+                    <div class="relative h-64 z-10">
                         <canvas id="noiseChart"></canvas>
                     </div>
-                    <div class="flex justify-between mt-4">
-                        <div class="text-sm text-gray-400">Last 4 hours of data</div>
+                    <div class="flex justify-between mt-4 relative z-10">
+                        <div class="text-sm text-gray-400 tracking-wider">LAST 4 HOURS OF DATA</div>
                         <div class="flex space-x-2">
-                            <button id="smoothBtn" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">
-                                <i class="fas fa-wave-square mr-1"></i> Smooth
+                            <button id="smoothBtn" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 tracking-wider">
+                                <i class="fas fa-wave-square mr-1"></i> SMOOTH
                             </button>
-                            <button id="rawBtn" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600">
-                                <i class="fas fa-chart-bar mr-1"></i> Raw
+                            <button id="rawBtn" class="text-xs px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 tracking-wider">
+                                <i class="fas fa-chart-bar mr-1"></i> RAW
                             </button>
                         </div>
                     </div>
                 </div>
                 
                 <!-- Peak Values Dashboard -->
-                <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border-glow">
-                    <h2 class="orbitron text-xl mb-4 flex items-center">
+                <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 border-glow relative overflow-hidden scanlines">
+                    <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-cyan-900/20 opacity-30"></div>
+                    <h2 class="orbitron text-xl mb-4 flex items-center relative z-10">
                         <i class="fas fa-mountain mr-3 text-purple-400"></i>
-                        <span>PEAK VALUES (LAST 4 HOURS)</span>
+                        <span class="tracking-wider">PEAK VALUES (LAST 4 HOURS)</span>
                     </h2>
-                    <div class="relative h-64">
+                    <div class="relative h-64 z-10">
                         <canvas id="peakChart"></canvas>
                     </div>
-                    <div class="grid grid-cols-3 gap-4 mt-4">
-                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3">
-                            <div class="text-sm text-gray-400 mb-1">HIGHEST PEAK</div>
+                    <div class="grid grid-cols-3 gap-4 mt-4 relative z-10">
+                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 border border-gray-700 hover:border-blue-400 transition-all">
+                            <div class="text-sm text-gray-400 mb-1 tracking-wider">HIGHEST PEAK</div>
                             <div id="highestPeak" class="orbitron text-xl glow-secondary">--</div>
                         </div>
-                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3">
-                            <div class="text-sm text-gray-400 mb-1">AVG PEAKS</div>
+                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 border border-gray-700 hover:border-purple-400 transition-all">
+                            <div class="text-sm text-gray-400 mb-1 tracking-wider">AVG PEAKS</div>
                             <div id="avgPeaks" class="orbitron text-xl">--</div>
                         </div>
-                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3">
-                            <div class="text-sm text-gray-400 mb-1">THRESHOLD BREACHES</div>
+                        <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 border border-gray-700 hover:border-yellow-400 transition-all">
+                            <div class="text-sm text-gray-400 mb-1 tracking-wider">THRESHOLD BREACHES</div>
                             <div id="thresholdBreaches" class="orbitron text-xl">--</div>
                         </div>
                     </div>
@@ -293,8 +445,8 @@
         </div>
     </main>
     
-    <footer class="container mx-auto px-4 py-6 text-center text-gray-500 text-sm">
-        <p>Neon Noise Monitor v1.0 | Uses Web Audio API | Data stays in your browser</p>
+    <footer class="container mx-auto px-4 py-6 text-center text-gray-500 text-sm tracking-wider">
+        <p class="border-t border-gray-800 pt-4">NEON NOISE MONITOR v2.0 | CYBERPUNK EDITION | USES WEB AUDIO API | DATA STAYS IN YOUR BROWSER</p>
     </footer>
 
     <script>
@@ -319,6 +471,7 @@
         const highestPeak = document.getElementById('highestPeak');
         const avgPeaks = document.getElementById('avgPeaks');
         const thresholdBreaches = document.getElementById('thresholdBreaches');
+        const microphoneSelect = document.getElementById('microphoneSelect');
         
         // Audio variables
         let audioContext;
@@ -328,6 +481,7 @@
         let isMonitoring = false;
         let sessionStartTime = 0;
         let timerInterval;
+        let currentStream;
         
         // Data variables
         let noiseData = [];
@@ -557,11 +711,11 @@
         
         // Get noise description based on level
         function getNoiseDescription(level) {
-            if (level < 20) return 'Silent';
-            if (level < 40) return 'Very Quiet';
-            if (level < 60) return 'Moderate';
-            if (level < 80) return 'Loud';
-            return 'Very Loud';
+            if (level < 20) return 'SILENT';
+            if (level < 40) return 'VERY QUIET';
+            if (level < 60) return 'MODERATE';
+            if (level < 80) return 'LOUD';
+            return 'VERY LOUD';
         }
         
         // Get color based on noise level
@@ -572,11 +726,47 @@
             return '#ff0000'; // Red
         }
         
+        // Populate microphone devices
+        async function populateMicrophoneDevices() {
+            try {
+                // Get all audio devices
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                const audioInputs = devices.filter(device => device.kind === 'audioinput');
+                
+                // Clear existing options
+                microphoneSelect.innerHTML = '';
+                
+                // Add default option
+                const defaultOption = document.createElement('option');
+                defaultOption.value = '';
+                defaultOption.textContent = 'Default Microphone';
+                microphoneSelect.appendChild(defaultOption);
+                
+                // Add all available microphones
+                audioInputs.forEach(device => {
+                    const option = document.createElement('option');
+                    option.value = device.deviceId;
+                    option.textContent = device.label || `Microphone ${microphoneSelect.length + 1}`;
+                    microphoneSelect.appendChild(option);
+                });
+                
+                return true;
+            } catch (error) {
+                console.error('Error enumerating devices:', error);
+                return false;
+            }
+        }
+        
         // Start monitoring
         async function startMonitoring() {
             try {
+                // Get selected device ID
+                const deviceId = microphoneSelect.value;
+                const constraints = deviceId ? { audio: { deviceId: { exact: deviceId } } } : { audio: true };
+                
                 // Request microphone access
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                const stream = await navigator.mediaDevices.getUserMedia(constraints);
+                currentStream = stream;
                 
                 // Create audio context
                 audioContext = new (window.AudioContext || window.webkitAudioContext)();
@@ -709,6 +899,11 @@
                 audioContext = null;
             }
             
+            if (currentStream) {
+                currentStream.getTracks().forEach(track => track.stop());
+                currentStream = null;
+            }
+            
             // Update UI
             isMonitoring = false;
             startBtn.disabled = false;
@@ -809,6 +1004,12 @@
             
             // Load historical peaks
             updatePeakChart();
+            
+            // Populate microphone devices
+            populateMicrophoneDevices();
+            
+            // Update device list when devices change
+            navigator.mediaDevices.addEventListener('devicechange', populateMicrophoneDevices);
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=markburn/neon-noice-monitor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>