HTML5 audio controls disappear in iOS 13 with Ion slides

Question

We have an Ionic 4 app that we've created that uses ion-slides. Each slide contains a photo, an HTML5 audio player, and some text. The HTML5 Audio player on the first slide looks fine, but subsequent slides initially show the time-control slider and text (time-to-go number) on the player but then these both disappear after a very brief period of time (milliseconds). However, the play/pause button is still rendered and the player itself will play the correct audio stream. The rest of the slide looks fine; it is only the audio player that is not whole.

The audio player works fine on all instances of Android that we've tested and also iOS 12 devices. We only see the issue with iOS 13. We have considered using another audio player, but our app is currently in beta test and relies heavily on the HTML5 audio player API. Any thoughts on what we can try to fix the issue?

Tried running ionic serve with Safari and it works fine (on a Mac running Catalina). Also attached safari to the running instance of the app and could not see any difference between the HTML Elements of the first and second slides.

<ion-content>
  <ion-slides #slider :options.prop="slideOpts" [options]="slideOpts">
    <ion-slide>
      <div class="grid-container" [ngClass]="{ 'hide-text': hideContent}">
        <div class="image-area">
          <img src="../../assets/18.jpg" (click)="toggleText()">
        </div>
        <div class="audio-area">
          <audio controls>
            <source src="assets/audio/1.mp3">
          </audio>
        </div>
        <div class="divider-area">
          <hr>
        </div>
        <div class="vert-line"> </div>
        <div class="text-area">
          Text Area
        </div>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="grid-container" [ngClass]="{ 'hide-text': hideContent}">
        <div class="image-area">
          <img src="../../assets/19.jpg" (click)="toggleText()">
        </div>
        <div class="audio-area">
          <audio controls>
            <source src="assets/audio/2.mp3">
          </audio>
        </div>
        <div class="divider-area">
          <hr>
        </div>
        <div class="vert-line"> </div>
        <div class="text-area">
          Text Area
        </div>
      </div>
    </ion-slide>
    <ion-slide>
  </ion-slides>
</ion-content>

I expect the audio players on each slide to have the same controls as the initial slide.

Answer 1

Very late reply but I have a similar problem with an Ionic 5 app.

I had some limited success in minimizing the issue by reloading the HTML on a change event.

You could try adding <div class="audio-area" hidden> and using (ionSlideDidChange)="tryThis()" on ion-slides.

tryThis() {
     setTimeout(() => {
       let elems = <NodeList>(
         document.querySelectorAll(".audio-area")
       );
       for (var i = 0; i < elems.length; i++) {
         let elem = <HTMLAnchorElement>elems[i];
         let inner = elem.innerHTML;
         elem.innerHTML = inner;
         elem.children[0].setAttribute("controls", "true");
         elem.children[0].setAttribute("preload", "metadata");
         elem.removeAttribute("hidden");
       }
     }, 300);
 }

This greatly reduced the issue for me, though it does seem to pop back up eventually, usually after leaving the app idle for a while. Curious if you ever found a good solution.

(I would have left this as a comment but don't have the rep)