iOS/Safari: Playing audio effects in web app are extremly delayed

Question

I'm building a little game where ghosts fly around and the user has to click on them to collect points. When a ghost is clicked, a small sound effect is played.

This works smoothly on the PC, but on my iPhone 15 with Safari the sound effect is very delayed. That's why I think I've built the whole thing wrong. Can you plz help me to optimize it?

I have currently set the sound effect centrally in a pinia store and rewind the file to 0 every time a ghost is clicked. Previously I had loaded the sound effect on each individual ghost separately. This actually worked better, but the sound effect was still delayed. I thought I would optimize the whole thing if there was only one audio element.

Currently I have the following setup (simplified):

composable.ts - to load the audio object

function base64ToBlob(base64: string, type: string) {
    const byteCharacters = atob(base64)
    const byteNumbers = new Array(byteCharacters.length)
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
    }
    const byteArray = new Uint8Array(byteNumbers)
    return new Blob([byteArray], { type: type })
}

// Return hit sound
export default function getHitSound() {
    const audio = new Audio() // Create an <audio> element
    const base64EncodedMP3 = 'encoded_sound_effect_1_second_long'
    const blob = base64ToBlob(base64EncodedMP3, 'audio/mpeg')
    const url = URL.createObjectURL(blob)
    audio.src = url

    return audio
}

game.ts - pinia store, where the object is stored and shared across my web app

// Hit sound
const hitSound = getHitSound()

// Play hit sound
function playHitSound() {
    hitSound.currentTime = 0
    hitSound.play()
}

ghost.vue - one of many ghosts who have a hit function and plays the sound

function hit(event: MouseEvent) {
    // Play hit sound
    gameStore.playHitSound()
}