Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
51
rated 0 times [  56] [ 5]  / answers: 1 / hits: 27678  / 12 Years ago, sat, june 2, 2012, 12:00:00

I'm currently working with the SoundCloud API and would like to have a track embed when a button is clicked.



I get two errors:



XMLHttpRequest cannot load http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073. Origin null is not allowed by Access-Control-Allow-Origin.



AND



Uncaught TypeError: Cannot read property 'html' of null



Here is my code:



<button onclick=getPopular()>+1</button>
<div id=track></div>

<script src=http://connect.soundcloud.com/sdk.js type=text/JavaScript></script>
<script type=text/JavaScript>
SC.initialize({
client_id: **************,
});

var getPopular = function() {
SC.get(/tracks, {limit: 1}, function(tracks) {
var track = tracks[0];
alert(Latest track: + track.title);
SC.oEmbed(track.uri, document.getElementById(track));
});
};
</script>


I use an alert in my code to let me know that it is actually taking information from the SoundCloud API. I'm just not sure what else is preventing it from embedding.



Thanks, ahead of time, or looking at my question.




  • jiggabits


More From » soundcloud

 Answers
59

Read a little about Same Origin Policy to understand your main problem better. Ajax, localhost and Chrome/Opera don't go well together. This related question is even better.



Your second problem is due to the Ajax call (somewhere in your API) which doesn't return an html response due to the first error.



Instead of explaining the issue (which is very well explained in the links above), I'll provide a solution. Since you're running on Chrome, there's an workaround for that. Start chrome with this option:




--allow-file-access-from-files




(workaround which I shamelessly borrowed from Pointy)



You could also try running it on Firefox, or hosting it temporarily. :)






P.S. If you plan on doing serious development from your local machine, you may consider installing Apache to serve and test content through http://localhost, thus lifting the file:/// restrictions.



Here are some excellent tools that come with Apache and PHP pre-configured for development:




[#85184] Friday, June 1, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
pierre

Total Points: 716
Total Questions: 128
Total Answers: 102

Location: Djibouti
Member since Sun, Feb 27, 2022
2 Years ago
;