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

Question

既然你可以通过XHR调用Soundcloud API(因为它发送的是CORS标题http://backstage.soundcloud.com/2010/08/of-cors-we-do/,对吗？)我想知道这是不是可以使用音频数据本身,例如轨道的stream_url.

当尝试使用Web Audio API使用XHR(来自客户端)打开stream_url时,我得到Access-Control-Allow-Origin不允许使用Origin.错误.有没有办法从Client-Side-Javascript通过XHttpRequest加载音频资源,或者是不可能的(/sf/ask/761031771/) ？

会很棒,因为这将允许一些非常酷的Web Audio API.

谢谢!

UPDATE

问题可能与调用时获得的302重定向有关:

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

或其他一些请求实际媒体文件的电话(见评论).

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标头,而重定向的位置则不具有CORS标头.

Answer 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();

正如我所说,这只是一种解决方法,对于生产环境来说不是一个很好的解决方案,但帮助我继续使用我的Web Audio App.

Soundcloud,是否有机会在音频文件中添加CORS标头？:)

Answer 2

如果您不一定要使用XHR,那么您可以创建新<audio/>元素并将其设置src为您想要的任何资产,而不必依赖于同源策略.

较新版本的Chrome将允许您通过媒体元素创建AudioNode实例MediaElementAudioSourceNode- 因此您仍然可以使用所有酷炫的新Web音频内容.

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();

请原谅可怕的代码.已经很晚了,我累了.