0

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?

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.