Replaying A Dynamically Generated Audio Track And Checking Playback State

Replaying A Dynamically Generated Audio Track And Checking Playback State

Let’s assume that through the previous action you have dynamically generated an audio clip through the ElevenLabs API which has been stored into a Storyline text variables named AudioDataURL.

Using a completely different Execute JavaScript trigger, which you could activate anywhere on the slide (such as when the user clicks a button) you could have this audio file play in the browser by using the following script:

Example JavaScript For Replaying Stored Audio Data And Checking Its Playback State

var audioUrl = getVar("AudioDataURL");
var audio = null;

  // Check if the audio object already exists, if not create a new Audio instance
  if (audio === null) {
    audio = new Audio(audioUrl);
  } else {
    audio.src = audioUrl;
  }

  function playAudio() {
    audio.onplay = () => {
      setVar("AudioState", "Playing");
    };
    audio.onended = () => {
      setVar("AudioState", "Stopped");
    };
    audio.play().catch(error => console.error("An error occurred when trying to play the audio:", error));
  }

playAudio();

As well as playing the audio track itself in the browser, we have also introduced an onplay and onended event listener for the audio object which will update an Articulate Storyline variable which we have set up in our project (named AudioState) to either “Playing” whilst the audio track is playing, or Stopped when the audio track has ended.

Through these variable changes we can control other actions on our slide which we might want to happen depending on whether the audio is playing or not, such as a play button icon changing from a ‘play’ to ‘pause’ symbol, or the play button itself being disabled whilst the audio is still playing.

It is this flexibility of control that you can develop within your project which makes projects like our Daisy AI Colour Palette Generator possible using the eLearning Magic Toolkit:

In this example, the audio track onplay event causes a layer to display on the slide containing the looping mouth shape effects to give the character a simple lip sync animation during the voiceover playback. As soon as the audio object has ended, and the onended event has activated, a trigger on the slide causes the lip sync animation to be hidden once again.

There are many more ways that you can work with the audio object generated via JavaScript this way, so have fun being creative in your own Storyline projects!

Read the rest of our Knowledge Base pages to make the most of eLearning Magic Toolkit.

0
38

Related Knowledgebase