I searched the internet for a while trying to find a kewl music player that would look and work like soundcloud. No such luck. I have looked a bit at the soundcloud code before but I have never fully went through it with purpose. Today I start with purpose. I believe I can duplicate their player, change it, and make it work for my own means. This is internet 101 for me and how I have been able to figure out source code even from the basic days of learning <a href=”#link”><img src=”file”></a>. Follow along and try not to get lost…
http://mboxmp3.com/sc.html – a share/embed iframe sample code copy from soundcloud Share, Embed link.
Then the source code saved as ( thank you http://unminify.com/):
From here I can figure out what parts I can replicate, and what parts I cannot. And so it begins:
Now lets try and get this stripped down and local where we can.
Pulled out following dns-prefetch tags:
<link rel=”dns-prefetch” href=”//api-widget.soundcloud.com”>
<link rel=”dns-prefetch” href=”//sb.scorecardresearch.com”>
<link rel=”dns-prefetch” href=”//api.soundcloud.com”>
<link rel=”dns-prefetch” href=”//visuals.soundcloud.com”>
<link rel=”dns-prefetch” href=”//ssl.google-analytics.com”>
<link rel=”dns-prefetch” href=”//va.sndcdn.com”>
<link rel=”dns-prefetch” href=”//i1.sndcdn.com”>
<link rel=”dns-prefetch” href=”//i2.sndcdn.com”>
<link rel=”dns-prefetch” href=”//i3.sndcdn.com”>
<link rel=”dns-prefetch” href=”//i4.sndcdn.com”>
<link rel=”dns-prefetch” href=”//w1.sndcdn.com”>
<link rel=”dns-prefetch” href=”//wis.sndcdn.com”>
<link rel=”dns-prefetch” href=”//style.sndcdn.com”>
I then localized the css and js files.
<link rel=”stylesheet” href=”/css/interstate-0ab59479718c8235122cad6b16a66953d725c43a.css”>
<link rel=”stylesheet” href=”/css/sc-7b3e97754c8c95a1df78186772c64e7fddbb9448.css”>
I know some of the js is going to break, and this will be most of the job, but for now I am going to be complete in the migration, including inspecting all the files for further remote urls, removing the google analytics, and getting the framework stripped down.
commented ga.js hook
var e = window._gaq = window._gaq || ;
e.push([“_setAccount”, “UA-2519404-20”], [“_gat._anonymizeIp”], [“_trackPageview”]), i.insertScript(“https://ssl.google-analytics.com/ga.js”)
found included js:
After just a few short minutes I have it down to a local js error, being called from a remote API script failing:
If i can duplicate the API response, I bet that I can get a different song to play in the existing player. In error the player look up is:
However, in a working sample the following urls are returned:
[ STUPID LONG LIST OF #s ]
Now, that I know what is missing to make my player work, its time to inspect widget.js and find the connection to api-widget.soundcloud.com:
Then i want to check out what happens when I push play in a working player:
and here is what we really needed to see, the actual connection to the asset:
Hmm…. now if I could only connect a few dots in a few different ways, maybe just maybe I can get this player to play a local file. Bored with this, will pick up again soon!