Question

我在iOS上使用html5小部件的外部控件发现了一个错误，我已经使用iphone和ipad进行了测试。小部件内的控件正常工作。但是，在我的客户网站http://www.bushytunes.net和小部件api playground 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 Audio在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资源上看到我所谈论的模糊描述。

Answer 2

我无法完全判断@gryzzly是否试图这么说，但 Widget API的外部控件在移动设备上完全被破坏。答案确实解释了为什么 - 你不能同步告诉iFrame播放声音，但我理解正确的iframe.contentWindow调用是同步的吗？我可能错了。

尝试将手机定位到小部件API游乐场：https://w.soundcloud.com/player/api_playground.html

即使在那里，除非你按下橙色按钮，否则它实际上并没有播放。

非常恼人，因为没有应用程序可以绕过流API限制。在移动设备上使用SoundCloud时，似乎没有办法让每天可能遇到超过15,000个请求/播放的网站。我只想要连续播放音乐。

SoundCloud Widget外部控制iOS问题

2 个答案: