Controlling Dynamically Populated Audio in a Webobject

Oct 05, 2023

I'm working on a dynamic course where all the content is loaded from offsite assets linked in text-boxes and webobjects, all assigned by JSON. I have everything working except for audio, which I can change to the proper URL, but I can't seem to assign control to onscreen buttons with.

If I have the webobject visible, the mp3 controls will work fine, but I need to be able to control it with UI buttons I created in Storyline.

I found this method on another topic here, which I've been successfully using to assign the source URLs of images: Creating Storyline elements dynamically - Articulate Storyline Discussions - E-Learning Heroes

The JS I'm using to target the webobject is as follows:
/////
var snd_sndPlay = "" + player.GetVar("urlPrefix_aud") + player.GetVar("snd1_snd_sndPlay");

var soundID = "playSlideAudio";

gsap.to(document.querySelector("[data-model-id='5nGl9i71LfP'] > div > div > iframe"),{attr:{src:snd_sndPlay}});
gsap.to(document.querySelector("[data-model-id='5nGl9i71LfP'] > div > div > iframe"),{attr:{id:soundID}});
////

By doing this, I'm able to set the source of the webobject to the proper URL, and as mentioned, as long as I use the buttons in the embedded sound webobject, I can play and pause the new audio. I'm also able to change the ID of the element as well.

 

When it comes to calling functions on it, I've been following this topic for procedure: Playing external audio files - Articulate Storyline Discussions - E-Learning Heroes

However, whenever I try and target the object in JS and call the play() or pause() methods, I keep getting a "play/pause is not a function" warnings in the console and the audio isn't being controlled. Here are some of the ways I've been trying to do this:
////
var audPlay = document.getElementById('playSlideAudio');
audPlay.play();

--or-- (once the audio has been played)

const audPlay = document.querySelector("audio");
audPlay.play();
////

I know in the example I looked at above, the audio object was created at runtime, and I haven't tried doing this myself yet. I'm pretty sure I need the deliberately positioned webobject to hold the audio due to how the slide is currently set up, but is that the reason why I can't seem to target the audio element with how I'm currently trying? Do I have to create it at runtime like in the original example or is there something I'm doing wrong with this method that can be fixed?

 

--Edit-- I'm not able to upload my current file at the moment as it's filled with client info and would need massive amounts of reworking.

2 Replies
Unity AllThingsMedia

Small update: Finally bit the bullet and reformatted the slide to use the dynamically created audio line as shown in the original example and I'm now able to control it with pause() and play() methods. It hasn't broken the slide by popping up an MP3 player, so I don't need to directly target an on-timeline webobject anymore.