HTML5 speech synthesis missing some text when reading

Question

I am trying to read(voice out) a web page with HTML5 speech synthesis. But it reads only few characters in the line. What would be the best option to read huge text. Is there any limitation with html5 speech synthesis?

My fiddle is here

// Create the utterance object
var utterance = new SpeechSynthesisUtterance();
utterance.text = 'Just wanted to share my experience with the new dropbox option available.When I was trying to get some info before I opted for Dropbox, I could hardly find any motivation or any experiences shared, so I though of sharing my experience so that it might help others.To be on safe side, take the original and one copy of all the documents.';

// optional parameters
utterance.lang = 'en-GB'; // language, default is 'en-US'
utterance.volume = 0.5;   // volume, from 0 to 1, default is 1
utterance.rate = 0.9;     // speaking rate, default is 1 

// speak it!
window.speechSynthesis.speak(utterance);

Answer 1

This works for me using Chrome 104 and Firefox 103 on Windows 10 with RAM at 53% of 16 GB in a HP Notebook 15-db0800nd with AMD Ryzen 3 2200U with Radeon Vega Mobile Gfx 2.50 GHz:

const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
const saying = new Set()
function say(s, rate=1.0, pitch=1.0, lang="en-US", volume=1.0){
    // rate: (0.1,10), pitch: (0,2), lang: BCP 47 language tag
    // So 0.1 < rate < 10, see https://en.wikipedia.org/wiki/Interval_(mathematics)
    const u = new SpeechSynthesisUtterance(s)
    u.lang = lang
    u.pitch = pitch
    u.rate = rate
    u.volume = volume
    saying.add(u)
    u.onend = e => {
        saying.delete(e.utterance)
        if(saying.size < 1) [...document.getElementsByClassName("say")].forEach(e => e.disabled = false)
    }
    speechSynthesis.speak(u)
}
async function say_all_via_sleepy_jack(s){
    say('a', 9, 1, "en-US", 0)  // Wake sleeping audio jack.
    await sleep(1500).then(()=>say(s))
}
//let bad = setInterval(()=> say("Hello good morning"), 15000) // 13000 intermittendly.
let good = setInterval(()=> say_all_via_sleepy_jack("Hello good morning"), 15000)

Alternatively, keep this playing to avoid the speech delay:

<audio autoplay loop id="woke">
    <source src="silent.ogx" type="audio/ogg">
    Your browser does not support the audio element.
</audio>
<script>
    addEventListener('mousedown', ()=>window.woke.play())
</script>

In both cases you need to click on the page first to enable audio.