Question

On my site, I would like users to be able to type a SoundCloud URL into an input bar and then click a save button to turn the input bar into a SoundCloud music player playing that URL. However I’m getting the following error message in my Chrome console:

Unsafe JavaScript attempt to access frame with URL http://jsfiddle.net/AGcQm/ from frame with URL http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F71112492&show_artwork=true&color=434C58&maxheight=266. Domains, protocols and ports must match.

Here is the exact code in jsFiddle:

http://jsfiddle.net/AGcQm/

Answer 1

This should work fine:

http://jsfiddle.net/AGcQm/2/

$("#btnGo").click(function() {
SC.oEmbed(
    $("#sndUrl").val(),
    {
        color: "434C58",
        maxheight: 266
    },
   $("#soundcloud")[0]);

$("#sndUrl").hide();
$("#btnGo").hide();
});

Edit: I get the same same warning as you describe. It appears to be some known issue of Chrome, but it doesn’t prevent the code from working. Basically the soundcloud iFrame is trying to access the parent, and Chrome doesn’t allow that.