Autoplay audio on mobile safari

safari autoplay audio
audio autoplay not working in safari
autoplay mobile safari
safari autoplay audio ipad
audio autoplay not working in iphone
safari html5 audio not playing
audio autoplay not working in mobile
safari autoplay policy

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?

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!!

Autoplay audio on mobile safari, This article explains a difficulty I had with this because of the Safari browser's auto-play policies and a workaround, whilst also detailing a slight� Safari 11 on macOS and iOS, as well as Chrome for Desktop and Mobile are going to introduce a new auto-play policy. The main goal is to improve their user’s browsing experience, by eliminating distractions and surprising media playbacks of unmuted content, and provide them with more control over the autoplay capabilities for individual websites.

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.

Skirting the iOS/Safari audio auto-play policy for UI sound effects , audio autoplay issue on safari on ios greater than 10. Hi I want to play an audio after defined seconds or on load of page automatically . However audio is being � Safari, which Mac users should be using instead of Chrome anyway, now blocks almost all auto-playing videos with sound by default. You can go a step further and block all auto-playing media on any particular domain. But what if actually want certain sites to auto-play? Well, by default, YouTube and Facebook do autoplay, so don’t worry about

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.

audio autoplay issue on safari on …, Mobile browser's ignore the autoplay attribute on <audio> and <video> elements. Audio and video elements will only play as the result of a user interactions (click, touch). A workaround is to have a "start button" in your application that loads and plays an initial sound. My tests show that the latest mobile browsers now support autoplay with the exception of MS Edge. [update] Opera Mini on iOS 10 supports autoplay, but plays the video fullscreen. Other versions do not autoplay as one would expect from a proxy browser. [update] Firefox on iOS does not support autoplay. This is very different from Firefox on

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';

Autoplay HTML5 audio in Chrome for Android, Mobile Safari in iOS , Mobile Safari doesn't even starting loading any of the audio files until you want to play one from a user tap. This causes a lag on the first time� Stop autoplay videos in Safari on Mac. Some websites—and others who provide those sites with content, including advertisers—automatically play video when you visit their site. Muting tabs and windows is a quick and temporary solution, but you can permanently block video for an individual website or for all websites.

How to auto-play audio in Safari with JavaScript, Safari 11 on macOS and iOS, as well as Chrome for Desktop and Mobile pane to allow or disable autoplay, disable audio in general or more. Safari honors the preload="metadata" attribute, allowing <video> and <audio> elements to load enough media data to determine that media’s size, duration, and available tracks. A <video> element can use the play() method to automatically play without user gestures only when it contains no audio tracks or has its muted property set to true .

To Play, or Not to Play, In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled . On safari Iphone when buttery is low and iphone is on Low Power Mode it won`t autoplay, even if you have the following attributes: autoplay, loop, muted, playsinline set on your video html tag. Walk around I found working is to have user gesture event to trigger video play:

Why won't my mobile device audio or video play automatically even , <title>Fake auto play html audio in iOS Safari the right way</title>. </head>. < body>. <h1>在iOS Safari 中假装自动播放HTML5 audio(音乐) 的正确方式</h1>. If you’d like your embedded video to autoplay or loop, go to the video you'd like to embed and click the "Share" button in the video player.In the window that opens, click the "Show options" link, and check the corresponding boxes next to "Loop this video," "Autoplay this video," or both.

Comments
  • I was looking to do something similar a few weeks ago and my search was fruitless...
  • I have googled this problem to death and not found anything useful. Please Stackoverflow, you are my only hope...
  • 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 stackoverflow.com/a/46485784/2342518 [Let's hope @boz was the last to have fruitless search from now on ☺ ]
  • gist.github.com/ufologist/50b4f2768126089c3e11
  • opera mini in ios supports autoplay by default, while chrome, firefox and safari does not and have not offering options to turn on.
  • 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...
  • There is a chance using AudioContext; see my answer stackoverflow.com/a/46485784/2342518
  • Do you know if I can load multiple different audio elements when the user clicks on the button?
  • @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
  • @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.
  • 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...