Forum Discussion

JamesWHenry's avatar
JamesWHenry
Community Member
3 years ago

First time trying AUDIO TRIGGERS

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!

  • 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!

    • JamesWHenry's avatar
      JamesWHenry
      Community Member

      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

    • JamesWHenry's avatar
      JamesWHenry
      Community Member

      Thanks so much, Maria!

      Attached is my screenshare reply.

      James

  • Hi James,

    I'm so happy to hear that Maria was able to assist you with this! I wanted to quickly point out that I don't see an attachment included in your previous post. You can upload an image by selecting Add Attachment.

    First time trying AUDIO TRIGGERS - Articulate Storyline Discussions - E-Learning Heroes 2022-08-01 at 10.02.19 AM

    Please let me know if you have additional questions!

  • Hi, James.

    Thank you for your screen recording!

    I created a Peek 360 recording (3mins) with a couple of suggestions that I hope will work for you:

    1. Using layers (similar to what you have now)
    2. Using states

    Let me know if you have additional questions!

  • 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!

    • JamesWHenry's avatar
      JamesWHenry
      Community Member

      Maria - Been meaning to ask you: how did you create these mini screencap visual demos above? What are the steps? I really need to do this to explain functions and locations for my EFL students.

      • JoseTansengco's avatar
        JoseTansengco
        Staff

        Hi James, 

        Happy to step in here. Maria used a tool called Snagit to make short recordings that are then saved as GIFs. You can download it here if you want to check it out. 

  • JamesWHenry's avatar
    JamesWHenry
    Community Member
    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!
  • 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:

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

    I hope this helps!

    • JamesWHenry's avatar
      JamesWHenry
      Community Member

      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