Forum Discussion

MichaelCarlino-'s avatar
MichaelCarlino-
Community Member
15 days ago

Javascript API and Audio

I noticed that audio will be assigned an object number.  Is it possible, then to trigger audio using JavaScript currently in Storyline?  I am creating training that the audio will trigger when a variable number changes.  Because there will be 15 audio tiggers, I was hoping to use JavaScript to track the changes in the variable and fire the corresponding audio track to the variable number.  

 

If i have to do it manually that is fine but was just wondering

 

 

 

1 Reply

  • Although SL will produce an ID for the object() function when prompted for an audio track, it does not seem to be assigned to any audio. So the short answer is no, the JS API cannot control the audio.

    The audio can be controlled via JS if you wish, but there are some drawbacks.

    1. Playing, pausing, reloading audio via JS seems to disconnect the audio from any slide triggers, so it will no longer be accessible by the SL slide
    2. You will need to control the state of each audio track, including when it plays or pauses, whether it plays, pauses, or resumes when the browser tab changes or is minimized, and preventing overlapping audio.
    3. All of the audio for all the scenes loads together in the SL frame (all audio for all slides).
    4. The clips have randomized filenames, so you would have to reliably determine which clip is which to know the one you want to play at any given time.
      1. Audio not actually part of the current slide seems to be re-encoded as base64 rather than named, so there is that.

    All the available audio clips can be accessed using:

    document.getElementsByTagName("audio")

    Controlling the audio can be done using the resources described at https://www.w3schools.com/jsref/dom_obj_audio.asp.

    Telling the clips apart could be done in different ways. 

    1. Order of the slides and order placed on each slide possibly, although I have not found this very reliable
    2. Check the .duration property of each clip and match it to a list, if the durations are sufficiently unique.
    3. Check the audio entries in the array from window.DS.presentation.assetLib().models and match .attributes.fileSize to a list if sufficiently unique
    4. Publish to web, open the 'story_content' folder, and manually identify which clip is which. Make a list of filenames to cross reference with the .src property of each clip.
      1. The filenames should be stable, unless you add or replace an audio clip
    5. This is more than you want I'm sure, but for completeness: Export a copy of the story.xml file from the .story project file
      1. Copy project
      2. Rename copy with .zip extension
      3. Open archive
      4. Copy 'story/story.xml file'
      5. Copy contents into https://jsonformatter.org/xml-formatter
      6. Copy output into text editor
      7. Follow directions given in this post to match filenames directly with the randomized names assigned during publishing: hashed filenames in published output | Articulate - Community

    For a few clips, fairly easy. For a lot of clips across many slides, doable, but need to plan.