Using JavaScript for text to speech

Thank you for sharing, Mark! :)

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

Thanks so much for the information and your response, Danny!

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?

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

Hi Joanne

I can hear audio in both links accessed from your post above and I was able to type in text to test how it sounded - worked fine.

Hi Wendy, I think it's all because of browsers. Both of the links don't work on google chrome. One of them doesn't work on IE. Now I viewed the demos on Firefox and both of them worked well. 

Great example Mark, thanks for sharing this

Thank you for sharing !

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/

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

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);

You welcome and thanks for the update

Thanks for sharing this creative and awesome example, Mark!

Mark, thanks for sharing and explaining. Darren, thanks for sharing the update version.

That's awesome!

Thanks for a great share, just need to figure out where to use it now!

Hi, all -- I just wanted to pop in an note for anyone who may not be aware that while we are not able to provide support for any JS coding, here is our Best Practices sheet for anyone who may like to take a look. :)