通过客户端 XHR 打开 Soundcloud Track 的 stream_url？答案

【问题标题】：Open stream_url of a Soundcloud Track via Client-Side XHR?通过客户端 XHR 打开 Soundcloud Track 的 stream_url？
【发布时间】：2012-06-25 07:33:30
【问题描述】：

因为您可以通过 XHR 调用 Soundcloud API （因为 CORS 标头它发送 http://backstage.soundcloud.com/2010/08/of-cors-we-do/，对吗？）我想知道音频数据本身是否可以做到这一点，例如轨道的 stream_url。

当尝试使用 Web Audio API 使用 XHR（从客户端）打开 stream_url 时，我得到一个 Origin is not allowed by Access-Control-Allow-Origin. 错误。有没有办法通过 XHttpRequest 从 Client-Side-Javascript 加载音频资源，还是不可能（https://stackoverflow.com/questions/10871882/audio-data-api-and-streaming-a-no-go）？

会很棒，因为这将允许使用 Web Audio API 做一些非常酷的事情。

谢谢！

更新

问题可能与您在调用时收到的 302 重定向有关：

http://api.soundcloud.com/tracks/5646378/stream.json?client_id=[client_id]

或其他请求实际媒体文件的调用（参见 cmets）。

HTTP/1.1 302 Moved Temporarily
Server: nginx
Date: Sun, 24 Jun 2012 09:58:01 GMT
Content-Type: application/json; charset=utf-8
Connection: keep-alive
Cache-Control: no-cache
Location: http://ec-media.soundcloud.com/[...]
X-Runtime: 41
Content-Length: 339
Access-Control-Allow-Methods: GET, PUT, POST, DELETE
Access-Control-Allow-Headers: Accept, Authorization, Content-Type, Origin
Access-Control-Allow-Origin: *
X-Cacheable: NO:Cache-Control=no-cache
X-Varnish: 2433107209
Age: 0
Via: 1.1 varnish
X-Cache: MISS

HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: max-age=252460800
Content-Type: audio/mpeg
Date: Sun, 24 Jun 2012 09:58:01 GMT
ETag: "c2241e[...]41bbcf7c0d32f09"
Last-Modified: Tue, 28 Sep 2010 17:57:26 GMT
Server: ECAcc (fra/D484)
x-amz-id-2: oB0XzQcc/[...]+mAr/a
x-amz-meta-bitrate: 128
x-amz-meta-duration: 152900
x-amz-meta-job: t405jWkfNvx7
x-amz-request-id: D65[...]E1355
X-Cache: HIT
Content-Length: 2445478

原始 JSON 响应具有 CORS 标头，而重定向的位置没有。

【问题讨论】：

应该可以工作，例如 [audiojedit.herokuapp.com (audiojedit.herokuapp.com) 如果你是从 localhost 运行的，这可能是个问题
谢谢，但在通过 XHR 实际加载音频文件时，您似乎正在使用域上的路由。（[user]/[track]/audio，对吗？）您是在使用某种代理，还是从服务器端打开并重新流式传输它们？我很想找到一个解决方案，如何通过 XHR 在 JS 中直接打开 Soundcloud 音频文件。
这不是我的工作！我基本上和你有同样的问题。他们拉到服务器上，然后拉到客户端，但它应该是相同的原则，不是吗？我已经打开了一个 mp3 流，但是将此错误记录到控制台 XMLHttpRequest 无法加载 ec-media.soundcloud.com/…。无法从 null 发出任何请求。
我也有这个错误。我的猜测是它来自流 URL 被重写到媒体文件的实际存储位置。当我使用硬编码的已解析 URI 时消失了。（我认为这可以在 JS 中以某种方式解决）。但是后来我得到了问题中描述的CORS错误。在我看来，流式音频文件可能不会发送那些 CORS 标头...
是的，也遇到了 cors 错误，也许 jsonp 会帮助http://developers.soundcloud.com/docs#crossdomain

标签： streaming html5-audio soundcloud cors web-audio-api

【解决方案1】：

好吧，只要音频文件本身不附带 CORS 标头（请参阅问题中的 curl -IL 输出），唯一对我有用的解决方案是打开音频文件并自己添加标头。

据我了解，这也是 https://github.com/tsenart/audiojedit 等其他应用程序所做的。（在 node.js 中）这具有将二进制文件的流量转移到您的服务器的巨大缺点，否则该服务器将由 soundcloud.com 提供服务。

您可以使用 PHP 打开文件，添加标题并使用以下内容重新流式传输：

$fp = fopen('http://api.soundcloud.com/tracks/[track_id]/stream.json?client_id=[client_id]', 'rb');

header("Content-Type: audio/mpeg");
header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE");
header("Access-Control-Allow-Headers: Accept, Authorization, Content-Type, Origin");
header("Access-Control-Allow-Origin: *");
fpassthru( $fp );

exit();

正如我所说，这只是一种解决方法，而不是生产环境的好解决方案，但帮助我继续使用我的网络音频应用程序。

Soundcloud，是否有机会将 CORS 标头添加到音频文件中？ :)

【讨论】：

【解决方案2】：

如果您不一定要使用 XHR，您可以创建新的 <audio/> 元素并将其 src 设置为您想要的任何资产，而不受同源策略的约束。

较新版本的 Chrome 将允许您通过 MediaElementAudioSourceNode 从媒体元素创建 AudioNode 实例——因此您仍然可以使用所有酷炫的新网络音频。

var audio, body, context, source;
audio = document.createElement('audio');
body = document.getElementsByTagName('body')[0];
audio.setAttribute('src', 'http://kevincennis.com/mix/assets/sounds/1901_gtr1.mp3');
body.appendChild(audio);
context = new webkitAudioContext();
source = context.createMediaElementSource(audio);
source.connect(context.destination);
source.mediaElement.play();

请原谅可怕的代码。时间不早了，我累了。

【讨论】：