Pause, Resume and Mute: Making Your HTML5 Game Behave on a Portal

When your HTML5 game runs on a portal, the page around it is not under your control. An ad can take over the screen, the player can switch tabs, or the player can press a sound button that lives outside your game. If your game keeps running its physics and music through all of that, players notice quickly. The fix is to listen for pause and sound events and respond to them. This post shows how that works with the PlayKovo SDK.

PlayKovo pauses your game in four situations: while an ad is on screen, while the player has the PlayKovo app menu open, while the browser tab is hidden and while the app is in the background. Several of these can happen at once, so you only hear pause for the first one and resume when the last one clears. The event payload includes a reason, which is one of "ad", "menu", "hidden", "background" or "platform".

Stop your game loop, timers and physics on pause, and continue on resume:

window.PlayKovoSDK.on("pause", ({ reason }) => {
  game.paused = true;
  music.pause();
});
window.PlayKovoSDK.on("resume", () => {
  game.paused = false;
  lastFrameTime = performance.now();
  music.play();
});

Reset your frame timer on resume. If you do not, the first frame after a long pause measures a huge time step, and objects can jump or fall through the floor.

Subscribing to these events tells the platform that your game pauses itself, so the platform stops freezing the page for you. If you subscribe, really pause. Games that never subscribe still work, because the platform holds their animation frames instead, but you get cleaner behavior when you handle it yourself.

The PlayKovo player and app have their own sound button, and ads also mute your game while they run. Send all of your audio through one master volume and follow the audio event:

window.PlayKovoSDK.on("audio", ({ muted }) => {
  masterGain.gain.value = muted ? 0 : 1;
});
if (window.PlayKovoSDK.isMuted()) masterGain.gain.value = 0;

The isMuted() check matters when you create audio late, for example after the first tap. Without it, a muted player could hear sound start by itself. If your game has its own sound toggle, keep it and apply both: sound should play only when neither the player nor PlayKovo has muted it.

Two more calls are worth adding. Call gameplayStart() when the player starts actually playing a run, level or match, and gameplayStop() when they reach a menu, shop, pause or result screen. Calling either twice in a row is harmless. If your game has its own loading screen, call loadingStart() when it appears and loadingFinished() when the game is playable, so the app can hide its own cover instead of showing two loaders.

• Switch to another browser tab during play and come back. The game should be exactly where you left it.
• Mute from the PlayKovo sound button and confirm every sound stops, including late-created audio.
• Watch for a huge first frame after resume.
• Check that timers, such as countdowns, do not keep running while paused.

The full list of calls is in the JavaScript SDK documentation. When your game is ready, you can submit it through the developer portal.