So I am having some issues with the soundcloud api and html 5 audio player.
The main goal is to access all of the publicly available soundcloud tunes using only html5.
I am using the following.
//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);
I'm getting back this from soundcloud. Cut down again for some relevant test cases
{
"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"
}
]
}
This gets called via ajax on my page and then with the results I render out a bunch of html on the page with bindings to onclick function that looks like this.
$.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);
}
});
Where $("#myAudio") is equal to
<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>
Now this works for about half of my songs. It works for Rio - NetSky - 210032350. However for Porter Robinson - Flicker - It Does not. I get thrown the following error:
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).
As a weird quirk if I remove crossorigin="anonymous" from my page (manually in firbug) after I have changed the src it plays the song(Correctly). Even wierder is that after that all of the songs play but with no sound >:S.
Removing crossorigin="anonymous" from the beginning has no effect.
However if I use the soundmanager approach it seems to work fine.
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()
}
);
Now back to the core of the issue.
Both the html5 method and the Sound Manager method hit the following url with a get request.
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 and Response headers
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 and Response headers
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
Note that Origin: exists in the first request and not the second. Now I have tried fiddling with. How to make an AJAX-request look like a regular, normal request.
To get rid of the header but to no avail.
So to the actual question how do get cross origin requests to function correctly like they do in the sound manager? / is there something obvious that i missing that is causing this.
____ Json P Attempt as per comments ____
$(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();
}
});
});
