JavaScript:用于流媒体的简单 SoundCloud API 示例无法在 Safari 中正常工作

Question

我对我几天前正在研究的一个简单的 soundcloud api 流示例感到非常沮丧。它基本上只是随机选择一个 SC-url 并打印出卷信息。我使用 Gregg Tavares 的 audiostreamsource.js 库来创建音频上下文，并使用 p5.js 来创建段落。就是这样...它在 Fireforx/Chrome 上运行得非常好。但由于某种原因，它只在我刷新页面时在 Safari 中起作用。有时它甚至会在 Safari 中崩溃。 :( 我想我只是没有足够的经验来解决这个问题。我真的尝试从每个可能的 Angular 解决它。现在我陷入了困境......:(

您可以在这里看到我的小例子:http://christianlosert.com/test/01/编辑:要查看问题，您必须将上面的链接粘贴到新的浏览器选项卡中。然后您会看到几毫秒后流媒体在 Safari 中中止。

有人能看出我的错误吗？

PS:在 Gregg Tavares 的帮助下，我尝试创建一个不使用 audiostreamsource.js/p5.js 库的流式传输示例，以确保错误在我这边的代码中。奇怪的是，这个示例仅适用于 Safari(不适用于 Firefox/Chrome):http://christianlosert.com/test/greg/

我真的完全不知道这里发生了什么

Answer 1

soundcloud 3.0 库不适用于 Safari。参见

soundcloud's 2.0 sdk works but 3.0 does not as of Oct 29th, 2015

你可以

1. 使用 soundcloud 2.0 库(问题:即使不使用 flash，它也会初始化)

2. 只需使用一些 XHR 代码自行发出 soundcloud API 请求

   基本上，您向

   发出 XHR 请求

   https://api.soundcloud.com/resolve?url=<musicUrl>&client_id=<yourclientid>&format=json&_status_code[302]=200
   

   注意:您需要调用encodeURIComponent上<musicUrl>可能在 _staus_code[302]

   如果结果的状态为 302，则按照位置进行操作

   var result = JSON.parse(resultString);
   if (result.status.substr(0, 3) === "302" && result.location) {
   
      do XHR on result.location
   
   else
   
      use result as normal