5

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
Mustafa
  • 10,013
  • 10
  • 70
  • 116
veryrarecandy
  • 323
  • 1
  • 4
  • 17
  • 1
    Is that "client_id" something you had to pay for? – Pointy Jun 02 '12 at 21:00
  • 1
    Let me guess, you're trying to access it from your localhost? – Fabrício Matté Jun 02 '12 at 21:03
  • 2
    @Pointy SoundCloud is a place where you share songs, so I'd guess this API would grab the songs from a selected user. Anyway, OP, are you testing your API locally? My mind-reading powers aren't as good as every other SO answerer and your origin problem is most likely relative to running your API locally on Chrome/Opera. – Fabrício Matté Jun 02 '12 at 21:14
  • 1
    Hrm, I am running it locally on Chrome. Let me see if I can host the code somewhere temporarily. @Fabrício Matté Thanks for the input. – veryrarecandy Jun 02 '12 at 21:21
  • OMG @Fabrício Matté I love you. Works online. – veryrarecandy Jun 02 '12 at 21:23
  • 1
    possible duplicate of [XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin](http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin) and many many others. – Quentin Jun 02 '12 at 21:23
  • 1
    No problem, every programmer must have ran into that problem at some point. :) – Fabrício Matté Jun 02 '12 at 21:25

2 Answers2

17

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:

Community
  • 1
  • 1
Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
0

If you're getting a track back, the I would try, alert(document.getElementById("track")); to make sure that you're getting your dom element.

Vinyl Windows
  • 503
  • 1
  • 7
  • 19