在移动 Safari 上自动播放音频答案

【问题标题】：Autoplay audio on mobile safari在移动 Safari 上自动播放音频
【发布时间】：2012-10-27 07:37:05
【问题描述】：

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

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

【问题讨论】：

几周前我想做类似的事情，但我的搜索没有结果......
我已经用谷歌搜索了这个问题，但没有发现任何有用的东西。请 Stackoverflow，你是我唯一的希望...
我使用AudioContext 获得了 Firefox 和 Chrome 的解决方法，但我没有在 Safari 上尝试（如果您有 Safari 手机，请确认它是否有效）。请参阅我对类似问题的回答stackoverflow.com/a/46485784/2342518 [让我们希望@boz 从现在开始是最后一个没有结果的搜索☺]
gist.github.com/ufologist/50b4f2768126089c3e11
opera mini in ios 默认支持自动播放，而 chrome、firefox 和 safari 不支持也不提供开启选项。

标签： html audio mobile-safari autoplay

【解决方案1】：

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

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

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

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

【讨论】：

不幸的是，我们制作当前产品组合的 HTML5 版本的全部意义在于它们应该与设备无关。将其包装在 UIWebView 中仅意味着 iOS :-( 感谢您的回答...

【解决方案2】：

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

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

您将需要用户交互来启动您的音频。因此，您的应用或游戏可能有一个开始屏幕或一个欢迎按钮，需要单击才能进入主菜单或开始游戏。绑定到用户事件（接受的事件是：“click”、“touchend”、“doubleclick”和“keydown”）并为您的<audio> 调用 load() 方法。
绑定到<audio> 的“canplaythrough”事件。当您的源准备好播放时触发此事件。在这里，您现在可以调用 play()、pause() 或等待其他交互。因此音频已准备就绪，但现在您可以完全控制何时开始或停止声音。
我还建议您在移动客户端上使用音频精灵。 iOS（和 Android？）通过 Singleton 在内部实现了音频支持。这意味着您不能像在桌面浏览器中那样拥有 10 个音频元素并同时播放不同的声音。您只能播放一个文件！所以改变不同声音的来源需要很多时间。使用音频精灵，您可以在用户第一次与您的网站或游戏交互时启动您的精灵。暂停你的精灵，当你需要播放声音时，你必须将 currentTime 设置为精灵的开头，并在文件的 currentTime 到达精灵的结尾时暂停精灵。有一个 timeupdate 事件，您可以在其中检查精灵的 currentTime。

如果你更感兴趣，我可以为你准备我的 javascript 音频精灵播放器！！

【讨论】：

感谢您的回答，不幸的是，我们的游戏必须在没有额外用户交互的情况下启动，因此您的“破解”对我们不起作用。我们已经使用了音频精灵，并且效果很好（大多数情况下！）。我会给你正确的答案，因为现在似乎没有其他解决方案......
有机会使用AudioContext；看我的回答stackoverflow.com/a/46485784/2342518
你知道当用户点击按钮时我是否可以加载多个不同的音频元素吗？
@Marimba 这只适用于桌面。就像我写的：内部音频支持是作为单例实现的（对于 iOS）。所以这里没有机会欺骗
@SimonFranzen 我发现那不是真的。您实际上可以在 Safari 上加载多个音频元素。您需要播放它们，然后暂停并保存以供以后使用。

【解决方案3】：

我相信我刚刚为自己的应用解决了这个问题。

步骤，

控制器加载完毕，

然后....在viewDidLoad中

让您的网络视图加载 HTML：loadHTMLString:htmlFile baseURL:[self getBasePath]];

那么...在 web 视图上设置 mediaPlaybackRequiresUserAction = NO。

如果你设置得太早，我认为 html 的负载会重置它。

【讨论】：

【解决方案4】：

我有一个机器人聊天应用程序，其中包含语音消息，我需要它们在需要时自动播放......所以这就是我的 Angular 应用程序中对我有用的方法：

只需将点击事件侦听器附加到文档并调用player.load()，之后只要您设置player.src = x;，它就会自动播放。

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

【讨论】：