Forum Discussion

KeithTrodden-48's avatar
KeithTrodden-48
Community Member
2 months ago

How to play audio files by hovering over text

Hi all,

For all you Javascript gurus out there... I am trying to create a storyline file that caters for accessibility and in this case plays a unique audio file every time you either hover over or click a piece of text on the screen and then stops when you hover or click on another line of text. For example, if you had 2 headings on the screen saying "Section One" and "Section Two", the respective audio will play for these.

Now, I went on Microsoft co-pilot and asked it the following:-

"Write a javacript function in Articulate Storyline where if you click on a some text, it plays an audio file, let's say that this is called sound1.mp3 but if you click on another piece of text, sound2.mp3 plays and sound1.mp3 stops."

It actually wrote some javascript and gave me instructions how to implement it within Storyline. So... I went ahead and done this, tested it and found out that for some reason it is not working! I have looked at the javascript and for the life of me, I cannot see why this cannot work!

I have attached the source file if anyone would like to take a quick look!

Thanks in advance

accessibility
Articulate 360
e-learning development
General E-Learning
  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    2 months ago

    While you can do what you asked entirely in JavaScript, it would be cumbersome to set up and maintain across many slides and is probably not the best approach. All you really need to do is use the Storyline click and hover triggers to play your desired audio clips. You can set the audio to automatically stop upon hovering out, or you could use the script shown below to stop all playing audio on your slide. The script could be useful if, as you say, you want to stop an arbitrary previously playing audio before starting a new one.

    const audioList = document.querySelectorAll("audio");
for (let i = 0; i < audioList.length; i++) {
	audioList[i].pause();
}

    I would create one such Execute JavaScript trigger set to run when a true/false variable changes. Then, for each click or hover event you want to play a new audio, toggle this variable before starting the new clip.

    Note: A main problem with the script you generated is that it is trying to use the SL text labels as IDs to find the elements. The objects in SL generally have random character strings as IDs, or sometimes no IDs. You have to examine your slide content in the browser inspector before deciding how you will go about identifying the parts.

Related Content