ios - SoundCloud Widget外部控制iOS问题

Question

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

这是小部件游乐场中的控制台打印的内容:

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

谢谢，詹姆斯

Answer 1

TL; DR :iOS 6应该可以通过用户操作限制播放才能初始化，iOS5及以下版本可能无法修复。

我们将尝试通过某种方式来解决此问题，但是很可能这将很快无法得到适当的解决方案。

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

播放必须由用户操作(在事件处理程序中)启动

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

这意味着，这可行:

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的较旧技术(例如片段标识符消息传递(FIM))也是异步的。这意味着我们目前还没有找到一种通过iOS5及以下版本的API启用播放的方法(因为也没有Flash后备功能)。

但是，还有一个好消息: iOS6取消了限制No2 。这意味着只要用户操作调用对 play的API，您就可以播放声音。即使父窗口与小部件的iframe之间的通信仍然是异步的。不幸的是，iOS并未取消此限制。

希望这对您有所帮助，如果我们找到合适的解决方法，我将更新此答案。

我的建议是使用 Audio5JS或 SoundManager2之类的库构建自己的自定义播放器，以防在iOS上控制播放对您的应用至关重要。

您可以在 developer.apple.com资源上看到我在说什么的模糊描述。