Jquery help (HTML 5 Audio Fade on mobile)

Design help Custom code
1

Hi guys,

I have an html5 audio snippet that works perfectly when clicked on desktop.

It plays when clicked, then if clicked again it fades out - great.

For some reason this does not work on mobile, can anyone tell me why? Is it something to do with apple overriding volume control?

HTML5:

<audio id="music" controls="controls">
  <source src="https://drive.google.com/uc?export=download&id=1GNuPZRQD3-rfMwq_nnBchZY7RnTGRloD" type="audio/mp3" />
</audio>

<style>
  /* This will hide default HTML player */
  #music {
    display: none;
  }
</style>

JQUERY:

<script>
  // variable to store HTML5 audio element
  var music = document.getElementById('music');

  var fadeTimer = false;
  
// variable for the fade out - reduces the volume (-=) by 0.005 every 5

  var aud_fade_out = function() {
    clearTimeout(fadeTimer);
    var music = document.getElementById("music");
    if (music.volume > 0.005) {
        music.volume -= 0.005;
        fadeTimer = setTimeout(aud_fade_out,5);
    } else {
       music.volume = 0;
        music.pause();
      music.currentTime = 0;
    }
};

  function playAudio() {
    if (music.paused) {
      music.volume = 1;
      music.currentTime = 0;
      music.play();
    } else {
      music.volume -= 0.005
      setTimeout(aud_fade_out,5);
    }
  }

</script>

Button onClick = playAudio()