html5 打包成adk,Cors Html5 Jquery / SoundManager wierdness

所以我在使用soundcloud api和html 5音频播放器时遇到了一些问题.

主要目标是仅使用html5访问所有公开的soundcloud音乐.

我使用以下内容.

//C# api call returning json object. Cut down version of the code as it isnt the issue.

var method "http://api.soundcloud.com/users/{0}/favorites.json"

var query = "?client_id=" + soundCloudClientId;

WebClient client = new WebClient();

return client.DownloadString(string.Format(method,artistId) + query);

我从soundcloud回来了.对于一些相关的测试用例再次减少

{

"Songs":

[

{

"Title": "Rio","Artist": "Netsky","Album": "","Duration": "03:49","Artwork": "https://i1.sndcdn.com/artworks-000120037955-m8t78n-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/210032350/stream","Libary": "SoundCloud","TrackId": "210032350"

},{

"Title": "FreqAsia x Nasty Wizard - Episode 01","Artist": "Frequency Asia","Duration": "17:50","Artwork": "https://i1.sndcdn.com/artworks-000120265160-sn1a4k-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/210368447/stream","TrackId": "210368447"

},{

"Title": "Episode 023 - June 2015","Duration": "44:15","Artwork": "https://i1.sndcdn.com/artworks-000120689935-24wvqo-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/210995770/stream","TrackId": "210995770"

},{

"Title": "Porter Robinson - Flicker","Artist": "Porter Robinson","Duration": "04:39","Artwork": "https://i1.sndcdn.com/artworks-000086441918-ds0915-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/160632928/stream","TrackId": "160632928"

}

]

}

这是通过我的页面上的ajax调用,然后结果我在页面上渲染出一堆html,并绑定到onclick函数,看起来像这样.

$.ajax({

url: 'http://api.soundcloud.com/tracks/' +

widget.get("TrackId") +

'/streams?' +

'client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +

'&format=json&_status_code_map[302]=200',dataType: 'json',method: "GET",success: function (resp) {

$("#myAudio").attr("src",resp.http_mp3_128_url);

$("#myAudio")[0].play();

},error: function (req,status,err) {

console.log('something went wrong',err);

}

});

