Text to Speech in Hype

Tips & Tricks
1

This is interesting…

HTML5 has text to speech & speech recognition options. Here’s the javascript code. for Text 2 Speech…

 var x = hypeDocument.getElementById('text').innerHTML;
 var u = new SpeechSynthesisUtterance();
 u.text =  x;
 u.lang = 'en-US';
 u.rate = .8;
 speechSynthesis.speak(u);

edited: with a voice selection…

 var x = hypeDocument.getElementById('text').innerHTML;
 var u = new SpeechSynthesisUtterance();
 var voices = speechSynthesis.getVoices();
 u.voice = voices.filter(function(voice) { return voice.name == 'Trinoids'; })[0];
 u.text =  x;
 u.lang = 'en-US';
 u.rate = .8;
 speechSynthesis.speak(u);

speaks.hype.zip (15.5 KB)

It needs some work but it has potential — (very limited browser support tho - just Safari, Chrome and partial in iOS)

6 Likes
2

super! thanx - the voice is funny :wink:

2 Likes
3

http://blog.monotonous.org/2015/04/14/reintroducing-espeak-js/ looks pretty powerful.

4

Looks good, especially the voices. But i think the next real event is Speech to Text to become more widely supported. That is what i am waiting for. Not found any library that will do this on all browsers yet :frowning:

5

I know this thread is really old but fingers crossed :crossed_fingers:.
I downloaded and tested the speaks.hype that Greg posted for us - Thanks @gasspence !
It seems to only read the original text Id asset, so I duplicated the scene and changed the text inside that same text field but it still only read the original text from the first scene.
Then I tried setting an inner html point and changed the text there, but it still only read the text from the first scene.
I'd like to set this up so that it will read different text on each scene. One sentence per scene would be better than none, but if I could get it to read a few different text boxes, that would be best.
I'm making an English language app for Japanese kids so this function would be great.
Making a separate js file for each sentence would be too much work to make it practical.
Any thoughts or work-arounds?
Thanks! :bowing_man:

6

The issue on why it won't work for more than one scene is this line from the text2speech() function:

var x = hypeDocument.getElementById('text').innerHTML

It is using getElementById and each entire document can only have a ID on a single element. Therefore it is looking at the single element from the first scene with the text ID.

If you want any given text element to speak when clicked on, you would just need to change this line to:

var x = element.innerText;

And accordingly add a mouse click action to Run JavaScript… with the text2speech() function.

There would be other solutions if you want a different controlling element, like a button that speaks from a different text element. Let me know if that's what you'd prefer and I can write that up.

2 Likes
7

Hey Jonathan! Long time!
Thank you. My meager JS knowledge led me to believe that was the problem but I couldn't find a way to fix it.
I changed var x as you said and I set a text field to hype's click action to run the javascript but nothing happened. The console error says :
HYPE-740.thin.min.js:84 Error in undefined: TypeError: Cannot read properties of undefined (reading 'innerText'HYPE-740.thin.min.js:84 Error in undefined: TypeError: Cannot read properties of undefined (reading 'innerText')

If I could get the app to read a text box that's been tapped or clicked on, it would be epic! haha

8

I'm not sure what the issue is just from the error; you're welcome to post an example zip of your .hype document.

Here's the one I used to test the suggestion:

speaks-element.hype.zip (39.7 KB)

1 Like
9

speech synthesis may be hard to work with in production, because browsersupport and -handling is still a thing:

10

Thanks I'll give it a try!

11

Thank you for the heads up.
In our case, my clients have to use Vivaldi so if it works on Vivaldi, I'll be good to go!

12

another forumlink from @MaxZieb

3 Likes
13

Thank you! :pray:
I tested both Jonathans and Max's files in Chrome, Edge, Vivaldi, Safari and Firefox. I was surprised to see (hear? - hehe) that both codes only worked in Firefox. I was hoping it would play nicely with the Chrome render engine :cry:.
Thanks guys! This code will still be very useful for stuff that I make for students in my school.

14

Works in Firefox, Chrome and Safari … at least for me.

15

but chrome had some issues speaking longer texts when i tested ... and the workarounds i found have been quite unreliable ... as far as i remember :slight_smile:

16

Hi Max! Really? Interesting. I'll try a gain. Thanks for chiming in!

17

My sentences are for beginner English students in Japan so the sentences are quite short.
Does changing the name of the voice in the code change the voice? Does anyone know of a list of voices the JS can access?
If it works for Chrome, it might work for Vivaldi so I'm getting a bit hopeful. Using mp3 is not realistic because of the number of text boxes.

18

See this page:

The demo shows all the voices available, but no doubt this is OS/Version dependent.

Also voices that aren't installed won't show up. The speaks-element.hype.zip seems to want Trinoids, but on my machine it just winds up using Alex since I don't have that.

(also the example I posted works in Chrome for me... maybe check the developer console log and see if there's any errors?)