Why can't JavaScript .play() audio files on iPhone safari?

Question

I've got a JavaScript web app working that plays some audio periodically like this:

var SOUND_SUCCESS = new Audio('success.mp3');
SOUND_SUCCESS.play();

This works great on desktop browsers (tested in Edge and Chrome), but it doesn't play on Safari on iPhone.

I've looked around Stack Overflow, and I found some answers from a couple of years ago that it's not possible to play audio from Safari unless you're in that full screen player. Is this still the case?

Answer 1

iOS disables autoplay, instead requiring that play be initiated as part of a user interaction (e.g., you can start playback within a touchstart listener). There's a bit of documentation about this on Apple's developer documentation. There's also this article Overcoming iOS HTML5 audio limitations on IBM's developer site that has examples and more detail.

Answer 2

To add to xingliang cai's response, here's a code sample I got to work for me:

const soundEffect = new Audio();

// onClick of first interaction on page before I need the sounds
soundEffect.play();

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src = 'path/to/file.mp3';
soundEffect.play();

Answer 3

IOS on mobile disable automatic sound playing by default. So to get around this problem. You could put enable/disable switch button somewhere on the page and play some sound using an audio element("audioElement") if the user click the button switch.

After that, the same "audioElement" can be used to play future sounds by changing its "src" attribute and call its "play()" method, without any further user interaction.

Answer 4

I used this:

useEffect(() => {
  window.addEventListener('touchstart', () => {
    document.getElementById('audio').muted = false
    document.getElementById('audio').play()
  })
})

As soon as the user scrolls, the sound plays

Answer 5

To get @user2415116's solution to work in iOS 14, I did this:

const soundEffect = new Audio();
soundEffect.autoplay = true;

// onClick of first interaction on page before I need the sounds
// (This is a tiny MP3 file that is silent and extremely short - retrieved from https://bigsoundbank.com and then modified)
soundEffect.src = "data:audio/mpeg;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFTb25vdGhlcXVlLm9yZwBURU5DAAAAHQAAA1N3aXRjaCBQbHVzIMKpIE5DSCBTb2Z0d2FyZQBUSVQyAAAABgAAAzIyMzUAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAAAAD/80DEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQsRbAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQMSkAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src = 'path/to/file.mp3';

Answer 6

Haha, I outsmarted it like this.

Put in the page the audio tag with autoplay (true)

<audio id="beep" src={Assets.SOUND_BEEP} autoPlay />

It will play the sound once the element is mounted. (Even on safari iOS)

Then it seems you can play it whenever you want again by calling

document.getElementById('beep').play();

But now you may say, but I don't want to play the sound as autoplay.

Yes, I outsmarted it to put the "muted" property on that, and then set it to false when playing.

<audio id="beep" src={Assets.SOUND_BEEP} autoPlay muted />

And play:

document.getElementById('beep').muted = false;
document.getElementById('beep').play();