Using JavaScript for text to speech

 

I was using the text to speech feature on my phone and came up with the idea of trying to emulate it using JavaScript(JS) and Storyline. I did some research and came across http://responsivevoice.org/ which is a text to speech JS library that's free for non-commercial use.

Text to speech sample

 

View Text to Speech

It took 6 lines of code to get it working.

First link the ResponsiveVoice.js

script=document.createElement('script');
script.setAttribute('src','http://code.responsivevoice.org/responsivevoice.js');
document.getElementsByTagName('head')[0].appendChild(script);

  Then when the play button is clicked play the text.

var player = GetPlayer();
var textToSpeech = player.GetVar("textToSpeech");
responsiveVoice.speak(textToSpeech);

And your done.

18 Replies
Danny Stefanic

Hi Mark,

It's really cool to see you using ResponsiveVoice. We actually built a specific add-on for SL2 that avoids common errors and issues authors have.

I tried your custom coded example http://markbennettdc.com/articulate_challenge/textToVoice/story_html5.html

in Internet Explorer and Chrome on Windows and there is an initialization issue which is why I recommend using the add-on.

If you have any questions, let me know here so the community benefits, or contact one of our experts in support

Kind regards,

Danny

Joanne Chen

Hi Mark, Thanks for sharing, this is exactly what I am looking for. However, in your demo, I entered text and press the button, but nothing happens (no audio).

I also downloaded the story file and published it. Again, no audio played no matter what text I entered. Do you know what might be the problem?

 

Joanne Chen

Hi Matthew, thanks for explaining. But I am wondering why I can hear another demo also created by Mark but not this one. The links seem to me are on the same server.

OK to hear speech http://markbennettdc.com/articulate_challenge/truths_lie/story_html5.html

no speech for this one http://markbennettdc.com/articulate_challenge/textToVoice/story_html5.html

 

Mark Bennett

I'm sorry for the late reply, I think they have come out with an updated script. They have also made a plugin using the notes tab of a silde

Using the notes tab tutorial

http://responsivevoice.com/wp-content/uploads/2015/08/RVASL-new/story_html5.html

If you want to use variables add a link to the script in the header of the published file

<script src="http://code.responsivevoice.org/develop/responsivevoice.src.js"></script>

Or create an excute javascript trigger to add it for you

script=document.createElement('script');
script.setAttribute('src','http://code.responsivevoice.org/develop/responsivevoice.src.js');
document.getElementsByTagName('head')[0].appendChild(script);

(Steve Flowers came up with a better method of adding scripts to the header)

Then create a button with an execute Javascript trigger on it

var player = GetPlayer();
var textToSpeech = player.GetVar("textToSpeech"); // storyline variable
responsiveVoice.speak(textToSpeech); // speaks variable

The Story file can be found here

http://markbennettdc.com/articulate_challenge/textToSpeech.story

and the API can be found here

http://responsivevoice.org/api/

 

 

 

Danny Stefanic

Hi Mark,

Thanks so much for providing that extra info for fellow authors!

ResponsiveVoice is in constant progress, recently we even created HTML5 talking avatars (which can be used in Storyline too) http://bringto.life

The support team at ResponsiveVoice are always ready to help if anyone needs extra assistance, and I'm glad to see the "how-to" being shared with the community here as well. Most people still don't realize you can create text to speech directly in the browser, it opens up so many possibilities for dynamic learning content (which couldn't be narrated in advance)!

Kind regards,

Danny

ResponsiveVoice.com

Darren Heath

Been playing around with your example this morning Mark.

Translations and localised versions are something we are always having to do and as most of our content has audio narration on slides it becomes expensive re-recording.

Ive made a small amendment to your example and created button triggers to speak the text entered on the slide content in the desired language/accent. This small example works a treat and I am already thinking of how we can create dynamic, localised content rather than multiple individual outputs of modules. Thanks again for sharing

var player = GetPlayer();
var textToSpeech = player.GetVar("TextEntry1");
var chosenvoice = player.GetVar("varVoice");
responsiveVoice.speak(textToSpeech, chosenvoice);