Audio auto-play issues, IOS, safari

Safari on IOS blocks audio to be played without user interaction. So to tackle that I added a popup with button saying “Join with system audio”, just like zoom, to get the user interaction and after that I call play() on audio element. This works well for the first audio element but the audio elements which are added after that still throw the same autoplay permission error causing audio to not play.

The other solution which comes to my mind is to use AudioContext and have only one audio player and pipe all the incoming audios to the AudioContext and add it to the audio player. That should work but will not it be very heavy for CPU to merge the audios?

The solution you mentioned in the topic below was to use GUM to enable autoplay, but how does that enables autoplay? @BronzedBroth

This issue was briefly discussed here.

Perform the GUM check before your prompt the user with a join button to click. Apple requires permissions to be allowed first before interaction occurs.

If elements are not auto-playing it’s due to some HTML/JS adjustments required.

HTML:

<video video-id="1234567" autoplay playsinline>Your browser does not support the video tag...</video>

Above would solve the HTML issue if element doesn’t contain autoplay/playsinline attribute. Beyond that for JS you’d resume() the consumed track and add this track to a MediaStream attach it to an element and play() it.

Good luck.

Thanks, I am using audio and video tags separately. The reason for this is that I am allowing max 20 user boxes i.e video streams per page but audio streams can be of users other than these 20 users so I have separated the audio video tags to handle this.

I read somewhere that playsinline solves the video autoplay issue with audio. But as I am using audio tag instead of video so that might not work for me.

Any better way to handle this video audio separation?

Confirm that video tags auto play, if they do then check audio tags for problems.

I see it now, the secret is to perform GUM request beforehand even if user want to join with video, audio both off. Without GUM request autoplay, playsinline nothing works. Is it documented somewhere?

Doesn’t it seem weird to trigger GUM request even if user doesn’t have requested it?

Yup…
https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari

For a two-way video conference, video automatically plays after the user accepts the prompt requesting camera access.


It’s messy for sure to make every device happy! :slight_smile:

Thanks, nice article, couldn’t find this info elsewhere.

Part of being factual. Good luck. I try not to waste my time, so do listen. Years if not more could have gone into the advice given just follow if we make it easy for you…

1 Like

@BronzedBroth this only works till we keep one of the video/audio captured from iphone and if both are turned off during the call then the later remote audios will not autoplay, right?

I shared the link, do pay attention please. Every platform/browser has its own limits to auto-play if such is the focus. With Apple you won’t get audio at all if you don’t allow so find happy medium for all or call apple out if you can to make user experience unique. AKA don’t ask android users or desktop users!

Thanks