Automating text to speech in javascript-CodePudding

In JavaScript I can get the experimental text to voice working in functions that are invoked through onl oad or onclick. It does not work when inside an interval timer. I guess that has something to do with setting up interrupts within an interrupt timer. Any suggestions for how I can have a spoken message once every minute.

The test I use is var speech = new SpeechSynthesisUtterance(“hello world”); Window.speechSynthesis.speak(speech);

I accept this feature only works on certain browsers and devices and is experimental but is also widely used.

I am trying to have an automatic spoken status report every minute for a monitoring application

CodePudding user response：

Actually, you can do this with setInterval. See the below example for one way of doing it.

var messages = ['Hello', 'world', 'It\'s me', 'Good day','How are you?','Download complete'];
var frequency = 3000;

var myInterval = setInterval(speak,frequency);

function speak() {
  let rand = Math.floor(Math.random() * (messages.length-1));
  console.log(rand);
  let speech = new SpeechSynthesisUtterance(messages[rand]);
  window.speechSynthesis.speak(speech);
}

I'm just randomly picking up words from an array, and speaking them every three seconds. You'd adapt the provided code to work as you need it to (utterance of your status every minute).

CodePudding user response：

Intervals works perfectly fine with the speechSynthesis API. Here is an working example:

speech = new SpeechSynthesisUtterance("hello world");
// say "hello world" every 5 seconds
setInterval(() => window.speechSynthesis.speak(speech), 5000)

If you want to check you monitoring updates before the the "text to speach" you can build something like this:

setInterval(() => {
  // Perform some calucation about the current status ...
  status = getStatusUpdateAsString();
  
  // Prepare speech
  speech = new SpeechSynthesisUtterance(status);

  window.speechSynthesis.speak(speech);
}, 5000)

CodePudding user response：

ok so the code snippet examples work only on certain browsers. The interrupt timer speech seems to fail in chrome but works on firefox. the speech without timers (e.g.on a button onclick) works on more browsers.

CodePudding user response：

Here is an example using the SpeechSynthesisUtterance end event, an AbortController, and setTimeout to automate a counter. You should be able to adapt it to your specific needs:

let count = 1
let controller = new AbortController()
const synth = window.speechSynthesis
const utter = new SpeechSynthesisUtterance(count)
const text = document.getElementById('text')
const onUtterEnd = () => {
  setTimeout(() => {
    count = count   1
    utter.text = count
    text.innerHTML = `<mark>${count}</mark>`
    synth.speak(utter)
  }, [500])
}
const start = () => {
  text.innerHTML = `<mark>${count}</mark>`
  controller = new AbortController()
  utter.addEventListener('end', onUtterEnd, { signal: controller.signal })
  synth.speak(utter)
}
const stop = () => {
  controller.abort()
  synth.cancel()
}

document.getElementById('start').addEventListener('click', start)
document.getElementById('stop').addEventListener('click', stop)

<button id="start">start</button>
<button id="stop">stop</button>
<p id="text"></p>

If you're using React check out tts-react for a custom control or hook.