2024-10-21 10:04:20 +00:00
|
|
|
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) {
|
|
|
|
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
|
|
|
recognition.lang = 'sk-SK'; // Set language to Slovak
|
|
|
|
recognition.interimResults = true;
|
|
|
|
recognition.maxAlternatives = 1;
|
|
|
|
recognition.continuous = true;
|
|
|
|
|
|
|
|
let recognizing = false; // Recognition state
|
|
|
|
let startTime; // To store start time of recording
|
|
|
|
let timerInterval; // For the timer
|
|
|
|
let transcriptHistory = []; // Store transcripts
|
|
|
|
|
|
|
|
// Start/stop speech recognition with button
|
|
|
|
startBtn.onclick = () => {
|
|
|
|
if (!recognizing) {
|
|
|
|
recognition.start();
|
|
|
|
recognizing = true;
|
|
|
|
console.log('Waiting for microphone permission...');
|
|
|
|
startBtn.textContent = "🛑 Nahrávanie..."; // Button shows "Recording..."
|
|
|
|
statusText.textContent = "Nahrávanie prebieha...";
|
|
|
|
} else {
|
|
|
|
recognition.stop();
|
|
|
|
recognizing = false;
|
|
|
|
console.log('Speech recognition stopped');
|
|
|
|
startBtn.textContent = "🎤"; // Button returns to original state
|
|
|
|
statusText.textContent = "Nahrávanie ukončené.";
|
|
|
|
stopTimer(); // Stop timer
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// 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() {
|
|
|
|
console.log('Speech recognition started');
|
|
|
|
startTimer(); // Start the timer
|
|
|
|
statusText.textContent = "Nahrávanie prebieha..."; // Recording status
|
|
|
|
};
|
|
|
|
|
|
|
|
// Handling the results of speech recognition
|
|
|
|
recognition.onresult = function(event) {
|
|
|
|
let interimTranscript = ''; // To display interim results
|
|
|
|
|
|
|
|
for (let i = event.resultIndex; i < event.results.length; i++) {
|
|
|
|
const transcript = event.results[i][0].transcript;
|
|
|
|
|
|
|
|
if (event.results[i].isFinal) {
|
|
|
|
transcriptHistory.push(transcript);
|
|
|
|
inputText.value += transcript + ' '; // Append final transcript to text area
|
|
|
|
} else {
|
|
|
|
interimTranscript += transcript; // Update interim transcript
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Show interim results combined with final results
|
|
|
|
inputText.value = transcriptHistory.join(' ') + ' ' + interimTranscript;
|
|
|
|
};
|
|
|
|
|
|
|
|
// When recognition ends
|
|
|
|
recognition.onend = function() {
|
|
|
|
if (!recognizing) {
|
|
|
|
recognizing = false;
|
|
|
|
console.log('Speech recognition ended');
|
|
|
|
stopTimer();
|
|
|
|
startBtn.textContent = "🎤"; // Restore button to original state
|
|
|
|
statusText.textContent = "Nahrávanie ukončené."; // Update status text
|
|
|
|
} else {
|
|
|
|
recognition.start(); // Auto-restart recognition if not manually stopped
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// Handle recognition errors
|
|
|
|
recognition.onerror = function(event) {
|
|
|
|
console.error('Speech recognition error:', event.error);
|
|
|
|
recognizing = false; // Stop recognition on error
|
|
|
|
stopTimer(); // Stop timer
|
|
|
|
startBtn.textContent = "🎤"; // Restore button to original state
|
|
|
|
statusText.textContent = "Chyba pri nahrávaní. Skúste znova."; // Display error status
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
alert('Tento prehliadač nepodporuje rozpoznávanie reči.');
|
|
|
|
}
|
|
|
|
});
|