Lower sound does not work on iPad

Hi all,
I have a little problem with javascript.
I have created an application in which the background music should be shut down when I start a video by clicking on a button, because the video contains a speaker. The click then triggers the javascript (see below). This works fine on macOS, but it doesn't work on the iPad. Does anyone have an idea how to fix this?

The code is simple:
function turn_audio_down(hypeDocument, element, event) {

var myAudio = document.getElementById("myAudio");
myAudio.volume = 0.2;

Unfortunately iOS does not allow controlling volume.

See the Safari HTML5 Audio and Video Guide:

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

One suggestion from StackOverflow is to rewrite your audio playback using the WebAudio API, but that's a bit more effort and also means you won't get playback at all when the device itself is on Mute.

Hi Jonathan, thanks for your answer. I had read that there is a problem with IOS, but i thought, that this would be only a problem when reducing the general volume of the iPad but not if i only reduce the volume of the sound file.

I'm guessing on iOS they are linked, which is why apple doesn't allow independent settings. This of course makes sense in 2007 for just the iPhone as a simplicity move, but less so on a 2022 iPad...

If you don't plan to use WebKit Audio, perhaps you could have two files, one which has been processed so its volume is reduced? Then you could pause and sync the .currentTime value. (I'm not sure how much delays there would be, especially if they aren't both loaded the same amount though...)

Hi Jonathan, i had the same idea with the two sound files with different volumes. I will give it a try if the demo will become a real Project.
Thank you so far.


1 Like

I would hope and expect that this would always be the case in all scenarios :smiley:

1 Like