在移动旅行中自动播放音频

时间:2012-11-07 09:13:08

标签: html5 audio mobile-safari autoplay

在我被炸死之前,我知道这不起作用,因为Apple担心其用户自动下载音频文件的可怕成本(与他们试图削弱网络应用程序无关从他们那里得到他们的30%)。

然而,我的问题是:有没有人找到一个狡猾的解决方法呢?我只想在游戏发布时播放启动声音,目前必须等待用户点击某处才播放音频。你们其中一个聪明的人现在一定有这个工作吗?

4 个答案:

答案 0 :(得分:12)

没有机会在移动浏览器中使用自动播放功能。 Android和iOS不允许它和我个人认为这是一个可行的禁闭!想象一下,你会在每个第二个网站开始播放戏剧和丑陋的声音!

但你可以做一点点破解,这样用户就不会说他目前为你的应用程序启动了音频:

  1. 您需要用户互动才能启动音频。因此,您的应用或游戏可能有一个启动屏幕或欢迎按钮,需要点击进入主菜单或开始游戏。绑定到用户事件(接受的事件是:“click”,“touchend”,“doubleclick”和“keydown”)并为<audio>调用load()方法。

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

  3. 我还建议您在移动客户端上使用音频精灵。 iOS(和Android?)通过Singleton在内部实现了音频支持。这意味着您不能像在桌面浏览器中那样拥有10个音频元素并且可以同时播放不同的声音。你只能播放一个文件! 因此,更改不同声音的来源需要花费很多时间。使用音频精灵,您可以在用户首次与您的网站或游戏进行互动时启动您的精灵。暂停你的精灵,当你需要播放声音时,你必须将当前时间设置为精灵的开头,并在文件的currentTime到达精灵结束时暂停精灵。有一个timeupdate事件,你可以检查你的精灵的当前时间。

  4. 如果你更感兴趣,我可以为你准备我的javascript音频精灵播放器!!

答案 1 :(得分:3)

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

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

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

我也非常想知道如何在一个普通的网络应用程序中执行此操作。

答案 2 :(得分:0)

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

步骤,

控制器加载,

然后....在viewDidLoad

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

然后...在webview上设置mediaPlaybackRequiresUserAction = NO。

如果你设置得太快,我认为html的加载会重置它。

答案 3 :(得分:0)

我有一个机器人聊天应用程序,该应用程序具有语音消息,我需要在需要时自动播放它们……所以这是我的角度应用程序中对我有用的内容:

只需将点击事件监听器附加到文档并调用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';