// Function to update visual feedback for mouth detection function updateMouthDetectionFeedback(level, threshold, mouthHeight) { // Update visualizer colors based on proximity to threshold const mouthLevelEl = document.getElementById('mouthSoundLevel'); const indicator = document.getElementById('mouthIndicator'); if (mouthLevelEl) { // Calculate how close we are to threshold (0-100%) const proximityPercent = Math.min(100, (level / threshold) * 100); // Change gradient color based on proximity to threshold if (proximityPercent > 85) { // Very close to threshold - orange to red mouthLevelEl.style.background = 'linear-gradient(to right, #FF9800, #F44336, #E91E63)'; } else if (proximityPercent > 70) { // Getting closer - yellow to orange mouthLevelEl.style.background = 'linear-gradient(to right, #FFC107, #FF9800, #FF5722)'; } else if (proximityPercent > 50) { // Moderate level - green to yellow mouthLevelEl.style.background = 'linear-gradient(to right, #4CAF50, #8BC34A, #FFC107)'; } else { // Low level - blue to cyan to green mouthLevelEl.style.background = 'linear-gradient(to right, #00BCD4, #2196F3, #4CAF50)'; } // Pulse animation when very close to threshold if (proximityPercent > 90 && mouthHeight > mouthOpenThreshold) { mouthLevelEl.style.animation = 'pulse 0.5s infinite alternate'; } else { mouthLevelEl.style.animation = ''; } } // Update status text with proximity information const statusEl = document.getElementById('mouthAudioStatus'); if (statusEl) { if (level > threshold * 0.85 && mouthHeight > mouthOpenThreshold) { statusEl.textContent = 'Almost There!'; statusEl.style.color = '#FF9800'; } else if (level > threshold * 0.7 && mouthHeight > mouthOpenThreshold * 0.8) { statusEl.textContent = 'Getting Close'; statusEl.style.color = '#8BC34A'; } else { statusEl.textContent = 'Active'; statusEl.style.color = '#4CAF50'; } } // Update indicator appearance if (indicator) { if (level > threshold * 0.85 && mouthHeight > mouthOpenThreshold) { indicator.className = 'mouth-indicator active'; indicator.style.backgroundColor = '#FF9800'; } else if (mouthIsOpen && level > baselineNoiseLevel + 20) { indicator.className = 'mouth-indicator active'; } else if (mouthIsOpen) { indicator.className = 'mouth-indicator'; indicator.style.backgroundColor = '#4CAF50'; } else { indicator.className = 'mouth-indicator'; indicator.style.backgroundColor = ''; } } }
1 | A | B | C | D | E | |
2 | F | G | H | I | J | K |
3 | L | M | N | O | P | |
4 | Q | R | S | T | U | |
5 | V | W | X | Y | Z | |
6 | SPACE | |||||
7 | BACKSPACE |