Audio on ios does not work properly, it only works the first time

Issue

I have a problem with playing audio on IOS devices …
the code I use is this to activate/deactivate the sound:

 <audio id="audio">
    <source src="sounds/fart.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
 </audio>
 <button id="audio-btn" class="audio-btn" onclick="toggleAudio()">
    <img id="audio-icon" src="img/sound-off.webp" alt="audio_play/pause" />
 </button>



let audioIconPlay = false;

 function toggleAudio() {
   const audioIcon = document.getElementById('audio-icon');
   audio.autoplay = true;
   audioIconPlay = !audioIconPlay;
   if (audioIconPlay) {
     audioIcon.src = 'img/sound-on.webp';
   } else {
     audioIcon.src = 'img/sound-off.webp';
   }
 }

And this when I click the button to play the audio:

 <button
  onmousedown="playMyAudio()"
  onmouseup="playMyAudio()"
 >
  Fart
 </button>

 function playMyAudio() {
   if (audioIconPlay && audio.paused) {
     audio.play();
   } else {
     audio.pause();
     audio.currentTime = 0;
   }
 }

Ps .: I did it all on onTouch as well

Now, on android devices it works, every click plays the audio, while on iOS it works only on the first click!
There is a solution?
I tried this: Allow audio.play() on safari for chat app
but it does not work.

Solution

I did some tests, in practice it works but not immediate as with android…. My problem is that the audio I use is too short! it lasts a second, maybe even less… So on the iphone it doesn’t have the time to play such a short sound and it seems that it plays it only once but in reality it always does it only that the other times it is not heard as it does not have the time necessary to stop and play it all over again! I tried to insert a longer audio and it works, the problem is that if I click quickly several times on the button I do not get the same result as I have on android, i.e. stop the audio, reset the time and play it again, I have no idea of the because but it seems that iphone is delayed and unable to do it, while on android devices yes.

Answered By – Luca

Answer Checked By – Timothy Miller (FlutterFixes Admin)