audio does not play after pressing button in iphone safari - reactjs

Question

I have a react component that has a button with a handler to play an audio.
const initializeAudio = () => {
let context = new AudioContext()
let analyser = context.createAnalyser()
let audioSrc = context.createMediaElementSource(audioRef.current)
audioSrc.connect(analyser)
analyser.connect(context.destination)
analyser.fftSize = 512
setAnalyser(analyser)
}
const play = () => {
if (!audioSet) {
initializeAudio()
setAudioSet(true)
audioRef.current.volume = 0.5
}
audioRef.current.play()
setPlaying(true)
interval = window.setInterval(turnToTime, 1000)
}
<audio
data-keepplaying
ref={audioRef}
id="audioElement"
src={audio}
/>
<WaveForm analyser={analyser} />
<button onClick={isPlaying ? pause : play} className="media_button">
<FontAwesomeIcon
className="fa-icon"
icon={isPlaying ? "pause" : "play"}
style={!isPlaying && { paddingLeft: "0.4rem" }}
></FontAwesomeIcon>
</button>
Everything works fine on firefox and chrome, but won't work on safari on iphone, any one know why?
I feel that my audio is created in response to a click which is what the new restriction needed, but why is safari not working?

Answer 1

From reading your code I would guess that the second line is throwing an error in Safari. Safari still has no official support for the Web Audio API and the AudioContext is only available as webkitAudioContext.
If initializing the context is your only concern using the following technique might work.
let context = new (window.AudioContext || window.webkitAudioContext)();
However I would not recommend using it as it treats Safari's implementation similar to the one in Firefox or Chrome even though they differ in many aspects. As I'm the author of standardized-audio-context using this package is of course my preferred way to handle inconsistent browser support for the Web Audio API. :-)
You can use it like this.
import { AudioContext } from 'standardized-audio-context';
let context = new AudioContext();
I hope this helps.