Is there any possibility to control HTML5 audio volume on IOS?

Question

I use the html5 audio library Buzz to add sounds to a browser game. There is a toggle button to mute and unmute sound, which works good on desktop and Android devices. Unfortunately it seems like the audio tag is quite limited on IOS, so that I cannot mute audio in Mobile Safari (see https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html):

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.

Do you know any workaround to control volume of html5 audio tags in Mobile Safari?

Jorum

Looks like Apple deems very important their users always remain in control of the volume of the sounds their devices emit. If a workaround does exist, it will most probably be "fixed" as soon as discovered. – Rectus

Is this still an issue in iOS as of 2021 ? – Wavelet

Answer 1

To add volume change support to iOS and not rewrite your entire app from html5 audio to web audio for that, you can combine these audio solutions via createMediaElementSource.

Please see more details at Mozilla website https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource

Stylus

Great solution. But don't mind to move creating AudioContext and play action inside onclick (famous Apple policy). Otherwise you get silence. Checked on iOS 12.4.1 / iphone7 / chrome77. – Engender

Since iOS 13, using gain nodes for controlling the volume on media element sources will result in distorted audio. I'm looking into yet another workaround but have come up dry so far. – Normie

Answer 2

I always thought dynamic volume control and certainly crossfading, as we all know, is impossible. Apple has dictated that it be so. Except.... apparently the folk at Kodo Games (specifically Nicola Hibbert?) have pulled it off and made the code available to anyone. I just checked it on iOS 8. Fading and crossfading seem to work!

Check it out (new site that works): Getting Started with Web Audio API

Pickled

This link now just goes to a page saying "Not Found" – Iphlgenia

That's unfortunate. Well I have since discovered that there are plenty of resources for getting fluent with web audio. I have updated the link above to one I like but there are plenty. Just Google "web audio API tutorial." – Pickled

The link refers to the Web Audio API, but the question refers to html5 audio elements. It's a viable workaround, but Web Audio API has a big downside by not allowing streaming of the sound file. – Normie

Answer 3

It seems that you can set the muted property instead of updating the volume value. Works on iOS 15

  /**
   * Set volume of sound object
   * @param volume
   */
  setVolume (volume) {
    const muted = volume === 0
    // iOS workaround when volume is 0
    this.sound.muted = muted
    this.sound.volume = volume
  }

Multifold

Answer 4

I worked around this by simply stopping all sounds and setting a variable isMuted to true or false, so I can check this everywhere a sound is played:

// set the variable
var isMuted = false;

// toggle audio
function toggleMute() {

    var toggleAudioBtn = $(".toggleAudio");

        if (isMuted == false) {
            sounds.stop();
            isMuted = true;
            toggleAudioBtn.css("background-image", "url('images/ui/btn_audio_mute.png')");
        } else {
            isMuted = false;
            toggleAudioBtn.css("background-image", "url('images/ui/btn_audio.png')");
        }

};

// for every sound check if sound is muted
if(isMuted == false) {
    sound.play();
}

Jorum

This means audio playback is stopped, which is not the same as muted – Neal

@Neal You are right. I just wanted to share my workaround for lack of a proper solution, which was actually enough in my case. – Jorum