Question

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

当尝试使用Web Audio API使用XHR（来自客户端）打开stream_url时，我得到了一个来源，Access-Control-Allow-Origin。错误。有没有办法从Client-Side-Javascript通过XHttpRequest加载音频资源，还是不可能（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]

或其他请求实际媒体文件的电话（见评论）。

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标头，而重定向的位置则没有。

Answer 1

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

根据我的理解，这也是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标头？ :)

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

请原谅可怕的代码。已经晚了，我累了。

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

2 个答案: