Zeus Zeus - 4 months ago 82
Javascript Question

Soundcloud embedding problems in Firefox

I've been working on a project where I need to embed Soundcloud songs. Everything works if I try to open the page in Chrome, but in Firefox, it simply shows a gray box with the Soundcloud logo in the center.

I was trying to debug it, and here's what I see in Firebug. When I open the page, it says

TypeError: this.getFlashPlugin(...).match(...) is null


and

Error: Permission denied to access property "href"


I've been searching for it since 2 days now, and I almost came to a conclusion that this can not be fixed, no matter what, then suddenly, a jsfiddle url came up in the search result and I saw soundcloud embeds working fine in both Firefox and Chrome.

Now, here's the original jsfiddle url: http://fiddle.jshell.net/Peeters_William/kpkdnrts/

What I did, was copying the exact same code, including the HTML and Javascript part to a NEW jsfiddle document which can be found here: https://jsfiddle.net/etLwq8kv/

I'm literally clueless: Why is the first fiddle working without any problems and this second one refuses to embed the songs? I believe that I have the exact same copy of the first code and still, it refuses to display..

I have even changed all the settings I saw on the first fiddle such as


  • CSS panel -> Normalized CSS

  • HTML panel -> Doctype: HTML5, Body tag:

  • Javascript panel -> Language: Javascript, Frameworks: No-Libary (pure JS), Load type: onLoad



Still, even if I believe that the two fiddles are the exact copies, why is this second one refusing to work properly?

Thanks in advance and have a great day everyone!

Answer

After checking the network for some clues, it became apparent to me that the script wasn't being loaded at all. I started double checking everything and I noticed that the url from the working example did differ from yours not only by the url (https://jsfiddle.net and http://fiddle.jshell.net) but also by the protocol.

In the working example, the protocol was HTTP and so was the Soundcloud's API. However, your example was in a secured connection and the API's address wasn't. Which explains the "Permission denied to access property href message."

Fortunately, Soundcloud provides a secured version of the API. I fixed your example by changing the protocol to HTTPS and it started working.

Change HTTP protocol

http://connect.soundcloud.com/sdk.js

to HTTPS

https://connect.soundcloud.com/sdk.js