I have created slides in reveal.js, where each slide corresponds to 'section' elements. Within each slide there are 'span' elements including some text. I'm using Web Speech API for reading the text. Here is the JS:
const texts = document.querySelectorAll("span");
let currentTextIndex = 0;
let speaking = false;
// Function to start speaking the texts
function speakTexts() {
if (speaking && currentTextIndex < texts.length) {
const text = texts[currentTextIndex].textContent;
if (texts[currentTextIndex].className === "it") {
speakItalian(text);
} else {
speakText(text);
}
currentTextIndex++;
} else {
speaking = false;
}
}
// Function to stop speaking
function stopSpeaking() {
window.speechSynthesis.cancel();
}
// Event listener for slide change
Reveal.addEventListener('slidechanged', function(event) {
stopSpeaking(); // Stop speaking when slide changes
currentTextIndex = event.indexh * texts.length; // Set currentTextIndex based on the new slide index
speaking = true; // Set speaking to true when slide changes
speakTexts(); // Start speaking the texts on the new slide
});
// Function to speak text in English
function speakText(text) {
const speech = new SpeechSynthesisUtterance();
speech.lang = "en-US"; // language
speech.text = text;
speech.rate = 0.6;
window.speechSynthesis.speak(speech);
// Schedule the next speech after a 2-second delay
setTimeout(speakTexts, 2000);
}
// Function to speak text in Italian
function speakItalian(text) {
const speech = new SpeechSynthesisUtterance();
speech.lang = "it-IT"; // language
speech.text = text;
speech.rate = 0.6;
window.speechSynthesis.speak(speech);
// Schedule the next speech after a 2-second delay
setTimeout(speakTexts, 2000);
}
It works, but I need to have more control so that slides are synchronized with the speech. I also think that the delay of 2 seconds is not working properly. Any ideas?