IOS/Safari: воспроизведение аудиоэффектов в веб-приложении сильно задерживается. ⇐ IOS

[Гость]

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.

Repo can be found here: https://github.com/borsTiHD/vue-boo-bash
Preview for testing: https://vue-boo-bash-preview.vercel.app/
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  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() } 

Источник: https://stackoverflow.com/questions/781 ... ly-delayed