Autoplay audio on mobile safari

Question

Before I get flamed to death, I know this doesn't work currently due to Apple's concern over downloading an audio file automatically.

However, my question is: Has anyone found a cunning workaround yet? I just want to play a start up sound on the launch of a game and currently have to wait for the user to click somewhere before I can play the audio. One of you clever chaps must have got this working by now?

Independence

I was looking to do something similar a few weeks ago and my search was fruitless... – Leucite

I have googled this problem to death and not found anything useful. Please Stackoverflow, you are my only hope... – Independence

I got a workaround for Firefox and Chrome using AudioContext, but I did not try on Safari (please confirm whether it works if you have Safari mobile). See my answer on similar question https://mcmap.net/q/563320/-audio-tag-autoplay-not-working-in-mobile [Let's hope @Leucite was the last to have fruitless search from now on ☺ ] – Ensoul

gist.github.com/ufologist/50b4f2768126089c3e11 – Annalist

opera mini in ios supports autoplay by default, while chrome, firefox and safari does not and have not offering options to turn on. – Nectar

Answer 1

There is no chance to get autoplay working in mobile browsers. Android and iOS doesn't allow it and personally I think that is a feasible confinement! Imagine every second website you will open plays and ugly sound at start!

But you can make a little hack, so that the user will not remark that he currently started the audio for your application:

1. You WILL need an user interaction to start your audio. So, your app or game maybe has a startscreen or a welcome button which needs a click to get to mainmenu or start the game. Bind to an user event (the accepted events are: "click", "touchend", "doubleclick" and "keydown") and call the load() method for your <audio>.

2. Bind to the "canplaythrough" event of the <audio>. This event is triggered when your source is ready to play. Here you can now call play(), pause() or wait for other interactions. So the audio is ready but now you have full controll when to start or stop the sound.

3. I also advise you to use audio sprites on mobile clients. iOS (and Android?) internally implemented audio support through a Singleton. That means that you cannot, like in desktop browser, have 10 audio elements and play differents sound at once. You can only play one file! So changing the source for different sounds takes to much time. With an audio sprite you can start your sprites when the user first interact with your website or game. Pause your sprite and when you need to play sound you have to set the currentTime to the beginning of the sprite and pause the sprite when currentTime of your file reaches the end of your sprite. There is an timeupdate Event where your can check the currentTime of your sprite.

If you are more interested I can prepare my javascript audio sprites player for you!!

Collaboration

Thanks for answering, unfortunately our game must start without additional user interaction so your 'hack' won't work for us. We already use audio sprites and that works fine (mostly!). I'll give you the right answer as it seems there is no other solution just now... – Independence

There is a chance using AudioContext; see my answer https://mcmap.net/q/563320/-audio-tag-autoplay-not-working-in-mobile – Ensoul

Do you know if I can load multiple different audio elements when the user clicks on the button? – Plaided

@Marimba this only works on desktop. Like I wrote: internaly audio support is implemented as a singleton (for iOS). So there is no chance to trick here – Collaboration

@SimonFranzen I found out that that's not true. You can actually load multiple audio elements on Safari. You need to play them then pause and save somewhere for later usage. – Plaided

Your ideas seem promising. Why not give us some code examples? That would be appreciated. – Catercousin

I am confused why Apple and Google are trying to tell app designers what is best. If users don't like that an audio plays without interaction, then they won't use the site. For my app, we have audio books. When an episode ends, we need to be able to start the next episode without user interaction, because that's what user's expect. Instead Google and Apple block that. The user has to click a button to keep listening. Absolutely retarded. – Brachypterous

Answer 2

Only solution I have seen so far is to create a shell app and put the web app inside a UIWebView.

http://flowz.com/2011/03/apple-disabled-audiovideo-playback-in-html5/

UIWebView.allowsInlineMediaPlayback = YES;
UIWebView.mediaPlaybackRequiresUserAction = NO;

I also would really like to know how to do this in a plain-old web app.

Gothard

Unfortunately the whole point of us making HTML5 versions of our current portfolio is they should be device agnostic. Wrapping it in a UIWebView means iOS only :-( Thanks for answering though... – Independence

Answer 3

I have a bot chat app that has voice messages and I needed them to be autoplayed whenever needed ... so here is what worked for me in my angular app :

just attach a click eventlistener to document and call player.load(), after that whenever you set player.src = x; it will autoplay.

<audio id="voicePlayer" controls autoplay playsinline #voicePlayer></audio>

@ViewChild('voicePlayer', { read: ViewContainerRef }) voicePlayerRef: ViewContainerRef;

...

  ngAfterContentInit(): void {
    this.voicePlayer = this.voicePlayerRef.element.nativeElement;
    document.addEventListener('click', this._onDocumentClick.bind(this));
  }

  _onDocumentClick() {
    this.voicePlayer.load();
    document.removeEventListener('click', this._onDocumentClick);
  }

...


this.voicePlayer.src = 'x';

She

Answer 4

HowlerJS creates is a workaround. The user doesn't need to allow autoplay for the audio to be played automatically

Explanation from Docs on how this workaround is created :

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

Gaulish

Answer 5

I believe I just solved this for my own app.

The steps,

Controller loads up,

Then.... in viewDidLoad

have your web view load the HTML : loadHTMLString:htmlFile baseURL:[self getBasePath]];

THEN... set mediaPlaybackRequiresUserAction = NO on the webview.

If you set it too soon, I think the load for the html resets it.

Aqualung