Forum Discussion

JohnBlum's avatar
JohnBlum
Community Member
7 years ago

Show / Hide Audio Control for Selected Slides

Hi Everyone,

I am developing a series of courses with no narration, and have the audio control hidden on the player.  Some courses will have videos inserted in the slides.

For only those slides with videos, is there a way to show the audio control, while leaving it hidden on the remaining slides?

Thank you,

John

  • Hi there, John!  You can choose certain Player features at the slide level in the Slide Properties window.  The volume control will be enabled for all slides, however, if you have it checked in your Player settings.

  • JohnBlum's avatar
    JohnBlum
    Community Member

    Hi Crystal,

    The first thing I did was check the Slide Properties window.  

    I was hoping there was a setting somewhere that I missed.

    Thank you,

    John

    • SamWilliamson-e's avatar
      SamWilliamson-e
      Community Member

      Hey John,

      I believe the only way to hide the volume control per slide is using JavaScript, but it should be fairly simple. It's a bit annoying to test as you won't be able to check the results when Previewing in Storyline itself – you'll have to publish to see any 'Script in action – but this particular function shouldn't require too much iteration.

      Note: I believe this method will only work for HTML5 output, not Flash. Also, I can't vouch for it working in the new Modern player as I don't have Storyline 360.

      Essentially you're creating a custom Trigger Action to show/hide the volume control. So, add a Trigger to one of your video slides:

      Action: Execute JavaScript

      When: Timeline starts

      Object: [Your slide]

      Now click the ellipsis button next to Script and simply paste in the following:

      $('.btn.cs-button.volume').show()

      When your video slide starts it should now show the volume control! However, the control will stay visible until we turn it off again. I'd say the most thorough way to do this – not knowing how your course is structured or restricted – is to place a similar trigger on all of your non-video slides which ensure the volume slider isn't visible, using the following JavaScript:

      $('.btn.cs-button.volume').hide()

      As I said this code won't execute during Preview, but as long as you place the appropriate Trigger on every slide there should be little to no fiddling involved.

      Hope that helps.

       

      • MarkAnthonyChes's avatar
        MarkAnthonyChes
        Community Member

        Hello Sam!

        Great idea! How could I use the same approach but referencing a custom menu button in the player? 

        Any ideas?

        Thanks in advance!!!

  • RajShinde's avatar
    RajShinde
    Community Member

    You just need to changes your custom menu button ID in the code

    document.getElementById('link-right-0').style.display = 'none';

    • JieLinLee's avatar
      JieLinLee
      Community Member

      hello! i used this script in my e-learning module, the button appears for a mili second before it disappears. did that happen on your e-learning module? if yes, how is it resolved? TIA!

  • I need to do the same and hide the volume button on some slides, but I don't know the default button name in Storyline 360 to use it for the JS.  Can you help please?

     

    • JoseTansengco's avatar
      JoseTansengco
      Staff

      Hi T M, 

      Some community members have found success using the Javascript code below to hide the volume button in the Player: 

      document.getElementById('volume').style.display = 'none';

      I'll let other community members chime in to confirm if this is the correct object. We don't officially support Javascript, but I hope this points you in the right direction!