4

由于您可以通过 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]

或其他请求实际媒体文件的呼叫（请参阅评论）。

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

4

2 回答 2

6

好吧，只要音频文件本身不附带 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 标头添加到音频文件中？:)

于 2012-06-25T09:39:36.093 回答
5

如果您不一定要使用 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();

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

于 2012-06-27T04:26:08.140 回答