SoundCloud Widget外部控制iOS问题

Question

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

以下是widget操作系统中的控制台打印:

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中开始播放有两个限制:

1. 必须通过用户操作启动播放(因此在事件处理程序中)
2. 对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之间的跨域通信只能以异步方式进行.我们的实现是使用postMessageDOM API,但即使是使用的片段标识符消息传递(FIM)等旧技术location.hash也是异步的.这意味着我们目前没有看到通过iOS5及更低版本的API启用播放的方式(因为也没有Flash回退).

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

我希望这会有所帮助,如果我们找到合适的解决方法,我会更新此答案.

我的建议是使用像Audio5JS或SoundManager2这样的库来构建自己的自定义播放器,以防iOS上的播放对您的应用至关重要.

您可以在developer.apple.com资源上看到我所谈论的模糊描述.