html - 在移动 Safari 上自动播放音频

Question

在我被烧死之前，我知道这目前不起作用，因为 Apple 担心自动下载音频文件。

但是，我的问题是：有没有人找到一个巧妙的解决方法？我只想在游戏启动时播放启动声音，目前必须等待用户单击某处才能播放音频。你们中的一个聪明的家伙现在一定已经完成了这个工作？

Answer 1

没有机会让自动播放在移动浏览器中工作。Android 和 iOS 不允许这样做，我个人认为这是一个可行的限制！想象一下，您将在开始时打开播放和丑陋的声音的每一秒网站！

但是你可以做一些小技巧，这样用户就不会注意到他当前为你的应用程序启动了音频：

1. 您将需要用户交互来启动您的音频。因此，您的应用程序或游戏可能有一个开始屏幕或欢迎按钮，需要单击才能进入主菜单或开始游戏。绑定到用户事件（接受的事件是：“click”、“touchend”、“doubleclick”和“keydown”）并为您的<audio>.

2. 绑定到<audio>. 当您的源准备好播放时触发此事件。在这里，您现在可以调用 play()、pause() 或等待其他交互。因此音频已准备就绪，但现在您可以完全控制何时开始或停止声音。

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

Answer 2

到目前为止，我看到的唯一解决方案是创建一个 shell 应用程序并将 Web 应用程序放在 UIWebView 中。

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

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

我也很想知道如何在一个普通的网络应用程序中做到这一点。

Answer 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.

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