I’m trying to solve the problem with my audio files delay. All files are very light – weighted (25-55kb).

I’ve created basic battleship game to play against computer and for more pleasant experience added sounds for menu button clicks as well as attack(hit/miss) sounds.

During the development stage all the files were loading on time. But after deploying in to gitHub pages, few weeks later I decided to revisit this project and found out that there’s delay literally to each sound. And all of them have quite same delay time, to my calculation it’s about 2 sec. Only computer attack on miss sound played on time from time to time (even thought logic and function that renders hits and playing sounds is same)

Here’s is my soundsController module.

import cannonHit from './audio/cannon_hit.mp3';
import cannonAttack from './audio/cannon_attack.mp3';
import startClick from './audio/startClick.mp3';
import menuClick from './audio/menu_click.mp3';
import victory from './audio/victory.mp3';
import defeat from './audio/defeat.mp3';

const cannonAttackSound = new Audio(cannonAttack);
const cannonHitSound = new Audio(cannonHit);
const menuClickSound = new Audio(menuClick);
const defeatSound = new Audio(defeat);
const startClickSound = new Audio(startClick);
const victorySound = new Audio(victory);

export const audioObjects = [
    cannonAttackSound,
    cannonHitSound,
    menuClickSound,
    defeatSound,
    startClickSound,
    victorySound,
];

audioObjects.forEach((audio) => {
    audio.preload = 'auto';
});

let soundBtn = document.querySelector('.sound-button');

soundBtn.addEventListener('click', () => {
    toggleMute();
    soundBtn.classList.toggle('off');
});

function toggleMute() {
    audioObjects.forEach((audio) => {
        audio.muted = !audio.muted;
    });
}

And this is function which plays sounds for attacks:

function updateCellHits(grid, x, y, target) {
        if (grid[x][y].ship !== null) {
            audioObjects[1].play();
            target.classList.add('hit');
            target.dataset.hit = 'true';
            target.style.pointerEvents = 'none';
        } else {
            audioObjects[0].play();
            target.classList.add('miss');
            target.dataset.hit = 'true';
            target.style.pointerEvents = 'none';
        }
    }

Here is example on how I play use sound for menu buttons:

startGameBtn.addEventListener('click', () => {
        audioObjects[4].play();
        initiatorContainer.style.display = 'none';
        initGameStart();
    });

This is GitHub pages for the app: https://ljoskold.github.io/battleship/

Thank you for spending your time reading about my problem!

I’ve tried to use chatGPT and searching google, but seems like couldn’t find any relative answers. So I decided to create my first stack overflow question myself.

I also enabled preload for each of them, and judging by Chrome DevTools they are indeed downloaded after loading the page.