[BUG] Playback does not begin when audio is muted on iOS (iPhone/iPad)

[elynema]

Describe the bug
When the audio is muted, playback does not begin for audio only items on iOS (both iPhone and iPad). This was replicated in Safari, but reported to be observed across browsers.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://avalon-staging.dlib.indiana.edu/media_objects/rf55z7692 on iPad or iPhone (iOS17) in Safari.
2. Make sure volume is muted.
3. Start playback.
4. Audio will not start and the playback head will not move.
5. Unmute volume.
6. Playback will start with audio.
7. Note: this can be intermittent. It seems to happen most reliably when the audio is already muted, so after page refresh after you have muted audio.

Expected behavior
Playback should begin even if audio is muted.

Screenshots

Screen.Recording.2024-07-23.at.10.56.20.AM.mov

Smartphone (please complete the following information):

• Device: iPad/iPhone
• OS: iOS17
• Browser: Safari (and presumably Chrome)

[elynema]

Could it possibly be a feature of iOS/Safari that playback of an audio item will not begin if it is muted?

[Dananji]

I tested the audio cookbook recipe in this specific environment, and it plays and updates the UI as expected with these settings.

[Dananji]

I tested with an audio manifest from one of Northwestern's collections, and observed the same behavior.

I tested this issue in Chrome on iOS in both iPhone and iPad, and observed the same behavior.
In desktop browsers; both Firefox, Chrome played the media when muted but not Safari.

I was not able to find anything that explains this behavior in relation to Apple's system settings on the internet.

@elynema and @joncameron;
One solution we could implement is unmute the audio player on page load in the environments we are seeing this behavior. What do you think?

[elynema]

In Safari, when audio is muted, it never gets to the point where the player is ready to play the media. Same issue when we were trying to activate the buttons in the iOS player b/c the player was not ready enough to have everything ready to play, even when the loaded metadata event has fired. Another event called 'canPlay' - ready state never reaches 4 in Safari when the audio is muted.

[abankhele]

I can replicate this issue on ipad and iPhone (iOS17) in Safari. It only happens when you mute the media player refresh the URL and then click play on the audio.

[elynema]

We do not see this problem if you just load the page, mute the audio, and then play the media.

[elynema]

Not 100% sure when we pulled a new Ramp build into Avalon, so I've asked Akanksha to test this on the Ramp demo site.