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 が表示されます。エラー。Client-Side-Javascript から XHttpRequest 経由で Audio リソースをロードする方法はありますか、それとも不可能ですか ( 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();

私が言ったように、これは単なる回避策であり、実稼働環境にとって良い解決策ではありませんが、Web Audio アプリを使い続けるのに役立ちました.

Soundcloud、オーディオファイルに CORS ヘッダーを追加する可能性はありますか? :)

于 2012-06-25T09:39:36.093 に答える
5

必ずしも XHR の使用に縛られていない場合は、Same-Origin ポリシーに縛られることなく、新しい<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 に答える