Forum Discussion
Text-to-Speech in Storyline using JavaScript with playback controls
Text-to-Speech in Storyline using JavaScript with playback controls.
I'm sure there are plenty of ways to do this, but here’s how I got it working. I’ve put together a short guide for fellow Articulate Storyline enthusiasts, including:
🎤 A quick demo
📜 The full script
📝 A concise explanation of how it works
Feel free to repurpose and build on it!
Well done, Daniel! Thank you for sharing. While there are a few reasons I wouldn’t prefer using SpeechSynthesis, the limitations you listed being my first concern. Also, for me, it feels inconsistent if some text within the same course is read by SpeechSynthesis voice while other voices generated by ElevenLabs in Storyline are also being used. Another issue is that SpeechSynthesis may interfere with screen readers. Some screen readers may pause or get disrupted when speechSynthesis.speak() runs, depending on the browser and OS. The variables can still be read using an ElevenLabs voice if connected to a personal API, as shown in the short video attached here.
For what it's worth, I encourage others to try it, as SpeechSynthesis is supported by all modern web browsers. Again, I appreciate you putting in the effort to demonstrate how this can be integrated into Storyline if needed.ThanksNedim for your input! Just to clarify, I haven’t suggested mixing speechSynthesis voices with externally generated audio, this guide is focused entirely on a free, non-API solution for real-time text-to-speech in Storyline.
I’ve tried API-based approaches like ElevenLabs, and they certainly offer higher-quality voices. However, they come with setup requirements, API costs, free tier limitations and potential latency that some users might want to avoid.
As for speechSynthesis interfering with screen readers, have you encountered this issue firsthand, or is it something you’ve seen documented? In my testing, it behaves fine in most browsers, but I’d be interested in hearing more about specific cases where it causes problems.
If you’ve found a better free alternative that doesn’t rely on paid APIs, or those with free tier limitations, I’d love to hear about it! Otherwise, for those who need a simple, built-in TTS solution without external dependencies, speechSynthesis still seems like a solid option.
Thanks, Daniel, for your reply. At the end of my post, I actually encouraged others to try and follow your example because I truly see its potential. I only mentioned that I personally wouldn't prefer SpeechSynthesis over the other voices available in Storyline, such as Neural and the newer ElevenLabs voices. These are already included in the subscription with no hidden costs.
The main limitation is that neither of these built-in voices can read variable values, which is why your solution is particularly useful—especially for those who don’t use any other paid service. And you’re right, there’s no better free alternative. To read variable values, I personally use the ElevenLabs API instead, but only because my company covers the cost.
If you’ve tested this with a screen reader and didn’t encounter any issues, I have no reason to doubt you. I only expressed my concern that it may interfere, but you’ve shown otherwise. I appreciate the clarification.
Good luck with your future projects!
