Forum Discussion
Custom Play/Pause Button in Storyline
Hi all. I'm trying to customize a button that switches between play and pause when it's selected. Just a little guff on my end, accessibility rules dictate that audio should not automatically play when a learner lands on a page. One reason is that those using a screen reader will be bombarded with audio. Learners must have manual control. I don't understand why videos don't auto start but audio does by default. Anyway, since I have to add a button to control when the audio plays, I would like it to both play and pause an audio file.
I've attached a demo page and I was wondering if anyone had time to take a look and let me know why the triggers aren't working and/or what I'm doing wrong. I have a Normal state with a play audio icon, I created a custom Pause state that has the pause icon, and there are six triggers.
Thanks so much!
There is only one default "Hover" state, but I wouldn’t use it in this case as it may interfere with the "Normal" and "Selected" states. Instead, you can create a "hover" effect using another element that shows or hides when you hover over the Listen button. For example, you could add a glow or shadow effect by placing a shape under the Listen button to achieve the desired effect. A cursor change would be sufficient as well.
There is only one default "Hover" state, but I wouldn’t use it in this case as it may interfere with the "Normal" and "Selected" states. Instead, you can create a "hover" effect using another element that shows or hides when you hover over the Listen button. For example, you could add a glow or shadow effect by placing a shape under the Listen button to achieve the desired effect. A cursor change would be sufficient as well.
That's terrific! Thank you so much!
Technically, all you need is the Listen button "Normal" and "Selected" state...
...and a trigger
Hmm, I deleted the old triggers and added the one you suggested and it's not pausing the audio or changing the state to the pause button. Instead of creating a Selected state, I kept the Pause state. This is my trigger:
Play audio LolaAudio
When the user clicks Listen button
if the state of Listen button = Normal
Else: Pause audio LolaAudioPlease check the .story file I attached in my earlier post. I deleted all the button states except for "Normal" and "Selected." When you click the button, it toggles between these two states. If the button is in the "Normal" state, clicking it switches to the "Selected" state (playing the audio). If it’s already in the "Selected" state, clicking it again reverts it back to the "Normal" state (pausing the audio). Adding a custom "Pause" state would not have any effect unless you specify a separate action or trigger for it, which would be redundant in this scenario. The "Selected" state is a built-in state that works automatically without additional triggers.
Ah! I didn't realize you had to remove the other states. Thank you! I may need to include the hover state as a visual indicator that it's selectable. I don't know if a cursor change is enough of a visual change. Is it possible to have two hover states?
