teste-micro

Running

App Files Files Community

Ravisil commited on Apr 2, 2025

Commit

7af88f5

verified ·

1 Parent(s): 6e694cf

Add 1 files

Browse files

Files changed (1) hide show

index.html +160 -2

index.html CHANGED Viewed

@@ -41,6 +41,31 @@
         .pulse {
             animation: pulse 2s infinite;
         }
     </style>
 </head>
 <body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen">
@@ -82,7 +107,7 @@
                 <!-- Controls -->
                 <div class="p-8">
-                    <div class="flex flex-col sm:flex-row gap-4">
                         <button id="test-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                             <i class="fas fa-play"></i> Testar Microfone
                         </button>
@@ -91,6 +116,29 @@
                         </button>
                     </div>
                     <div class="mt-8 bg-blue-50 border border-blue-100 rounded-lg p-4" id="instructions">
                         <h3 class="font-medium text-blue-800 mb-2 flex items-center gap-2">
                             <i class="fas fa-info-circle"></i> Instruções
@@ -99,6 +147,7 @@
                             <li>Permita o acesso ao microfone quando solicitado</li>
                             <li>Selecione seu dispositivo de microfone</li>
                             <li>Clique em "Testar Microfone" e comece a falar</li>
                             <li>O visualizador mostrará o nível de entrada de áudio</li>
                         </ol>
                     </div>
@@ -123,12 +172,22 @@
             const audioLevel = document.getElementById('audio-level');
             const visualizer = document.getElementById('visualizer');
             const instructions = document.getElementById('instructions');
             let audioContext;
             let microphone;
             let analyser;
             let isTesting = false;
             let devices = [];
             // Check microphone availability
             checkMicrophoneAvailability();
@@ -148,8 +207,9 @@
                         statusText.textContent = `${audioDevices.length} microfone(s) disponível(is)`;
                         statusIcon.innerHTML = '<i class="fas fa-microphone text-green-500 pulse"></i>';
-                        // Show device selection
                         deviceSection.style.display = 'block';
                         populateDeviceSelect(audioDevices);
                         // Enable test button
@@ -197,6 +257,8 @@
             testBtn.addEventListener('click', startTest);
             stopBtn.addEventListener('click', stopTest);
             async function startTest() {
                 if (isTesting) return;
@@ -297,6 +359,95 @@
                 requestAnimationFrame(visualize);
             }
             // Handle device changes
             navigator.mediaDevices.addEventListener('devicechange', async () => {
                 devices = await navigator.mediaDevices.enumerateDevices();
@@ -306,9 +457,16 @@
                 if (audioDevices.length > 0) {
                     statusText.textContent = `${audioDevices.length} microfone(s) disponível(is)`;
                     statusIcon.innerHTML = '<i class="fas fa-microphone text-green-500 pulse"></i>';
                 } else {
                     statusText.textContent = 'Nenhum microfone encontrado';
                     statusIcon.innerHTML = '<i class="fas fa-microphone-slash text-red-500"></i>';
                 }
             });
         });

         .pulse {
             animation: pulse 2s infinite;
         }
+        .volume-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 8px;
+            border-radius: 4px;
+            background: #e2e8f0;
+            outline: none;
+        }
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .volume-slider::-webkit-slider-thumb:hover {
+            background: #2563eb;
+            transform: scale(1.1);
+        }
     </style>
 </head>
 <body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen">
                 <!-- Controls -->
                 <div class="p-8">
+                    <div class="flex flex-col sm:flex-row gap-4 mb-6">
                         <button id="test-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                             <i class="fas fa-play"></i> Testar Microfone
                         </button>
                         </button>
                     </div>
+                    <!-- Monitor Section -->
+                    <div class="bg-purple-50 border border-purple-100 rounded-lg p-4 mb-6" id="monitor-section" style="display: none;">
+                        <div class="flex items-center justify-between mb-3">
+                            <h3 class="font-medium text-purple-800 flex items-center gap-2">
+                                <i class="fas fa-headphones"></i> Monitorar Áudio
+                            </h3>
+                            <div class="flex items-center gap-2">
+                                <span id="volume-value" class="text-sm text-purple-700">50%</span>
+                                <i class="fas fa-volume-up text-purple-600"></i>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-4">
+                            <button id="monitor-btn" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-all flex items-center justify-center gap-2">
+                                <i class="fas fa-play"></i> Ouvir
+                            </button>
+                            <input type="range" min="0" max="100" value="50" class="volume-slider flex-1" id="volume-slider">
+                        </div>
+                        <div class="mt-3 flex items-center gap-2 text-sm text-purple-700">
+                            <div class="h-3 w-3 rounded-full bg-purple-400" id="monitor-indicator"></div>
+                            <span id="monitor-status">Pronto para monitorar</span>
+                        </div>
+                    </div>
                     <div class="mt-8 bg-blue-50 border border-blue-100 rounded-lg p-4" id="instructions">
                         <h3 class="font-medium text-blue-800 mb-2 flex items-center gap-2">
                             <i class="fas fa-info-circle"></i> Instruções
                             <li>Permita o acesso ao microfone quando solicitado</li>
                             <li>Selecione seu dispositivo de microfone</li>
                             <li>Clique em "Testar Microfone" e comece a falar</li>
