Forum Discussion

JasonDalrymple's avatar
JasonDalrymple
Community Member
5 months ago

Targeting Text to Speech (TTS) with JavaScript

I'm new to the nuances of Storyline, having used another tool for a very long time, and am still getting my feet wet, so be gentle :)

In the course I'm working on, we're using text to speech for narration, but for accessibility reasons, want users to have the ability to turn "narration" on or off. My initial thought was setting up an autoplay "on/off" variable controlled by a check box at the beginning of the course. Then, with a trigger at the slide level, use JavaScript to target the audio to pause or stop the audio when the variable is set to "off". This would allow me to add the trigger to the slide master and not have to copy/paste or manually add a trigger to every slide as it's created.

That said, I do know I can do it using the pause or stop media trigger, or a pause timeline trigger. However, the former solution means manually adding the trigger to every slide. The former solution isn't viable, since it pauses ALL actions on the timeline and "breaks" a zoom function I'm using.

Am I missing or something or are all my sources that say you can't target the TTS with JavaScript correct? And, if they are correct, could we add that as a feature request for future release?

Thanks!

accessibility
advice
Articulate 360
e-learning development

1 Reply

  • JasonDalrymple's avatar
    JasonDalrymple
    Community Member
    4 months ago

    For those that may be looking in the future, a colleague helped out with this and changed my perspective completely. Instead of attempting to pause/play, he uses "mute" and targets the audio. With a combination of a check mark updating a variable that goes to an Execute Javascript, I was able to allow users to mute the audio through the entire project.

    The check mark is on the first slide and sets the variable "autoplay" to "off" if selected. Then, the Execute Javascript on the page will mute the audio if autoplay = off using the following code:

    "var player = GetPlayer();
    var autostart = player.GetVar("autoplay");

    var appState = window.DS ? DS.appState : require("helpers/appState");
    var currentVol = appState.currentVolume(); // 0 = muted, 1 = full volume

    if (autostart === "off") {
        // Force mute if not already muted
        if (currentVol !== 0) {
            appState.onToggleVolume();
        }
        window.startAudioOff = true;

    } else if (autostart === "on") {
        // Restore to full volume if muted
        if (currentVol === 0) {
            appState.onToggleVolume();
        }
        window.startAudioOff = false;
    }"

     

    I added this to the top level Master slide so that it "trickles down" the heirarchy and so I don't have to add it to every slide manually.