I am making a website which is a simple piano. I hosted the site, but the audio is lagging now. When I play it from my local system it works fine, but not from the hosted site.

So I want all the audio resources to load and save it in the user's device (as cache or something else) and play the audio from it so the audio won't lag. I can't figure out how do I do it. please help me with a solution.

This is what I tried:

const pianoKeys = document.querySelectorAll('.key');
function playSound(soundUrl){
    const sound = new Audio(soundUrl)
    sound.currentTime = 0
    sound.play()
}
pianoKeys.forEach((pianoKey, i)=> {
    const num = i<9 ? '0'+(i+1) : (i+1);
    const soundUrl = 'sounds/key'+num+'.ogg';
    pianoKey.addEventListener('mousedown', ()=>playSound(soundUrl))
})

The soundUrl creates the directory to the audio file. Is there any way to load the file and play from it?