Voice Recognition and Storyline Example

UPDATE: To answer some questions, I have created a better, improved example that doesn't require any external files and wrote a step to step guide on how to implement this - https://elearningdifferently.com/speech-recognition-and-storyline

 

 Dear all,

 

This morning, I thought it would be nice to make some quizes I build more fun and make learners to answer by voice. There are already some topics created on this from awhile ago, but most links are dead.

 

I have build a fresh example - https://elearningdifferently.com/voice/story.html

 

 

 

I am attaching source files for 360 with scripts in the ZIP below. Hope you will find it useful. And thank you to this blog post on explaining how to web speech API work.

 

 

 

P.S. Web speech API is supported only with Chrome.

 

20 Replies
Elke Sundermann

Okay, I used this web object in my modules, but I'm not sure how to make them work with an essay question.  Yours was looking for the specific word "four", but it still recognized my answer of "blah blah blah" and recorded it in text.  I'm a bit confused as to what I'm doing wrong on this.  Thank you in advance for any help!

Matthew Bibby

The problem is that the Storyline file Matthew shared was linking to a web object that was stored on his server. It looks like the web object has either been deleted or his server won't allow us to access it from a different domain (which is a pretty common security restriction).

Anyway, to make this work in your course here's what you need to do:

  • Take the vars.html, mic.gif, mic-slash.gif and mic-animate.gif files and upload them to your server.
  • Edit the web object in the Storyline course and point it to the vars.html file that you just uploaded.
  • You'll also need the right variables in your course to get the text back from the Web Speech API.

If you want to make other changes (such as getting rid of that purple background, changing the error messages and so on) you'll need to edit the JavaScript, CSS and HTML that drives the whole thing.

I've republished Matthew's example here so you can test this in Chrome

Matthew Terentjev

Hi all,

Apologies, and thank you to @Matthew Bibby. It should be sorted now. Site were this demo was hosted is now in the Maintenance mode for redesign, so links died. I have made the links from original post to work again. So it should work now in Chrome ;)

https://elearningdifferently.com/voice/story_html5.html

If you are using this in your work, I would advice to download .zip example from the top post and host all elements on your own site/server. vars.html needs to be hosted online and referenced in the Storyline's project iframe, to evaluate voice using Speech API. Hosting this on your own location means you will have full control and prevent it breaking when my links eventually expire....

Matt.