Articulate is constantly working to make their tools more powerful for users, and a recent update was a great example of this. With the latest version of Storyline 360, you can now customize the sound of the computer-generated narration when adding text-to-speech to your courses. How, you ask? Well, with the addition of speech synthesis markup language (SSML) formatting. Want to learn how to use SSML in your courses? Read on as we answer the “as heard in training” question: “How do I use SSML formatting in Articulate Storyline 360?”
The Text-to-Speech feature in Storyline 360 allows you to create natural-sounding human speech. With the addition of speech synthesis markup language (SSML) formatting, you can adjust the speech rate, pronunciation, pauses, and more.
SSML is very similar to HTML in its construction (HTML stands for “hypertext markup language,” and is used to tell web browsers how to format and display content). If you’re already familiar with HTML, then you’ll find SSML very easy to work with. And, if you’re not familiar with HTML, don’t worry, we’ll guide you through everything you need to know!
So, let’s start with the basics of HTML and SSML.
HTML and SSML
In HTML, you have an “opening tag” and a “closing tag” to indicate how you’d like your text to be displayed. For instance, to make a word bold in a sentence, you would use “<b>” before the word as an opening tag, and “</b>” after the word as a closing tag.
| So, in HTML, this sentence: The <b>house</b> is red. |
Will display on a webpage as: The house is red. |
SSML works similarly in that you add tags to edit text, but rather than influencing how the text is displayed, you influence how the text sounds when converted to computer-generated narration.
Tip: Not all tags work with every single voice/narrator, so make sure to test accordingly.
To make Storyline 360 aware that you want to edit how your text sounds, place a “<speak>” opening tag at the beginning of your text block, and a “</speak>” closing tag at the end. From there, you would use the appropriate SSML tag to change the text-to-speech narration to sound the way you want it to.
Let’s explore how this works in Storyline 360.
Using SSML to Adjust the Volume
One SSML tag that is pretty powerful is the <prosody> tag, which allows you to control the tone, speed, and volume of the generated speech. Let’s review an example of how to use the <prosody> tag to adjust the volume of a block of text.
On this slide, we created two buttons that, when selected, narrate quiz instructions. The first button does not use any SSML formatting, but the second button uses the <prosody> tag with the volume attribute to make the second sentence extra loud.
<speak>
You are now ready to take the quiz. <prosody volume=“x-loud”>You must answer all of the questions correctly to pass.</prosody> Select the Next button when you are ready to begin.
</speak>
You can compare the narration with and without SSML formatting here.
Note: Some tags have attributes and values you can specify. For example, the volume attribute has values of silent, x-soft, soft, medium, loud, and x-loud. (Alternatively, you can use specific decibel values, like “+5dB” or “-5dB”.) These attributes can be used to fine-tune what you’re trying to accomplish and should be considered when adding tags.
Let’s find out what else we can do with the <prosody> tag.
Using SSML to Adjust the Speech Rate
The <prosody> tag can also be used to slow down the rate of speech, which is a nice adjustment if you feel the text-to-speech voice speaks too quickly. We recommend using the rate attribute with this tag because it gives you more control over the speech rate, and allows you to find the exact rate you prefer.
In this example, the two buttons both narrate the phrase, “The quick brown fox jumps over the lazy dog.” While the first button doesn’t use SSML formatting, the second button uses the <prosody> tag and rate attribute to slow down the speech rate to 75%.
<speak>
<prosody rate=“75%”>The quick brown fox jumps over the lazy dog.</prosody>
</speak>
Go ahead and compare the differences in narration here.
Using SSML to Add Pauses
Another helpful tool is <break>. This tag allows you to insert pauses in the narration and control their length. When using the <break> tag, there’s no need for an additional closing tag since all the required information is included in just one tag. Here’s an example of how to use the <break> tag with the time attribute.
<speak>
Two roads diverged in a wood, and I —<break time=“.75s”/> I took the one less traveled by.
</speak>
This example inserts a pause of .75 seconds in the middle of the sentence. You can check out this example in action here.
This Is Great! How Can I Get Started?
To get started using SSML tags in your own text-to-speech, visit the official supported tags page on the Articulate website. From there, you can simply copy and paste the tags into your own courses to use them. Just remember to include the <speak> opening and closing tags so Storyline knows to look for and use your tags, and update the text accordingly.
A Note About Closed Captioning: SSML formatting is ignored when building the Closed Captions in Storyline 360. In other words, SSML formatting does not affect closed captions at all.
If you want to explore the examples we used in this post, download the exercise file and preview the slides. You can learn more about how the tags were implemented by opening the Text-to-Speech menu for the second layer of each slide.
Tip: To access the Text-to-Speech menu, first select the audio track, then go to the Audio Tools Options tab and select the Text-to-Speech button.
Do you have favorite tags you use in your courses? Have you found any specific attributes that make a tag work even better than it does by default? We’d love to hear your insights on this new feature, and hope it helps make your text-to-speech narration sound even better!
And Now for Some Quick Links!
For more on this topic, check out the following posts from Articulate and The Articulate Trainer blog:
Storyline 360: Converting Text to Speech
And for examples of supported SSML tags, refer to: Amazon: Supported SSML Tags
Until next time!
~ John
This is a step forward but really takes up much more development time. I think WellSaid gives us the same without all the work. They have a Beta out now where we don’t have to deal with tags or html.
Vyond also partners with WellSaid.
1. I think this is too much for instructional designers with a full load. Even though it allows greater control, it also requires a greater time commitment and more to maintain.
2. I will definitely stay with a plug and play that is much easier and you don’t have to fiddle with tags.
Nice try but I don’t think you are there yet.
Thanks, Evonn, for the comment! We will pass this on to the Articulate team on your behalf.
Great post. It’s a skill for the future to be sure. I agree it does add some time to development, but it also beats having to go to the studio to rerecord a piece. So, it all depends on the scope of the project and needs of the designer. WellSaid is yet another skill set and contract to learn and setup. I’m sure the system will improve over time.
Thanks, Mark – we’re so glad it was helpful!
Is there a list somewhere of which voices work with SSML tags? I’ve tried several, and I always get the “SSML not supported with this voice” message. The voice used in one of your examples, above, sounds like “Danielle,” but SSML doesn’t seem to be supported for her, when I attempt it…
Hi Sarah Jo, and thanks for your question! I wonder if we could take a look at your Storyline file to see what could be happening. Could you send us an email at training@yukonlearning.com so we can take a closer look? This is also a great place to review and make sure you are following these support tips and tricks: https://access.articulate.com/support/article/Storyline-360-SSML-Support. Thanks!
This was a great article and plan on diving into even more. Does this work with AI text to speech voices or just the normal text to speech.
So glad it is helpful, Michael! Here’s a link to a great reference chart from Articulate, showing which tags are available with which narration type: https://access.articulate.com/support/article/Storyline-360-SSML-Support?#supported-tags.