React Web Game Sound Effects: Safari Compatibility Issues and Web Audio API Solutions

While developing a React-based web game, a cross-browser issue occurred where sound effects would not play again after the first playback in the Safari browser. The play() method of HTMLAudioElement stopped working from the second attempt onward, and resetting currentTime or forcing load() did not fundamentally resolve the problem.

This issue was resolved by adopting the Web Audio API. The previous approach caused network overhead due to file reloading and output latency, whereas Web Audio uses AudioContext and AudioBufferSourceNode to load audio data into memory and play it instantly.

The specific resolution process is as follows:

• Create an AudioContext instance to secure the context for the audio graph.
• Fetch the audio file using fetch, convert it to an ArrayBuffer, and decode it with decodeAudioData to create an AudioBuffer.
• For each playback, create a new BufferSourceNode, connect it to the destination node, and call start().
• If the audio context is in a suspended state, call resume() to prevent hardware resource issues.

Applying this method significantly improves sound output latency, enhancing the game's responsiveness (feel), and enables consistent audio playback across major browsers such as Safari and Chrome.