Cant play HTML Audio on IOS

Viewed 241

i have a Webapplication where users can talk to each other via Webrtc and a peer Server. My Problem is, that on a ios devices i cant send my audio and i cant hear the others. After a little bit research, i found out, that its a intentional behavior from apple. A audio can only played, if the audio is triggered by a user and not from the website. But my application is a random lobby where people can talk to each other and switch the the "partner" by click on the button. After the click its search for another free user and than both are connected via the peer and share their audio stream.

Than i tried to call audio.play() on a touch event. But that didn't work either. Nothing happend. Still no voice on both sides. Do you guys know, how can or should i handle this problem.

On Browser all works fine. This problem does only appears on IOS Mobile Browsers.

King regards.

2 Answers

You are essentially asking how to bypass a restriction. You haven't specified exactly which restriction you're trying to bypass, though, so I can only assume based on what you've told me thus far that you're trying to autoplay audio.

If this is the case, the easiest thing to do would possibly be to set up a blank video stream instead of an audio stream, and add the autoplay property like so:

<video autoplay>

However, don't count on this workaround - or ANY workaround for ANY restriction - working as a long-term solution, if you can even get it to work today. If you can bypass a restriction, so can less scrupulous developers, so Apple may be inclined to patch any method of bypassing their restrictions. Your best bet is probably to use React Native to build a native application for iOS and Android. React Native can use either JavaScript or TypeScript (you choose which).

Instead of outputting directly from your media elements, consider using the Web Audio API. Specifically:

  1. Create an AudioContext/webkitAudioContext. It will usually start out "suspended".
  2. On user interaction, such as an initial click, call context.resume().
  3. When you want to output audio from a new WebRTC stream, create a new MediaStreamAudioSourceNode, and connect it to your audio graph. (e.g. mediaStreamNode.connect(context.destination))

This isn't a hack or workaround the autoplay restrictions in any way. It's simply putting all of your audio outputs in one place.

Related