How do I build a downloader for Smule.com

I was introduced to Smule by a friend whom I met online. Before that day, I wasn’t even aware of this site.

Well, I joined it because of some reasons and singing was not one of them. I can’t sing (but I sang once and decided that I won’t do it again).

So, days passed and I started visiting Smule, daily, for listening to those songs. I enjoyed them a lot. I really did.

One day, when I was sitting alone (I’m mostly alone haha) in my bedroom, I checked my Smule account and thought I should download these songs but I had no idea how to do it. And as the matter of fact, I don’t like using these online tools which have lots of creepy ads. So, I decided to build my own.

Now, instead of googling things, I just opened the Developer Tool and started digging into the website’s source. Well, I did not try to waste my time and searched for mp3 but I could not find it anywhere so I tried few more keywords like mp4 and audio

Fortunately, last both keywords were available on the site but the problem was, there were no links that had .mp3 or .mp4 extensions. It was kinda confusing.

After few minutes of break, I sat again, tried to search the downloadable link. With good luck, twitter:player:stream caught my attention and I copied the link it contained.

screenshot-from-2016-12-29-16-12-28

Well, that’s all. It worked. I downloaded that song but it wasn’t the end because the collection was big and I wanted all of them so I thought I should build a tool.

I chose Node.js. It’s my favorite language. I love it.

After deciding everything, I sat again and thought it won’t take more than 30 minutes to code. But like always, I was wrong. Not going to lie but it took almost 7 hours for me to complete it.

So, the question is – why it took this much time since the work is not even of 30 minutes?

Well, it’s because Smule (or browser, most probably) was clever enough to trick me (for a while, of course).

I began with simple scrapping – extracting the URL which redirected to the song. Well, I just used a simple trick and extracted the link –

 (res.body).split('twitter:player:stream" content="')[1].split('">')[0]; 

The above code gave me –

screenshot-from-2016-12-29-17-40-13

So, it was done. Because now, I just had to do –

got.stream(url).pipe(fs.createWriteStream('name.mp3'));
  • "got" is a nicer interface to the built-in http module.

But, here is the thing – that link did not work. The above code downloaded nothing. So, I grabbed the URL and pasted in the browser and saw that it was giving Error 404 . I wasn’t aware of what I was doing wrong. Because nothing was really tricky here. I just had to grab the link and stream it. That’s all.

A few minutes later, after scratching my head, I sat again and did 3 things –

  • Used Inspect Element and copied the link from meta tag.
  • Copied the link from meta tag but from the main source.
  • Pasted both of them in Sublime.

screenshot-from-2016-12-29-18-25-52

So, after pasting both of them, I realized that Smule is trying to do something.

A quick find cleared everything –

screenshot-from-2016-12-29-18-40-11

I found that amp; was creating a difference and was the root of all the issues. The reason might be rendering or maybe it was a trick by Smule. Anyway, so, I tested this thing with few other link and came to the conclusion that the issue is common for all the audios and videos available on Smule.

The solution to the problem was a simple thing, so, a simple regex stuff worked well on it –

const replaceIt = source => {
    source.replace(/amp;/g, '');
}

Finally, that was it. I had the clean URL to download the song which I wanted and I turned the idea into a tool.

Here is a preview of Smule media downloader. 

ezgif-com-c22d93ae1e

Funny thing – It took almost around 40 minutes to build the tool and rest of the time were spent thinking the issues that never existed. I applied silly logics to make it work and if I talk about them here, the blog post will become long as fuck.

Just in case if you want to look at the source code, you can find them here – Smule Downloader.

I’ve created a node package too. If you wanna install you can check it at – Smule Node Tool

Happy Coding! ^_^

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s