First time trying AUDIO TRIGGERS

Jul 28, 2022

James W Henry
By James W Henry

Searching the archives the past few days, I see about a million people have asked some version of "How to get audio to play across all slides?"  But I couldn't find anything on my music-related question:

What's the step by step to show an image on a slide, and have the user be able to click my "play" button (beneath the image) to play the audio I've associated with that image?

They also need to stop the playback with the "stop" button I've created. I have no plans for a rewind, pause or fast forward button. The course is related to audio, so these audio clips are not just background music for the course. Once they've played the audio (and maybe replayed it  a couple times) they can click NEXT and move to the next slide.

I'm relatively new to the platform less than a year, but I know this has something to do with layers and triggers. Can someone give me a Dummy's walkthrough for this specific challenge? Trial and error and Googling is not serving me well so far, going on 2 days now.

Appreciate being spoon-fed a solution. THANKS!

14 Replies
Maria Costa-Stienstra
over 1 year ago07/28/22 at 2:34 pm (UTC)

Hi, James.

Thank you for reaching out!

I created a short Peek 360 recording (3mins) with an overview of using audio triggers. In my example, I used the Text-to-speech audio, but the same steps would apply to an audio file you insert from your computer or record from within Storyline.

If you want to only have one button that plays and pauses your audio, you can use the steps in the article below:

I hope this helps!

James W Henry
over 1 year ago07/28/22 at 11:57 pm (UTC)

Hi Maria-
Thank you so much for the detailed reply and walkthrough. Apparently I went
down the wrong path based on wrong assumptions of how to approach this.
I'll get back to you again once I've applied the steps you outlined, or if
I run into any other issues.

The peek screenshare was much easier for me to process than the
triggers/toggle tutorial at this point. But I think I just need more
experience using that functionality.

Once again, I really appreciate the time you took to help me out with this,
and I'll check in with you again with my results.

James

Maria Costa-Stienstra
over 1 year ago08/03/22 at 1:05 pm (UTC)

Hi, James.

Thank you for the recording and update on where you are in the project!

A few tips:

  • For your hover, it's better to use a transparent fill on a shape, than no fill.

    Think of a window:

    • Shape with no fill = window open. You can touch the frame of the window, but the middle is open.
    • Shape with transparent fill = window closed. You can touch both the frame and the glass.

You want to make sure the shape has a fill, and then you can adjust it to 100% transparency. This will help with the hover behavior in your project. See below:

In the preview below, the top object has no fill, and the bottom one has a transparent fill:

You also asked about the different states. Take a look at the articles below for information on built-in and custom states:

I hope this helps!

James W Henry
over 1 year ago08/04/22 at 12:54 am (UTC)
Hi Maria. That tip about filling with transparency worked like a charm. Thanks much! 
 
One thing- it seems that works for "shapes", however, I have another slide where the play/pause/stop objects are actually "icons". When I explore the format of those objects, their status is already "filled" (not "no fill"). 
 
The tricky thing is that these icons have transparent-looking spaces within them. And playing around with the "fill color" doesn't affect those spaces, but changes the color of the solid portions. The point is, mousing over the transparent spaces is treated like actual no fill by the cursor. To make it odder, this only happens with the play and pause icons, not the stop icon (even though it too has open space within it).
 
Quick Peek attached.  Thanks!
Maria Costa-Stienstra
over 1 year ago08/04/22 at 1:56 pm (UTC)

Hi, James.

A quick way to solve the issue with the icons having spaces is to insert a transparent shape that covers the icon in its Normal state. 

In the example below, I left the outline on to make it easier to show you, but you can remove it, so the icon looks exactly the same as before:

Shape around icon in Normal state

You can also take a look at this conversation for additional suggestions:

I hope this helps!

James W Henry
over 1 year ago08/06/22 at 1:51 pm (UTC)

The transparent shape overlay worked like a charm, Maria. Thanks heaps!

Now I'm still working on other elements of the project. But I think I've
gotten a handle on the issues that were throwing me off initially.

Will update you later if you're interested.

Thanks again!

James

Sign In to Reply