$(“#myAudio”)等于的地方

src=""

crossorigin="anonymous"

type="audio/mpeg"

controls="controls"

style="width: 100%">

Your user agent does not support the HTML5 Audio element. Woof..

现在这适用于我的大约一半的歌曲.

适用于Rio – NetSky – 210032350.

然而对于波特罗宾逊 – 闪烁 – 它没有.我被抛出以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc2NDV9fX1dfQ__&Signature=JN5bWI9dRW6a-KAczl0tjeTdoKmSa5BS8eGdI3I9E~NX9N~L-E9M2LRuCSuOc0jN0vk53VodFvwtArHfnFpedZjlo-7fmRwKMcZd5LAkGvCww0OiAztuzk4GESmLF8zE8RhKOF5UlNCJNLPZYM2BLgZPuMzsfLeQSLGPDbCHkiJazXZYoPjWKS8x3AYq4IBuwrzHsDOPT3GJN0XU89ugCm8x-cEZX946udYeRNrTwVUsVpTGjXwBE8zxRIE8AZFssptJsb9rCDpq9AlSoVBmII7RqYC264R9eovCqH8OTHGrQaeCQ9sXncwckjLpa70bjouCT-1UV6ampEIs9wTaKQ__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

作为一个奇怪的怪癖,如果我在更改了src之后从我的页面中删除了crossorigin =“anonymous”(手动在firbug中)它会播放歌曲(正确).

更糟糕的是,之后所有歌曲都播放但没有声音>：S.

从头开始删除crossorigin =“anonymous”无效.

但是,如果我使用soundmanager方法,它似乎工作正常.

SC.stream(

"/tracks/" + widget.get("TrackId"),{

useHTML5Audio: true,multiShotEvents: true

},function (sound) {

// This is Pure Evil

$("#myAudio").remove();

sound.play();

var newPlayer = $(sound._player._html5Audio);

newPlayer.attr('id',"myAudio");

newPlayer.attr('type',"audio/mpeg");

//newPlayer.attr('crossorigin',"anonymous");

newPlayer.attr('controls',"controls");

newPlayer.attr('style',"width: 100%");

$('#AudioPlayerContainer').append(newPlayer);

audio = $("#myAudio");

audio[0].play()

}

);

现在回到问题的核心.

html5方法和Sound Manager方法都使用get请求命中以下url.

https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc3MDl9fX1dfQ__&Signature=w9wbiSg6eYJd6LESarJl4hbTNPwEMa0tV8q1rC30E~b5UcicVw~mkR6RfMaY4pYSE489nNFjXUTTPUYJ-2T6BHnarxBl8YcRsmAsRbp3BzI6AlkutzqV4LOTma0r08WA9CpuMRJRyOnfwA271sQeYz~FkKadkTs1zKTyBbKc~WxAQvqkfwXimYpAynWmGuw7mFc-AEXEQ9wwPDBj6EJD5R1NtvBPia-jtJEdfO39I4BIwGGLeu57xIQk0GcYWhJ2rEspmfDh~Z99dKW0H5tGNC3UyVGG7cb-PKiyVOkIdKRz3paqZ6~Xu65nMC5EVD1dc7T8~sYTLsUVJkNu~aySuw__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ

Html5请求和响应标头

Host: cf-media.sndcdn.com

User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0

Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5

Accept-Language: en-US,en;q=0.5

Origin: http://localhost:58434

Range: bytes=0-

Referer: http://localhost:58434/Home/Main

Connection: keep-alive

Accept-Ranges: bytes

Age: 361541

Cache-Control: max-age=252460800

Connection: keep-alive

Content-Length: 4465057

Content-Range: bytes 0-4465056/4465057

Content-Type: audio/mpeg

Date: Thu,09 Jul 2015 23:49:29 GMT

Etag: "b46b442c81cdb2d253827a19291d2847"

Last-Modified: Mon,28 Jul 2014 11:56:24 GMT

Server: AmazonS3

Via: 1.1 5c5638d5b5fb0e5b90e36788792360f2.cloudfront.net (CloudFront)

X-Amz-Cf-Id: sSqydrdg2dAC7O1q3vUszcSKjd-qPAvtMbwijwwKF_MBZ3m1yHazcA==

X-Cache: Hit from cloudfront

x-amz-meta-bitrate: 128

x-amz-meta-duration: 279091

x-amz-meta-job: nwtEnjuJwESE

x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H

Sound Manager请求和响应标头

Host: cf-media.sndcdn.com

User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0

Accept: audio/webm,en;q=0.5

Range: bytes=0-

Referer: http://localhost:58434/Home/Main

Connection: keep-alive

Accept-Ranges: bytes

Age: 361891

Cache-Control: max-age=252460800

Connection: keep-alive

Content-Length: 4465057

Content-Range: bytes 0-4465056/4465057

Content-Type: audio/mpeg

Date: Thu,28 Jul 2014 11:56:24 GMT

Server: AmazonS3

Via: 1.1 b93cfa23ea94b492bc1948ec35e51f94.cloudfront.net (CloudFront)

X-Amz-Cf-Id: 6KjUx89xvaKdOIvl-7IcrnNhhhnCVr2Fk_1Co-S4vt4KdytC6GfJDg==

X-Cache: Hit from cloudfront

x-amz-meta-bitrate: 128

x-amz-meta-duration: 279091

x-amz-meta-job: nwtEnjuJwESE

x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H

请注意,Origin：存在于第一个请求中而不是第二个请求中.现在我试着摆弄.

How to make an AJAX-request look like a regular,normal request.

摆脱标题但无济于事.

那么实际的问题是如何让交叉原始请求像在声音管理器中一样正常运行？

/有没有明显的东西,我错过了造成这种情况.

____ Json P根据评论尝试____

$(document).ready(function () {

$.ajax({

url: 'https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY5MjUxNDl9fX1dfQ__&Signature=bd0d9hCWuXTWtdkHMVJEAYMjOyT31G1nAt9Ak3A1kKHGvNu~Ix5SqJ75OHr~R1MlfaVX3scQoqu8LSTfRdZUgOKnzRVYUpZAIKBKC-vcmdy1LNW9ounvZDdgMU6o9th4wiO2fx3HEu~UDmrypW6SgmrHWt0Smp3S8l0ypt80iKESRJHdRYI6Y~dewta~f3CGe7Om8EfzO8ZDwieGVP2sxmrYCf6rnSNKwXtcH1OXmPdkcKEJiCrxNzL8xFfNI8ONXjHm6Vj05EFc6dYOEAIxvhMR6A~uqex7tytxFocrX9C0dCL~ND-89K7oSkWgBT28WgQ8fMySx7HTTHbc3gwd4A__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ',dataType: 'jsonp',async: false,success: function (data) {

$('#myAudio').attr("src","data:audio/mp4;base64,"+data);

$('#myAudio')[0].mAudioPlayer.load();

$('#myAudio')[0].mAudioPlayer.play();

}

});

});