Speech Synthesis

Stephen · **Posted:** September 6th, 2016, 5:01 pm

Has anyone tried to implement speech synthesis (text to speech) in an Opus HTML5 pub?

As far as I know speech synthesis currently only works in a Chrome browser.

Here's an online demo: https://codepen.io/matt-west/pen/wGzuJ

Looks very useful to improve accessibility (for example, for visually impaired users) but I don't have a clue how to get it working in an Opus HTML5 pub (or if it even can work?).

mackavi · **Posted:** September 7th, 2016, 9:06 am

Rule #11 - There is no box: http://www.live.interaktiv.co.uk/?article=tips

1. Create an Opus Text Input with the variable 'mySpeech'
2. Create an Opus button with an Opus Script Action and add the following code:

Code:

window.msg = new SpeechSynthesisUtterance(window._DWPub.mySpeech);
window.speechSynthesis.speak(window.msg);

3. Publish. Chrome Only!

Enter text, click button & enjoy flashback to 80's Speak and Spell.

</mack>

Stephen · **Posted:** September 7th, 2016, 12:44 pm

Hi Mack,

Thanks for this.

Yes, the voice is a little mechanical, robotic. Also have noticed with any implementation that I've tried (not just using Opus) that the first time the speech synthesis screen opens, the first word or so is cut off (it picks up in the middle of the text). Then if played again, it speaks successfully from the beginning. I wonder if this is a glitch in Google's speech engine? Need to figure out a work around.

Found some online materials to customize voices, etc. (for example, here: http://blog.teamtreehouse.com/getting-s ... thesis-api), but so far, can't seem to correctly script to change the default voice to another voice.

mackavi · **Posted:** September 8th, 2016, 11:48 am

Because of the way Opus exports JS, it is sometimes necessary to move more complex functions to an external JS file and just call them passing parameters from Opus.

In an external file:

Code:

function googleSpeak(mySayWhat,myVoiceName){
  var msg = new SpeechSynthesisUtterance(mySayWhat);
  msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == myVoiceName; })[0];
  speechSynthesis.speak(msg);
}

Then call the function from a standard Opus Script Action or Object:

Code:

window.googleSpeak("hello world","Google UK English Male");

Note:
Not stable - API seemed okay for voices but crashed on changing other voice settings.
Again Chrome (maybe Android) only. Coming to Firefox 49 apparently.
Although this is open standard, will Google focus on their Cloud Voice tech instead?

</mack>

Stephen · **Posted:** September 8th, 2016, 1:19 pm

Thanks, Mack.

Did try this as suggested (created an external JS-"speech.js"-with this function, placed it in the published folder, linked it in the publish settings "head" section with <script src="speech.js"></script>, and called it using a button with the function call in an Opus script object), but didn't work. Must have done something wrong.

May be related to Google speech synthesis bug, see: http://code.tutsplus.com/tutorials/let- ... -cms-24971
specific remedy (run get voices more than once):

Code:

// Tell Chrome to wake up and get the voices.
speechSynthesis.getVoices();
 
setTimeout(function () {
    // After 1 second, get the voices now Chrome is listening.
    speechSynthesis.getVoices().forEach(function (voice) {
      console.log('Hi! My name is ', voice.name);
    });
}, 1000);

Will keep trying to get it to work.

BTW Thank you for mentioning FireFox 49 speech synthesis which will be fully implemented (due for public release 9/13/16). I tried out the BETA, and unfortunately speech synthesis at this pre-release time is as buggy as the Google version. Hope it improves.

Stephen · **Posted:** September 14th, 2016, 1:04 pm

An update on Speech Synthesis:

Spent a few days trying different strategies, work-a round's, researching online. An apparent bug for changing voices in Chrome is best worked around by changing voices within an onvoiceschanged function, calling it twice: once on the first page as onShow,

Code:

window.speechSynthesis.onvoiceschanged = function() {
voices = window.speechSynthesis.getVoices();
}

then, on the second page, within a button, within (for my project's purposes) a loop until page changes, this time setting the new voice as default.

Code:

window.msg = new SpeechSynthesisUtterance(window._DWPub.mySpeech);
window.speechSynthesis.onvoiceschanged = function() {
    voices = window.speechSynthesis.getVoices();
}
window.msg.voice = voices.filter(function(voice) { return voice.name == 'Google UK English Female'; })[0];
window.msg.rate = .6;
window.speechSynthesis.speak(window.msg);

Works well.

Digital Workshop

Speech Synthesis

Who is online