How to insert a pause in speech synthesis using grammar clues

Question

I am writing a simple spellchecker application using the SpeechSynthesis HTML5 API. The text that I would like to tell my application looks something like this: "The word spelling is" Cat. "The cat was chasing the dog."

The API strives to race without a long pause from the first sentence to the second. I wonder if there is a way to insert a little pause between the two sentences. I understand that I can create 2 separate statements and use the pause () call. However, the code would be simpler and less fragile if I could just insert grammar hints.

Usually in spoken English, as a rule, a pause is slightly longer between paragraphs. So I inserted a newline in my text, but there was no noticeable impact.

I also tried using ellipsis.

Is there a way to do this, or am I stuck breaking everything into separate statements?

Answer 1

Just insert

<silence msec="5000" /> 

in the text for 5 seconds of waiting ( Source ).

Disclaimer: This code only works in the corresponding user agent.

 // code taken from https://richjenks.com/dev/speechsynthesis/ var utterance = new SpeechSynthesisUtterance(), speak = document.getElementById("speak"), text = document.getElementById("text"); // Delay links and events because speechSynthesis is funny speechSynthesis.getVoices(); setTimeout(function () { // Add event listeners var voiceLinks = document.querySelectorAll(".voice"); for (var i = 0; i < voiceLinks.length; i++) { voiceLinks[i].addEventListener("click", function (event) { utterance.voice = speechSynthesis.getVoices()[this.dataset.voice]; }); } }, 100); // Say text when button is clicked speak.addEventListener("click", function (event) { utterance.text = text.value; speechSynthesis.speak(utterance); }); 

 <textarea id="text" rows="5" cols="50">Hi <silence msec="2000" /> Flash!</textarea> <br> <button id="speak">Speak</button> 

Answer 2

Ive found that inserting synthetic pauses using commas is very useful (like creating other manipulations). Here are some excerpts:

 var speech = new SpeechSynthesisUtterance(), $content = document.querySelector('main').cloneNode(true), $space = $content.querySelectorAll('pre'), $pause_before = $content.querySelectorAll('h2, h3, h4, h5, h6, p, li, dt, blockquote, pre, figure, footer'), $skip = $content.querySelectorAll('aside, .dont_read'); // Don't read $skip.forEach(function( $el ){ $el.innerHTML = ''; }); // spacing out content $space.forEach(function($el){ $el.innerHTML = ' ' + $el.innerHTML.replace(/[\r\n\t]/g, ' ') + ' '; }); // Synthetic Pauses $pause_before.forEach(function( $el ){ $el.innerHTML = ' , ' + $el.innerHTML; }); speech.text = $content.textContent; 

The key is to first clone the contents of the node so that you can work with it in memory, rather than manipulate the actual content. It seems to me that this works very well for me, and I can control it in JavaScript code, and not modify the source text.