MP3 Playback Volume
January 12, 2022 12:00 AM
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);
Solutions (2)
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?
@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.
Discussion (11)
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?
@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:
@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?
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.
Maybe it's just me, but why does Lectora not let you set volume in an Action?
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.
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-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.
@carlfink, In addition to the action, it would be a good to have a playback option to set the initial audio volume.
@chrystalb21 : I just took what you did and applied it. I did some modifications to how it works, but it was obviously my poor JS/JQuery skills.
Thank you! If I can buy you a coffee (or wine) - I would!
@andrew-robertson, my brain must have taken a break. I completely missed that you'd sent the updated file, so I'm glad you got it to work. I'm attaching what I have, just to have it in the thread. As with your original, rename .zip to .awp.
You are very welcome...I'll share a virtual coffee with you ☕!