Update Script_Speech_recognition/speech_recognition.js
This commit is contained in:
		
							parent
							
								
									cf4d2f60ce
								
							
						
					
					
						commit
						956abd7348
					
				@ -1,100 +1,120 @@
 | 
				
			|||||||
document.addEventListener('DOMContentLoaded', function() {
 | 
					document.addEventListener('DOMContentLoaded', function() {
 | 
				
			||||||
 | 
					    const themeToggleBtn = document.getElementById('themeToggleBtn');
 | 
				
			||||||
 | 
					    const body = document.body;
 | 
				
			||||||
 | 
					    const h1 = document.querySelector('h1');
 | 
				
			||||||
 | 
					    const textareas = document.querySelectorAll('textarea');
 | 
				
			||||||
 | 
					    const startBtn = document.getElementById('startBtn');
 | 
				
			||||||
 | 
					    const timerDisplay = document.getElementById('timerDisplay');
 | 
				
			||||||
 | 
					    const statusText = document.getElementById('statusText');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    themeToggleBtn.addEventListener('click', function() {
 | 
				
			||||||
 | 
					        // Toggle dark mode classes on different elements
 | 
				
			||||||
 | 
					        body.classList.toggle('dark-mode');
 | 
				
			||||||
 | 
					        h1.classList.toggle('dark-mode');
 | 
				
			||||||
 | 
					        textareas.forEach(textarea => textarea.classList.toggle('dark-mode'));
 | 
				
			||||||
 | 
					        startBtn.classList.toggle('dark-mode');
 | 
				
			||||||
 | 
					        timerDisplay.classList.toggle('dark-mode');
 | 
				
			||||||
 | 
					        statusText.classList.toggle('dark-mode');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        // Update the icon based on the mode
 | 
				
			||||||
 | 
					        if (body.classList.contains('dark-mode')) {
 | 
				
			||||||
 | 
					            themeToggleBtn.textContent = '🌜'; // Moon icon for dark mode
 | 
				
			||||||
 | 
					        } else {
 | 
				
			||||||
 | 
					            themeToggleBtn.textContent = '🌞'; // Sun icon for light mode
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    // Speech recognition functionality
 | 
				
			||||||
    if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
 | 
					    if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
 | 
				
			||||||
        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 | 
					        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 | 
				
			||||||
        recognition.lang = 'sk-SK';  // Nastavenie jazyka
 | 
					        recognition.lang = 'sk-SK';  // Set language to Slovak
 | 
				
			||||||
        recognition.interimResults = true;
 | 
					        recognition.interimResults = true;
 | 
				
			||||||
        recognition.maxAlternatives = 1;
 | 
					        recognition.maxAlternatives = 1;
 | 
				
			||||||
        recognition.continuous = true;
 | 
					        recognition.continuous = true;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        let recognizing = false;  // Stavová premenná, či beží rozpoznávanie
 | 
					        let recognizing = false;  // Recognition state
 | 
				
			||||||
        let startTime;            // Na ukladanie času začiatku nahrávania
 | 
					        let startTime;            // To store start time of recording
 | 
				
			||||||
        let timerInterval;        // Interval na časovač
 | 
					        let timerInterval;        // For the timer
 | 
				
			||||||
        let transcriptHistory = []; // Na dočasné uloženie textových nahrávok
 | 
					        let transcriptHistory = []; // Store transcripts
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        const startBtn = document.getElementById('startBtn');
 | 
					        // Start/stop speech recognition with button
 | 
				
			||||||
        const statusText = document.getElementById('statusText');
 | 
					 | 
				
			||||||
        const timerDisplay = document.getElementById('timerDisplay'); // Element pre zobrazovanie času
 | 
					 | 
				
			||||||
        const inputText = document.getElementById('inputText'); // Textové pole na výsledky
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        // Funkcia pre spustenie časovača
 | 
					 | 
				
			||||||
        function startTimer() {
 | 
					 | 
				
			||||||
            startTime = Date.now();
 | 
					 | 
				
			||||||
            timerInterval = setInterval(() => {
 | 
					 | 
				
			||||||
                const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
 | 
					 | 
				
			||||||
                timerDisplay.textContent = `${elapsedTime}s`; // Zobrazenie počtu sekúnd
 | 
					 | 
				
			||||||
            }, 1000); // Aktualizácia každú sekundu
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        // Funkcia pre zastavenie časovača
 | 
					 | 
				
			||||||
        function stopTimer() {
 | 
					 | 
				
			||||||
            clearInterval(timerInterval);
 | 
					 | 
				
			||||||
            timerDisplay.textContent = ''; // Vymaže sa čas po zastavení nahrávania
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        // Po stlačení tlačidla začne alebo zastaví rozpoznávanie reči
 | 
					 | 
				
			||||||
        startBtn.onclick = () => {
 | 
					        startBtn.onclick = () => {
 | 
				
			||||||
            if (!recognizing) {
 | 
					            if (!recognizing) {
 | 
				
			||||||
                recognition.start();
 | 
					                recognition.start();
 | 
				
			||||||
                recognizing = true;
 | 
					                recognizing = true;
 | 
				
			||||||
                console.log('Čaká sa na povolenie mikrofónu...');
 | 
					                console.log('Waiting for microphone permission...');
 | 
				
			||||||
                startBtn.textContent = "🛑 Nahrávanie...";  // Zmena textu na "Nahrávanie..."
 | 
					                startBtn.textContent = "🛑 Nahrávanie...";  // Button shows "Recording..."
 | 
				
			||||||
                statusText.textContent = "Nahrávanie prebieha...";
 | 
					                statusText.textContent = "Nahrávanie prebieha...";
 | 
				
			||||||
            } else {
 | 
					            } else {
 | 
				
			||||||
                recognition.stop();
 | 
					                recognition.stop();
 | 
				
			||||||
                recognizing = false;
 | 
					                recognizing = false;
 | 
				
			||||||
                console.log('Rozpoznávanie reči zastavené');
 | 
					                console.log('Speech recognition stopped');
 | 
				
			||||||
                startBtn.textContent = "🎤";  // Obnova textu na "Pripravený na nahrávanie"
 | 
					                startBtn.textContent = "🎤";  // Button returns to original state
 | 
				
			||||||
                statusText.textContent = "Nahrávanie ukončené.";
 | 
					                statusText.textContent = "Nahrávanie ukončené.";
 | 
				
			||||||
                stopTimer(); // Zastavenie časovača
 | 
					                stopTimer(); // Stop timer
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        // Spustenie po povolení a začatí rozpoznávania
 | 
					        // Timer function
 | 
				
			||||||
 | 
					        function startTimer() {
 | 
				
			||||||
 | 
					            startTime = Date.now();
 | 
				
			||||||
 | 
					            timerInterval = setInterval(() => {
 | 
				
			||||||
 | 
					                const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
 | 
				
			||||||
 | 
					                timerDisplay.textContent = `${elapsedTime}s`; // Display elapsed time
 | 
				
			||||||
 | 
					            }, 1000); // Update every second
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        function stopTimer() {
 | 
				
			||||||
 | 
					            clearInterval(timerInterval);
 | 
				
			||||||
 | 
					            timerDisplay.textContent = ''; // Clear the timer display
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        // When recognition starts
 | 
				
			||||||
        recognition.onstart = function() {
 | 
					        recognition.onstart = function() {
 | 
				
			||||||
            console.log('Rozpoznávanie reči začalo');
 | 
					            console.log('Speech recognition started');
 | 
				
			||||||
            startTimer(); // Spustenie časovača po začatí nahrávania
 | 
					            startTimer(); // Start the timer
 | 
				
			||||||
            statusText.textContent = "Nahrávanie prebieha..."; // Stav počas nahrávania
 | 
					            statusText.textContent = "Nahrávanie prebieha..."; // Recording status
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        // Výsledok rozpoznávania
 | 
					        // Handling the results of speech recognition
 | 
				
			||||||
        recognition.onresult = function(event) {
 | 
					        recognition.onresult = function(event) {
 | 
				
			||||||
            let interimTranscript = '';  // Zmeníme na zobrazenie medzivýsledkov
 | 
					            let interimTranscript = '';  // To display interim results
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            for (let i = event.resultIndex; i < event.results.length; i++) {
 | 
					            for (let i = event.resultIndex; i < event.results.length; i++) {
 | 
				
			||||||
                const transcript = event.results[i][0].transcript;
 | 
					                const transcript = event.results[i][0].transcript;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                // Ak je to medzivýsledok, zobraz ho, ale neulož
 | 
					 | 
				
			||||||
                if (event.results[i].isFinal) {
 | 
					                if (event.results[i].isFinal) {
 | 
				
			||||||
                    transcriptHistory.push(transcript);
 | 
					                    transcriptHistory.push(transcript);
 | 
				
			||||||
                    inputText.value += transcript + ' ';  // Pridanie rozpoznaného textu
 | 
					                    inputText.value += transcript + ' ';  // Append final transcript to text area
 | 
				
			||||||
                } else {
 | 
					                } else {
 | 
				
			||||||
                    interimTranscript += transcript;
 | 
					                    interimTranscript += transcript;  // Update interim transcript
 | 
				
			||||||
                }
 | 
					                }
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            // Zobrazenie medzivýsledkov, kým nie sú konečné
 | 
					            // Show interim results combined with final results
 | 
				
			||||||
            inputText.value = transcriptHistory.join(' ') + ' ' + interimTranscript;
 | 
					            inputText.value = transcriptHistory.join(' ') + ' ' + interimTranscript;
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        // When recognition ends
 | 
				
			||||||
        recognition.onend = function() {
 | 
					        recognition.onend = function() {
 | 
				
			||||||
            // Ak bol mikrofón manuálne zastavený
 | 
					 | 
				
			||||||
            if (!recognizing) {
 | 
					            if (!recognizing) {
 | 
				
			||||||
                recognizing = false;
 | 
					                recognizing = false;
 | 
				
			||||||
                console.log('Rozpoznávanie reči ukončené');
 | 
					                console.log('Speech recognition ended');
 | 
				
			||||||
                stopTimer();
 | 
					                stopTimer();
 | 
				
			||||||
                startBtn.textContent = "🎤";  // Obnova textu
 | 
					                startBtn.textContent = "🎤";  // Restore button to original state
 | 
				
			||||||
                statusText.textContent = "Nahrávanie ukončené.";  // Zmena stavu po ukončení
 | 
					                statusText.textContent = "Nahrávanie ukončené.";  // Update status text
 | 
				
			||||||
            } else {
 | 
					            } else {
 | 
				
			||||||
                // Automaticky znovu spustí rozpoznávanie, ak nebolo zastavené manuálne
 | 
					                recognition.start(); // Auto-restart recognition if not manually stopped
 | 
				
			||||||
                recognition.start(); 
 | 
					 | 
				
			||||||
            } 
 | 
					 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					        };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        // Handle recognition errors
 | 
				
			||||||
        recognition.onerror = function(event) {
 | 
					        recognition.onerror = function(event) {
 | 
				
			||||||
            console.error('Chyba pri rozpoznávaní reči:', event.error);
 | 
					            console.error('Speech recognition error:', event.error);
 | 
				
			||||||
            recognizing = false;  // V prípade chyby, zastav rozpoznávanie
 | 
					            recognizing = false;  // Stop recognition on error
 | 
				
			||||||
            stopTimer(); // Zastav časovač aj pri chybe
 | 
					            stopTimer(); // Stop timer
 | 
				
			||||||
            startBtn.textContent = "🎤";  // Obnova textu
 | 
					            startBtn.textContent = "🎤";  // Restore button to original state
 | 
				
			||||||
            statusText.textContent = "Chyba pri nahrávaní. Skúste znova.";  // Zobrazenie chyby
 | 
					            statusText.textContent = "Chyba pri nahrávaní. Skúste znova.";  // Display error status
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
    } else {
 | 
					    } else {
 | 
				
			||||||
        alert('Tento prehliadač nepodporuje rozpoznávanie reči.');
 | 
					        alert('Tento prehliadač nepodporuje rozpoznávanie reči.');
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user