Bug Issue #30 patch

[tnbnicer]

Patch for ~~play-pause-btn aria-label="Play" issue~~ #30

I just added a few lines in main.js – stopOtherPlayers() function.

Sorry it took so long. View change.

While I was at it, I took on board issue #32. That’s: ~~Player doesn't work on iOS 13+ because it doesn't recognize it is a device~~ #32.

iPads are not my area of expertise, but based on stackoverflow, the fix is applicable.

We have another suggestion here for fixing #32 ... made on Oct 31, 2020.

[tnbnicer]

this.downloadLink.addEventListener('mouseover', this.downloadAudio.bind(self));
this.downloadLink.addEventListener('contextmenu', this.downloadAudio.bind(self));

Added to download link, so users don't download [source]*.html, for instance right-clicking to save. The this.downloadLink targets [source][audiofile], whether it's mp3 or some other audio format, when the user right-clicks (the contextmenu bubbles up with save options) and on mouseover (the browser shows the source "audio" web address). View.

[tnbnicer]

In multiple-instance.html example, CSS classes have the wrong names.

.player-with-download => .player-download .player-with-accessibility => .player-accessible

See full diff in compare view.

[tnbnicer]

@greghub Hi, I hope these commits of mine can be introduced into the code.

I look forward to the next version of green-audio-player.

Regards, Tom

[tnbnicer]

1

const uaDataIsMobile = window.navigator.userAgentData
&& window.navigator.userAgentData.mobile;
this.isDevice = typeof uaDataIsMobile === 'boolean'
    ? uaDataIsMobile
    : (/ipad|iphone|ipod|android/i.test(window.navigator.userAgent.toLowerCase())
    || (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1))
    && !window.MSStream;

Replaces the old JavaScript method of sniffing out phones and devices.

Those browsers that do not yet support mobile detection with userAgentData and/or iOS browsers that do not support canplay use userAgent. Future iOS browsers that support userAgentData must be detected separately, but we don't know what browsers, let alone how best to detect them. View lines 9-15.

2

Patch for IE with multiple players, further down, line 111, main.js. View.

EDIT:

Chrome runs on iOS iPads too. The current version of Chrome also supports userAgentData, unlike the current version of Safari. On iPad using Chrome, window.navigator.userAgentData.mobile might return false, as iPads do not consider themselves mobile, making detecting them more complicated. I would suggest going with two constants/variables. Something like this perhaps >>

Old method:

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

New method:

const uaDataIsMobile = window.navigator.userAgentData
&& window.navigator.userAgentData.mobile;
if (typeof uaDataIsMobile === 'boolean') {
    this.isDevice = (uaDataIsMobile)
        ? true
        : isDevice;
} else {
    this.isDevice = isDevice;
}

"Old method" detects iOS, "New method" detects browsers that already implement userAgentData, running on mobile devices.

[tnbnicer]

On overcomeIosLimitations() function

The Safari canplay policy – it is an iOS policy, deliberate – affecting audio and video, breaks the spinner. It spins endlessly. We shouldn't use autoplay, because it can damage hearing. If autoplay is used, it raises issues about having a spinner, because canplay triggers autoplay. The only fallback available for good players, like green audio player, at the time of writing this, remains waiting on the loadedmetadata event, when it fires. See source code.

All this means that iOS Safari requires separate detection. Feature detection, always recommended, rules itself out, as the very feature a script can detect happens to be canplay, which iOS Safari supports but disables.

[tnbnicer]

Would it be better to start from scratch?

Some of the earlier proposed changes have been updated. The one to look for is main.js.

Certainly it wouldn't be a problem to create a contributing.md, or to update the README.md.

Just say when, I am at your service.