Autoplay audio on mobile safari

问题:

Before I get flamed to death, I know this doesn't work currently due to Apple's concern over the terrifying cost to their users of downloading an audio file automatically (nothing to do with them trying to cripple web apps as they don't get their 30% from them).

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?

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

回答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.

回答3:

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.

回答4:

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