Published on June 10th, 2013 | by Matthew Bucci
Alien Stream – An Audio Player For Reddit
I’ve been using services like reddit.tv for some time now, but I’ve never been impressed with the way they handled audio subreddits. I was missing out on soundcloud, bandcamp and tons of other links as well as wasting my bandwidth loading youtube videos that were nothing more than an image with music behind it. I wanted a service that would aggregate the links and stream it in mp3 format for me, but nothing existed, so I built one myself. You can view it athttp://AlienStream.com
The site is built on php and javacscript with a mysql lookup table acting as a cache. I use mediafire to store the files in a cache and you can view my blog entry on how to store files on mediafire using their API
The mediaplayer is MediaElement.js. I chose it because it works in nearly every browser and is extremely easy to use.
The site works as follows:
- I grab the list of tracks from the JSON Reddit API (Bravo Reddit, they made this easy)
- I then parse each entry’s URL for the substring “soundcloud.com” “bandcamp.com” or “youtube.com” and if it matches I add it to the playlist
- When a track is played I made a first parse what kind of link it is and do one of 3 things
- Request the Streaming URL via the soundcloud API
- Request the Streaming URL via the bandcamp API
- Request the Streaming URL via a smart proxy I wrote
- On failure the site skips the current track
Most of the site itself is fairly mundane and simplistic, but I had to do some very interesting things to get it all working correctly. Two things that more than likely standout are the use of Mediafire and what I referred to previously as a “smart proxy”. What I mean by this is that when a user first requests that a song be played, the smart proxy checks the mysql table to see if it’s previously been loaded. If not I make a post request via curl to a youtube conversion site….let’s say http://dibblr.com/process.php (this site is way too slow, so i used a different one but it does work). Then i parse that curled result and store the resulting download link.
Now unfortunately most of these sites only let their download url’s hang around for an hour a so, after that our links TTL is up and we need to make a request again…This approach is fairly wasteful even with our cache in place and the requests take forever to happen, I thought about storing it locally but that’s a waste of bandwidth and storage so what’s the solution? Before the link expires we download it and rehost it on mediafire, then change the url in the mysql table. Mediafire is cheap, comes with a ton of bandwidth and a ton of storage. It makes an awesome cache. Now we can set a TTL of something more reasonable like a week or a month.
Obviously this is a bit of a simplification, but i’ll leave you to check out my other posts if you’d like to know more. I’ll be updating Alienstream’s main UI soon as well.
Since then I’ve also added mobile compatibility by adding a redirect to alienstream.com/mobile. Unfortunately although html5 audio is supported on all devices i’ve tested so far IOS doesn’t allow automatic playback so the user has to press play and keep safari from backgrounding if they want it to continue autoplaying. This wastes a lot of battery and makes me very sad as there’s no remedy. Fortunately I really do believe in alienstream so i’ll be rewriting it as a native app using phonegap so that i’ll be able to give users a far better experience.