The Autoplay Policy Nightmare
Deploying a game like Modern Tetris to the web introduces a unique set of challenges that desktop developers rarely face, chief among them being the strict Autoplay policies enforced by Chromium and WebKit browsers.
To prevent malicious ads from blasting audio, browsers require a user interaction (a click or a tap) before any audio context is allowed to play. If your game engine initializes and attempts to play the background music immediately upon load, it will be silently blocked, often causing cascading errors in the audio buffer pipeline.
The Interaction Layer Solution
The standard pattern to solve this is the "Click to Start" overlay. However, simply binding an event listener to a button isn't enough. The AudioContext.resume() method must be called synchronously inside the specific user interaction event handler. If it is deferred via a Promise or a setTimeout, iOS Safari will still block it.
Dealing with Audio Latency
The second major hurdle is latency. When dropping a block in Tetris, the 'thud' sound must correspond exactly with the visual resting frame. HTML5 <audio> tags are notoriously unreliable for timing, often carrying 50ms to 100ms of unpredictable delay.
For precise timing, we had to rely entirely on the Web Audio API, decoding audio files into memory as AudioBuffer objects and scheduling them with audioContext.currentTime. Pre-decoding is critical; attempting to decode the MP3 chunk on the fly at the moment of impact will inevitably cause a stutter in the game loop.