Audio.play() not working with iOS user agent - ios

Question

I'm making a playlist app in react, where each Track component in the playlist has and <audio> element:
const AudioPlayer = ({ track }: { track: Track }): JSX.Element => {
const { src, title } = track;
return (
<audio id={"audio_" + title}>
<source src={src} />
Your browser does not support the <code>audio</code> element.
</audio>
);
};
In my redux store, when a user click a Track, I find the audio element associated with the track and use audioElement.play():
const playTrack = (track: Track) => {
//get all the audio elements for all the playlist tracks
allAudioElems.current = tracks
.map((t) => "audio_" + t.title)
.map((id) => document.getElementById(id) as HTMLAudioElement)
.filter((e) => e !== null);
if (allAudioElems.current) {
allAudioElems.current.forEach((element) => {
//if the audio elements id matches the active track title, then play
if (element.id === "audio_" + track.title) {
element.play();
setCurrentAudio(element);
} else {
element.pause();
}
});
}
setCurrentTrack(track.title);
setIsPlayingAction(true);
setIsPlaying(true);
};
This all works fine on desktop for Chrome/Safari/Firefox, but fails on iOS Safari. Enabling controls, or autoPlay doesn't seem to do anything either.
I know that .play() returns a promise, but the error message is very vague when I catch the .play() error:
element.play().then((e)=>{
console.log("played audio!");
}).catch((error)=>{
console.log(error)
});
Gives Error:
Unhandeled Promise Rejection: AbortError: The operation was aborted
So what's one to do to get audio working on iOS?