I am trying to set a file uploaded via an input field as the source for an audio tag. Everything works fine except on iOS. When I run this code on the iPhone, the audio is correctly set to the new source and I can play it. But when I move the slider and press play/pause a few times, the slider moves without playing sound or doesn't move at all, even though the pause icon is displayed. Only when the slider is moved all the way back to the beginning does it sometimes work again.

The problem is most likely to occur with very short audio files (< 5 seconds). Maybe it is some strange behaviour when using createObjectURL under iOS? However, the problem does not occur in the iOS simulator under macOS.

Maybe some of you have had this problem before and can help me.

Thanks!

EDIT: The problem occures in the iPhone Simulator on macOS as well, after I updated it to the latest version (15.4). So it seems to be an issue with the newest iOS release.

const input = document.querySelector('input');
const audio = document.querySelector('audio');

input.addEventListener('change', (e) => {
  audio.src = URL.createObjectURL(e.target.files[0]);
})

<input type="file" accept="audio/*, .mp3" />
<audio controls />