MP3 Playback Volume

andrew-robertson
andrew-robertson Community Member Posts: 225 ☆ Superstar ☆
edited January 12, 2022 in Lectora Desktop
Is there a way to set the initial volume of an audio file to say 60% (0.6) and then allow the user to adjust accordingly?

I tried this: triv$('.audio').prop("volume", 0.1);
Andrew R.
Developing content since 2010 using a mixed bag of tools.

Best Answer

  • chrystalb21
    chrystalb21 Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 20 ✶ Headliner ✶
    Accepted Answer
    Hi Andrew,

    The code as is does have an error.

    If you have an appearance of audio on the audio player, you need to add audio, it would need to be triv$('.audio audio').prop("volume", 0.1);

    If there is no appearance, remove the period before audio: triv$('audio').prop("volume", 0.1);

    The other issue is the audio player needs to be available before the code is called. So if you it set to autoplay, you'd need to set up it up to change on load otherwise you'll run into problems if the audio takes longer to load.

    I got this to work partially by adding an on show action with a delay of .2 to the audio player, but when I tested for latency, it failed.

    Any one else have ideas?

Answers

  • carlfink
    carlfink Community Member Posts: 996 ✭ Legend ✭
    Maybe it's just me, but why does Lectora not let you set volume in an Action?
  • andrew-robertson
    andrew-robertson Community Member Posts: 225 ☆ Superstar ☆
    edited January 18, 2022
    @carlfink , I agree with you on this one. I searched high and low but couldn't find the setting.

    @chrystalb21 thank you for the code fix - I'll give it a try. As I say, I am no where near proficient in JS or JQuery - it's all Google University :smiley:
    Andrew R.
    Developing content since 2010 using a mixed bag of tools.
  • andrew-robertson
    andrew-robertson Community Member Posts: 225 ☆ Superstar ☆
    edited January 18, 2022
    @chrystalb21 - still no luck. It is a basic media player playing an MP3 file. I currently have it not set to autoplay and only play once I click the play button and no volume change takes place with the code you provided.



    Would you like me to provide a stripped down version of the file?
    Andrew R.
    Developing content since 2010 using a mixed bag of tools.
  • chrystalb21
    chrystalb21 Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 20 ✶ Headliner ✶
    Hi Andrew,
    Sure. If you want, you can just send me a library object of a stripped down version of the page. Just tell me the size of the audio file and images on the page. I'll try to reproduce.
  • andrew-robertson
    andrew-robertson Community Member Posts: 225 ☆ Superstar ☆
    As requested. I've stripped down my module to the single page and assets that I believe are required.

    This is a template, so please change the file type to .awp as opposed to .zip.
    Andrew R.
    Developing content since 2010 using a mixed bag of tools.
  • chrystalb21
    chrystalb21 Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 20 ✶ Headliner ✶
    @andrew-robertson
    I couldn't find the call to change the audio in the file, however, I think I found a way to make it more consistent. I believe if it wasn't working for you the delay would need to be adjusted, and this may work for some, but if someone is experiencing latency, it would not.

    Additionally, I changed the audio javascript so if you will publish for seamless play, it will still work updated to triv$(getDisplayDocument()).find("audio").prop("volume", 0.1);

    I added an action and an action group at the top of the file.
    The action (ResetVolumeSet) sets a variable called VolumeSet to 0.
    The group (SetAudioVolume) has two actions.
    Action 1: SetVolume
    Action: Run Javascript
    Javascript: triv$(getDisplayDocument()).find("audio").prop("volume", 0.1);
    Condition: If VolumeSet equal to 0
    Action 2: SetVolumeSet
    Action: Modify Variable
    Target: VolumeSet
    Type: SetEqualTo
    Value: 1

    On the audio, add an audio event at the beginning of the audio to run the group SetAudioVolume.

    If you want to use an action,
    OnShow Run Action Group SetAudioVolume, and set the delay. I changed it to .5 and it worked. I've duplicated the page to provide examples of both.

    I added the variable and group so if the user changes the volume and replays, it will keep the volume they selected.

    Let me know if you have questions.
  • andrew-robertson
    andrew-robertson Community Member Posts: 225 ☆ Superstar ☆
    Yes, sorry. I didn't save/commit my JS call because I didn't want to commit to my network share before sending. Apologies for that. I truly appreciate your time and support. I will download later today and report back.
    Andrew R.
    Developing content since 2010 using a mixed bag of tools.
  • chrystalb21
    chrystalb21 Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 20 ✶ Headliner ✶
    @carlfink, In addition to the action, it would be a good to have a playback option to set the initial audio volume.