SoundCloud Player Reverse Engineer

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/):

http://mboxmp3.com/scsrc.html 

From here I can figure out what parts I can replicate, and what parts I cannot.   And so it begins:

screen-shot-2016-12-27-at-3-17-54-pm

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”>

<script src=”/js/widget.js”></script>

<script src=”/js/visual-single-sound-1671fc20.js”></script>

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.

created widget.js

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:

/dist/mp4-mux-worker-bundle.js

https://sb.scorecardresearch.com/beacon.js

After just a few short minutes I have it down to a local js error, being called from a remote API script failing:

screen-shot-2016-12-27-at-3-38-59-pm

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:

https://api-widget.soundcloud.com/assignments/457367-961833-871570-111351?layers=widget_listening&format=json&client_id=cUa40O3Jg3Emvp6Tv4U6ymYYO50NUGpJ&app_version=1481041063

However, in a working sample the following urls are returned:

(asset) https://wis.sndcdn.com/PcjHC6xdNsZ6_m.json

{
“width”: 1800,
“height”: 140,
“samples”: [
121,
87,
116,
[ STUPID LONG LIST OF #s ]
59,
111
]
}

(comments) https://api.soundcloud.com/app/widget/tracks/299063458/comments?filter_replies=1&limit=100&offset=0&linked_partitioning=1&format=json&client_id=a3e059563d7fd3372b49b37f00a00bcf&app_version=1481041063

{
“collection”: []
}

(events) https://l9bjkkhaycw6f8f4.soundcloud.com/v1/events

[no contents]

 

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:

screen-shot-2016-12-27-at-3-48-36-pm

Then i want to check out what happens when I push play in a working player:

screen-shot-2016-12-27-at-3-51-32-pm

and here is what we really needed to see, the actual connection to the asset:

screen-shot-2016-12-27-at-3-55-49-pm

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!