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?

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. — Frédéric Hamidi, Dec 04 '14 at 14:25

score 3 · Answer 1 · answered Feb 24 '19 at 20:06

3

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

answered Feb 24 '19 at 20:06

Alex Zheka

566
2
11

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. – shukshin.ivan Oct 09 '19 at 18:04
1

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. – Bruce Hamilton Jun 19 '21 at 10:05

Scott Witte · Answer 2 · 2016-11-19T00:08:09.940

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

edited Nov 19 '16 at 00:08

answered Jan 07 '15 at 04:28

Scott Witte

389
3
12

Thanks Scott, that link was really helpful! – ffxsam May 23 '16 at 03:22
This link now just goes to a page saying "Not Found" – kris Nov 16 '16 at 13:41
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." – Scott Witte Nov 19 '16 at 00:12
2

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. – Bruce Hamilton Jun 15 '19 at 09:16

mccp · Answer 3 · 2022-01-04T16:04:37.860

-2

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
  }

edited Jan 04 '22 at 16:04

answered Jan 04 '22 at 15:59

mccp

1
2

josi · Answer 4 · 2017-03-27T19:54:58.873

-3

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();
}

edited Mar 27 '17 at 19:54

answered Dec 12 '14 at 12:10

josi

499
3
7
13

1

This means audio playback is stopped, which is not the same as muted – Armen Mar 12 '16 at 15:23
@Armen You are right. I just wanted to share my workaround for lack of a proper solution, which was actually enough in my case. – josi Mar 27 '17 at 19:53

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

4 Answers4

Linked