Html 在移动 Safari 上自动播放音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13266474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autoplay audio on mobile safari
提问by Simple Simon
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).
在我被烧死之前，我知道这目前不起作用，因为 Apple 担心用户自动下载音频文件的可怕成本（与他们试图削弱网络应用程序无关，因为他们没有得到他们的30% 来自他们）。
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?
但是，我的问题是：有没有人找到一个狡猾的解决方法？我只想在游戏启动时播放启动声音，目前必须等待用户单击某处才能播放音频。你们其中一个聪明的家伙现在一定已经开始工作了吗？
采纳答案by Simon Franzen
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!
没有机会让自动播放在移动浏览器中工作。Android 和 iOS 不允许这样做，我个人认为这是一个可行的限制！想象一下，您将在开始时打开播放和难看的声音的每一秒网站！
But you can make a little hack, so that the user will not remark that he currently started the audio for your application:
但是你可以做一个小技巧，这样用户就不会说他当前为你的应用程序启动了音频：
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>.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.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.
您将需要用户交互来启动您的音频。因此，您的应用程序或游戏可能有一个开始屏幕或欢迎按钮，需要单击才能进入主菜单或开始游戏。绑定到用户事件（接受的事件是：“click”、“touchend”、“doubleclick”和“keydown”）并为您的
<audio>.绑定到
<audio>. 当您的源准备好播放时触发此事件。在这里，您现在可以调用 play()、pause() 或等待其他交互。所以音频已准备就绪，但现在您可以完全控制何时开始或停止声音。我还建议您在移动客户端上使用音频精灵。iOS（和 Android？）通过单例在内部实现了音频支持。这意味着您不能像在桌面浏览器中一样，同时拥有 10 个音频元素并播放不同的声音。您只能播放一个文件！所以改变不同声音的来源需要很长时间。使用音频精灵，您可以在用户第一次与您的网站或游戏互动时启动您的精灵。暂停您的精灵，当您需要播放声音时，您必须将 currentTime 设置为精灵的开头，并在文件的 currentTime 到达精灵的末尾时暂停精灵。有一个 timeupdate 事件，您可以在其中检查精灵的 currentTime。
If you are more interested I can prepare my javascript audio sprites player for you!!
如果您更感兴趣，我可以为您准备我的 javascript 音频精灵播放器！！
回答by Jason
Only solution I have seen so far is to create a shell app and put the web app inside a UIWebView.
到目前为止，我看到的唯一解决方案是创建一个 shell 应用程序并将 Web 应用程序放在 UIWebView 中。
http://flowz.com/2011/03/apple-disabled-audiovideo-playback-in-html5/
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.
我也很想知道如何在一个普通的网络应用程序中做到这一点。
回答by user3799852
I believe I just solved this for my own app.
我相信我只是为我自己的应用程序解决了这个问题。
The steps,
步骤，
Controller loads up,
控制器加载，
Then.... in viewDidLoad
然后....在 viewDidLoad
have your web view load the HTML : loadHTMLString:htmlFile baseURL:[self getBasePath]];
让你的 web 视图加载 HTML : loadHTMLString:htmlFile baseURL:[self getBasePath]];
THEN... set mediaPlaybackRequiresUserAction = NO on the webview.
然后...在 web 视图上设置 mediaPlaybackRequiresUserAction = NO。
If you set it too soon, I think the load for the html resets it.
如果您设置得太早，我认为 html 的负载会重置它。
回答by Exlord
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 :
我有一个带有语音消息的机器人聊天应用程序，我需要它们在需要时自动播放......所以这在我的 angular 应用程序中对我有用：
just attach a click eventlistener to document and call player.load(), after that whenever you set player.src = x;it will autoplay.
只需将单击事件侦听器附加到文档并调用player.load()，之后无论何时设置player.src = x;它都会自动播放。
<audio id="voicePlayer" controls autoplay playsinline #voicePlayer></audio>
<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';