+                            <li>Use o botão "Ouvir" para monitorar seu microfone em tempo real</li>
                             <li>O visualizador mostrará o nível de entrada de áudio</li>
                         </ol>
                     </div>
             const audioLevel = document.getElementById('audio-level');
             const visualizer = document.getElementById('visualizer');
             const instructions = document.getElementById('instructions');
+            const monitorSection = document.getElementById('monitor-section');
+            const monitorBtn = document.getElementById('monitor-btn');
+            const volumeSlider = document.getElementById('volume-slider');
+            const volumeValue = document.getElementById('volume-value');
+            const monitorStatus = document.getElementById('monitor-status');
+            const monitorIndicator = document.getElementById('monitor-indicator');
             let audioContext;
             let microphone;
             let analyser;
             let isTesting = false;
             let devices = [];
+            let monitorStream = null;
+            let monitorGain = null;
+            let isMonitoring = false;
+            let volume = 0.5;
             // Check microphone availability
             checkMicrophoneAvailability();
                         statusText.textContent = `${audioDevices.length} microfone(s) disponível(is)`;
                         statusIcon.innerHTML = '<i class="fas fa-microphone text-green-500 pulse"></i>';
+                        // Show device selection and monitor section
                         deviceSection.style.display = 'block';
+                        monitorSection.style.display = 'block';
                         populateDeviceSelect(audioDevices);
                         // Enable test button
             testBtn.addEventListener('click', startTest);
             stopBtn.addEventListener('click', stopTest);
+            monitorBtn.addEventListener('click', toggleMonitor);
+            volumeSlider.addEventListener('input', updateVolume);
             async function startTest() {
                 if (isTesting) return;
                 requestAnimationFrame(visualize);
             }
+            async function toggleMonitor() {
+                if (isMonitoring) {
+                    stopMonitor();
+                } else {
+                    await startMonitor();
+                }
+            }
+            async function startMonitor() {
+                const deviceId = deviceSelect.value;
+                if (!deviceId) {
+                    alert('Por favor, selecione um microfone primeiro');
+                    return;
+                }
+                try {
+                    // Initialize audio context if not already done
+                    if (!audioContext) {
+                        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    }
+                    // Get microphone stream
+                    const constraints = {
+                        audio: {
+                            deviceId: deviceId ? { exact: deviceId } : undefined,
+                            echoCancellation: false,
+                            noiseSuppression: false,
+                            autoGainControl: false
+                        }
+                    };
+                    monitorStream = await navigator.mediaDevices.getUserMedia(constraints);
+                    const source = audioContext.createMediaStreamSource(monitorStream);
+                    // Create gain node for volume control
+                    monitorGain = audioContext.createGain();
+                    monitorGain.gain.value = volume;
+                    // Connect to destination
+                    source.connect(monitorGain);
+                    monitorGain.connect(audioContext.destination);
+                    // Update UI
+                    isMonitoring = true;
+                    monitorBtn.innerHTML = '<i class="fas fa-stop"></i> Parar';
+                    monitorBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
+                    monitorBtn.classList.add('bg-red-500', 'hover:bg-red-600');
+                    monitorStatus.textContent = 'Monitorando ativamente';
+                    monitorIndicator.classList.remove('bg-purple-400');
+                    monitorIndicator.classList.add('bg-green-500', 'animate-pulse');
+                } catch (error) {
+                    console.error('Error starting monitor:', error);
+                    alert('Erro ao iniciar o monitoramento: ' + error.message);
+                }
+            }
+            function stopMonitor() {
+                if (!isMonitoring) return;
+                // Stop all tracks
+                if (monitorStream) {
+                    monitorStream.getTracks().forEach(track => track.stop());
+                }
+                // Disconnect audio nodes
+                if (monitorGain) {
+                    monitorGain.disconnect();
+                }
+                // Update UI
+                isMonitoring = false;
+                monitorBtn.innerHTML = '<i class="fas fa-play"></i> Ouvir';
+                monitorBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
+                monitorBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
+                monitorStatus.textContent = 'Pronto para monitorar';
+                monitorIndicator.classList.remove('bg-green-500', 'animate-pulse');
+                monitorIndicator.classList.add('bg-purple-400');
+            }
+            function updateVolume() {
+                volume = volumeSlider.value / 100;
+                volumeValue.textContent = `${volumeSlider.value}%`;
+                if (monitorGain) {
+                    monitorGain.gain.value = volume;
+                }
+            }
             // Handle device changes
             navigator.mediaDevices.addEventListener('devicechange', async () => {
                 devices = await navigator.mediaDevices.enumerateDevices();
                 if (audioDevices.length > 0) {
                     statusText.textContent = `${audioDevices.length} microfone(s) disponível(is)`;
                     statusIcon.innerHTML = '<i class="fas fa-microphone text-green-500 pulse"></i>';
+                    monitorSection.style.display = 'block';
                 } else {
                     statusText.textContent = 'Nenhum microfone encontrado';
                     statusIcon.innerHTML = '<i class="fas fa-microphone-slash text-red-500"></i>';
+                    monitorSection.style.display = 'none';
+                }
+                // Stop monitoring if device list changes
+                if (isMonitoring) {
+                    stopMonitor();
                 }
             });
         });