So habe ich einige Probleme mit dem Soundcloud-Api-und HTML-5-Audio-Player.Cors Html5 Jquery/SoundManager Wierdness
Das Hauptziel ist es, mit nur html5 auf alle öffentlich verfügbaren Soundcloud-Tunes zuzugreifen.
Ich verwende Folgendes.
//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);
Ich bekomme das von soundcloud zurück. Reduzieren Sie wieder für einige relevanten Testfälle
{
"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",
"Album": "",
"Duration": "17:50",
"Artwork": "https://i1.sndcdn.com/artworks-000120265160-sn1a4k-t500x500.jpg",
"StreamUrl": "https://api.soundcloud.com/tracks/210368447/stream",
"Libary": "SoundCloud",
"TrackId": "210368447"
},
{
"Title": "Episode 023 - June 2015",
"Artist": "Frequency Asia",
"Album": "",
"Duration": "44:15",
"Artwork": "https://i1.sndcdn.com/artworks-000120689935-24wvqo-t500x500.jpg",
"StreamUrl": "https://api.soundcloud.com/tracks/210995770/stream",
"Libary": "SoundCloud",
"TrackId": "210995770"
},
{
"Title": "Porter Robinson - Flicker",
"Artist": "Porter Robinson",
"Album": "",
"Duration": "04:39",
"Artwork": "https://i1.sndcdn.com/artworks-000086441918-ds0915-t500x500.jpg",
"StreamUrl": "https://api.soundcloud.com/tracks/160632928/stream",
"Libary": "SoundCloud",
"TrackId": "160632928"
}
]
}
Dies über Ajax auf meiner Seite aufgerufen wird und dann mit den Ergebnissen, die ich mache, um eine Reihe von HTML-Datei auf der Seite mit Bindungen zu Onclick-Funktion, die wie folgt aussieht.
$.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', status, err);
}
});
Wo $ ("# myAudio") zu
gleich<audio id="myAudio"
src=""
crossorigin="anonymous"
type="audio/mpeg"
controls="controls"
style="width: 100%">
Your user agent does not support the HTML5 Audio element. Woof..
</audio>
Jetzt funktioniert dies für etwa die Hälfte meiner Lieder. Es funktioniert für Rio - NetSky - 210032350. Allerdings für Porter Robinson - Flicker - tut es nicht. Ich erhalte die folgende Fehlermeldung ausgegeben:
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).
Als seltsame Marotte, wenn ich crossorigin = „anonym“ von meiner Seite (manuell in firbug) entfernen, nachdem ich das src geändert habe es den Song spielt (richtig). Sogar wierder ist, dass danach alle Lieder aber ohne Ton> spielen: S.
Entfernen von crossorigin = "anonymous" von Anfang an hat keine Wirkung.
Wenn ich jedoch den Soundmanager Ansatz verwende, scheint es gut zu funktionieren.
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()
}
);
Jetzt zurück zum Kern des Problems.
Sowohl die html5-Methode als auch die Sound Manager-Methode treffen die folgende URL mit einer get-Anforderung.
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 Request und Response Header
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 Request und Response Header
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
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, 09 Jul 2015 23:49:29 GMT
Etag: "b46b442c81cdb2d253827a19291d2847"
Last-Modified: Mon, 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
Beachten Sie, dass Origin: in der ersten Anforderung existiert und nicht die zweite. Jetzt habe ich versucht, damit zu spielen. How to make an AJAX-request look like a regular, normal request.
Um den Header loszuwerden, aber ohne Erfolg.
Also zur eigentlichen Frage, wie Cross-Ursprungs-Anfragen funktionieren, wie sie es im Sound-Manager tun? /gibt es etwas offensichtlich, dass ich das vermisse, was das verursacht.
____ Json P Versuch gemäß Kommentare ____
$(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();
}
});
});
Ich würde versuchen, JSONP – CapelliC
@ CapelliC zu verwenden, es sei denn, ich verstehe es falsch, die JSON-Anfrage muss auflösen, bevor ich es spielen kann. Ich werde ein Beispielcode hinzufügen, der nicht für mich zu funktionieren scheint, vielleicht wirst du mehr Einsicht haben. – Spaceman