I’ve been working on a project in my spare time and have run into an issue that I’ve been struggling with for several days now. I’m working with an audio stream using the Web Audio API - I have a server that provides an audio stream and a React client on the front end.
The code creates an AnalyserNode from the HTML audio element, then sends the audio data from getByteTimeDomainData to various visualization components. However, on mobile iOS devices, that data is a full array of 128 - only silence. The audio itself plays fine, but since the data isn’t there, none of the visualizations work. Nox VidMate
Everything seems to work for me on PC, on Macbook, and on Android phones. The only place it’s not working is on mobile iOS devices, and after a whole lot of Googling, I’m no closer to understanding why.
Things I’ve already checked:
-
No console errors
-
All my audio context stuff is set up within the call stack of a user gesture
-
The audio context is in a “running” state, not suspended
-
Works as expected on Chrome and Firefox for non-iOS devices
-
Doesn’t work on Chrome or Safari for any mobile iOS device