Player doesn't work on iOS 13+ because it doesn't recognise it is a device

[a-sklyarov]

The regex check which is currently used to recognise a device is:

this.isDevice = /ipad|iphone|ipod|android/i.test(window.navigator.userAgent.toLowerCase()) && !window.MSStream;

This is not sufficient for iOS 13+ because the user agent string no longer contains "iPhone" or "iPad". See this answer: https://stackoverflow.com/a/58065241/5284180

The solution is to update the check to:

this.isDevice =
      (/ipad|iphone|ipod|android/i.test(
        window.navigator.userAgent.toLowerCase()
      ) ||
        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
      !window.MSStream;

I am raising this as an issue because I don't have the time right now to make the actual fix. If someone can pick it up, it would be great.

[a-sklyarov]

In the meantime, I have worked around this problem in my code by extending the GreenAudioPlayer class in the following way:

import GreenAudioPlayer from "green-audio-player/dist/js/green-audio-player";

class GreenAudioPlayerFix extends GreenAudioPlayer {
  constructor(player, options) {
    super(player, options);
    delete this.isDevice;
    this.isDevice =
      (/ipad|iphone|ipod|android/i.test(
        window.navigator.userAgent.toLowerCase()
      ) ||
        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
      !window.MSStream;
    this.overcomeIosLimitations();
  }
}

export default GreenAudioPlayerFix;

[Schempershofe]

would you please ellaborate how to apply this fix on a existing project the easiest way? :-) Tried to update this on Line37 with your Code but simulated iOS 13.X and real iOS 14 iPad are stuck with a spinning wheel on loading.

[Lastone17]

@Schempershofe did you find any solution for this problem? I'm stuck with the same spinning wheel on loading.

[Schempershofe]

@Schempershofe did you find any solution for this problem? I'm stuck with the same spinning wheel on loading.

Nope, I´m still suck on it, I believe that it´s exactly the problem @a-sklyarov described and found a couple of different approaches on ipad device recognition for the current iPAD OS Version - none of them fixed the issue so I´m currently preparing a switch away from the green player for the project :-(

[Lastone17]

@Schempershofe I found something... the problem is on iOS you have to do this: this.player.addEventListener('loadedmetadata', this.hideLoadingIndicator.bind(self));

See the function "overcomeIosLimitations" in the js file

[Lastone17]

@Schempershofe You can try something like that:

function isiOS() {
        return [
              'iPad Simulator',
              'iPhone Simulator',
              'iPod Simulator',
              'iPad',
              'iPhone',
              'iPod'
            ].includes(navigator.platform)
            // iPad on iOS 13 detection
            || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
      }

      if (isiOS()) {
        // iOS does not support "canplay" event
        this.player.addEventListener('loadedmetadata', this.hideLoadingIndicator.bind(self)); // iOS does not let "volume" property to be set programmatically

        this.audioPlayer.querySelector('.volume').style.display = 'none';
        this.audioPlayer.querySelector('.controls').style.marginRight = '0';
      }

[floppyxyz]

Hey @greghub , are there any updates to this issue? We have the same problems and would like to use this patch. Could you please merge this pull request?