SoundCloud Widget外部控制iOS问题 [英] SoundCloud Widget External Control iOS issue

问题描述

我在iOS上使用html5小部件的外部控件发现了一个错误，我已经使用iphone和ipad进行了测试。小部件内的控件正常工作。但是在我的客户网站 http://www.bushytunes.net 和widget api playground http://w.soundcloud.com/player/api_playground.html 外部控件运行错误。

I have found a bug using the external controls for the html5 widget on iOS, i have tested with iphone and ipad. The controls inside the widget work ok. However on my clients site http://www.bushytunes.net and the widget api playground http://w.soundcloud.com/player/api_playground.html the external controls run an error.

以下是来自小部件游乐场的控制台打印：

Here is what the console from the widget playground prints:

SC.Widget.Events.PLAY {"loadedProgress":null,"currentPosition":0,"relativePosition":0}
SC.Widget.Events.PAUSE {"loadedProgress":null,"currentPosition":0,"relativePosition":0}
SC.Widget.Events.PLAY {"loadedProgress":null,"currentPosition":0,"relativePosition":0}
SC.Widget.Events.PLAY {"loadedProgress":null,"currentPosition":0,"relativePosition":0}
SC.Widget.Events.PLAY {"loadedProgress":null,"currentPosition":0,"relativePosition":0}
SC.Widget.Events.READY {}
Loading...

谢谢，James

推荐答案

TL; DR ：iOS 6应该可以通过用户操作限制一个调用来启动，iOS5及以下版本可能无法修复。

TL;DR: iOS 6 should work with a limitation of a call to play to be init by user action, iOS5 and below probably won't get a fix.

我们会尝试通过某种方式来解决这个问题，但很可能很快就会得到一个合适的解决方案。

We'll try to resolve this with some kind of a hack, but most probably this won't get a proper solution any time soon.

SoundCloud Widget正在使用HTML5 Audio在iOS上播放声音。在iOS中开始播放有两个限制：

SoundCloud Widget is using HTML5 Audio to play sounds on iOS. There are two limitations on starting playback in iOS:

1. 播放必须由用户操作启动（因此在活动中处理程序）


2. 对 audio.play 方法的调用必须位于该事件处理程序的同步调用堆栈中。

1. Playback must be started by user action (so within event handler)
2. The call to audio.play method has to be within synchronous call stack of that event handler.

这意味着，这是有效的：

This means, that this works:

document.querySelector('.play-button').addEventListener('click', function () {
    audioController.play();
}, false);

但这不是：

document.querySelector('.play-button').addEventListener('click', function () {
    setTimeout(function () {
        audioController.play();
    }, 500);
}, false);

iframe之间的跨域通信只能以异步方式进行。我们的实现是使用 postMessage DOM API，但即使是较旧的技术，例如使用 location.hash 是异步的。这意味着我们目前没有看到通过iOS5及更低版本的API启用播放的方式（因为也没有Flash回退）。

Cross-domain communication between iframes is only possible in asynchronous manner. Our implementation is using postMessage DOM API, but even older techniques such as Fragment Identifier Messaging (FIM) that is using location.hash are asynchronous. This means we don't currently see a way of enabling playback through API for iOS5 and below (as there is also no Flash fallback).

但是，那里也是个好消息： iOS6已经放弃了限制No2 。这意味着只要用户操作调用对 play 的API调用，您就能播放声音。即使您的父窗口和窗口小部件的iframe之间的通信仍然是异步的。不幸的是iOS还没有放弃此限制。

However, there are also good news: iOS6 has dropped the limitation No2. This means that as long as the API call to play is called by user action, you'll be able to play sounds. Even though the communication between your parent window and widgets' iframe is still async. Unfortunately iOS hasn't dropped this limitation.

我希望这有助于我如果我们找到合适的解决方法，请更新此答案。

I hope this helps and I'll update this answer in case we find a proper workaround.

我的建议是使用像 Audio5JS 或 SoundManager2 ，以防在iOS上控制播放对您的app。

My suggestion would be to build your own custom player with a library like Audio5JS or SoundManager2 in case controlling playback on iOS is crucial for your app.

你可以在 developer.apple.com 资源。

这篇关于SoundCloud Widget外部控制iOS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！