vuejs3 – delayed startet audio file throws error on iOS html app

I play lottie files and mp3 files within a pwa app. sometimes the audio files start with a delay an I trigger the audi with a timeout.

<audio ref="audioPlayer4" crossorigin playsinline @ended="audioEnded" :volume="store.state.volume"> 
    <source src="/audio/11.mp3" type="audio/mp3" />
</audio>

For some reason I now have a problem playing a sound at a certain point via settimeout. I then get the following error on iOS mobile devices.

The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. 

On iOS this results in the error: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

setTimeout(() => {
          if (audioPlayer4.value != null){
            audioPlayer4.value.play();
          }
        }, 1050);

how to get around this?

Read more here: Source link