Codebass Streaming Radio Player

Playing streaming radio through Flash is interesting.  If you need a player for your Shoutcast station, you’re a little limited.  You’ll find plenty of solutions for what you want to do—but not quite for the problem you’re trying to solve.

Codebass used the JW player to begin with.  Longtailvideo.com calls the JW player the most popular, open-source, video player on the web.  And although Longtail Video is probably biased because it’s their player, I don’t have a reason to doubt its popularity.  I work at a company that deals with digital video, and when researching players, the JW player definitely comes to mind if I need a ready-made solution for playing video.

You might be skeptical that a video player would work for audio playback, but it works quite well for normal audio.  Audio isn’t much different from video after all; it just so happens that in video, well, there’s a picture.  But the same rules apply.  You’re either progressive or streaming, meaning, you either have to download from the beginning of the file onward, or you can instantly seek to the middle without having to worry about downloading the beginning first.

The great thing about streaming content is that with longer content (maybe 30 minutes or more), you don’t have to hold the entire hour or two hours of video in Flash’s memory at the same time.  Streaming in Flash means that you have a buffer window.  You can set this buffer window—maybe you want 10 minutes or even 10 seconds loaded at a time—Flash will memory manage this for you.  That means that if your content happens to be a 2-hour movie, Flash won’t crash your browser with hundreds of megabytes of data as you reach the end of the movie.

So yes, the JW player will handle progressive audio, progressive video, streaming audio, streaming video. In fact, it will probably handle more!  Unfortunately, running a radio station (like Shoutcast) can be a little different.

See, normal streaming in the Flash platform is done via the Flash Media Server.  Red5 also offers a nice streaming solution.  These are both over RTMP, which is much different than HTTP (the normal web protocol).  RTMP offers some snappy video connection and streaming, so it’s a great solution.  Both Akamai and Limelight, the major players in serving web content worldwide, offer a nice HTTP streaming solution as well.  It’s a pretty clever solution actually: they serve up chunks of video instead of the whole thing.  If you integrate their code into your player, these chunks come together to be a real video.  But since  it IS chunked, the Flash player is great at managing the parts and throwing them away as they aren’t needed.

That’s great and all, but Shoutcast is a wee bit different.  When you connect to a Shoutcast server for your streaming audio, you get an MP3.  But guess what?  This is an infinitely long MP3—and an infinitely long download!  If you think about this in Flash terms, it’s almost fine.  You connect to an MP3 file, start playing as it’s available, and you’re set!  However, let it run for an hour or two or three.  Flash starts to get memory hogged.  It will most likely crash at some point, because you’ve given it this infinitely long MP3.

The JW Player is the same situation.  They work around this by giving you the option of setting a hard end-time.  I believe they recommend around 30 minutes.  When 30 minutes is up, playback stops, and Flash/Longtail Video doesn’t get blamed by the rabid HTML5 folks for crashing the Web.

Earlier this year, I gave a workshop at NCDevCon with Adrian Pomilio on getting started with Flex 4.  We each had an application that we demoed how to build.  Mine happened to be an MP3 player.  Like the JW Player, my player was built around the concept that MP3s are just songs.  They didn’t stretch past five minutes long, so my Flex 4-based player was a pretty good solution.

When Vicky at Codebass started her Shoutcast station, we wondered how we could provide a better user experience. First of all, we wanted to listen to the stream all day—not have to restart every 30 minutes.  Secondly, we wanted to know what we were listening to in the player and maybe even provide some album art.

So, I took my Flex 4 MP3 player demo and attempted to modify it for streaming radio.  The first step, of course, was connecting to the stream.  Interestingly enough, this was the first frustrating hurdle.  What I didn’t know was that a Shoutcast station provides a dashboard but no apparent “.mp3″ file.  I looked at the Winamp “.pls” and the embed code for our JW player, and couldn’t find any filepath that would indicate anything was an MP3 file.  Finally, I discovered after googling that the filepath is actually the Shoutcast dashboard (http://myshoutcaststream.com:someweirdport) followed by a semicolon!  Yep, that connects you to the MP3 stream.  You just have to know that.  After that, I put a timer in that counts to a specific time (30 minutes by default), and once it gets there, it restarts the stream.  The end user just notices a minor blip, but the player nicely throws away the old (and large) last half hour.

Once I got through that, it was a matter of taking away a lot of functionality.  Playlist?  Nope, we’re just using one stream. Progress bar?  Nope, we’re just playing a live stream.  Album art?  Now Playing text?  Well, that would be slightly different . . . but we’d leave them in.

There’s one thing we could do right away though, and that’s expand the time display to an hour. I’ve modified the Flex 4 date format from NN:SS to K:NN:SS.  The extra K just represents the hour from 0-12.  Twelve hours should be enough right?

So then, I created an entire new class: the StreamMetadata class.  Basically, what this does is hit the Shoutcast dashboard every 10 seconds to fetch new song info.  If the song info changed, then it updates our data bindings and THEN hits a google search with the artist and song names to fetch whatever image it returns first.

All was AWESOME!  Well, in my development environment, at least.  The problem was that both Google and our Shoutcast server didn’t have a crossdomain.xml policy files in place to allow codebass.net to contact those different domains from the Flash security sandbox.  So we obtained a PHP file from our streaming station provider that gave us the song and artist.  I also wrote a PHP file to submit a Google image search and get the first result.  We deployed these files on Codebass, and all was . . . okay, we weren’t quite there.   The server that hosts Codebass was blocking requests on port 7520, which was where the metadata and the stream came from.

Oops.  Luckily, we had an ace in our pocket named James Allen who recognized the problem, got our port opened up, and then configured our Shoutcast PHP script to give us the song and artist.  Thanks James!  The Google PHP script worked fine, though, since that wasn’t trying to go out through any weird ports.

I did some other nice things like show a Codebass graphic where the playlist used to be and display another Codebass graphic when the album art can’t be loaded.

The #CodeBassRadio Player

I won’t go into the specific code here.  I have a pretty extensive tutorial on making the original Flex 4 song player, and we’re also enabling you to click “view source” on our Codebass Radio player so you can see how we changed it and how it’s done.

I also have a Codebass Flash Builder project (.fxp) file ready to go for you.  Feel free to grab it and import right into FB.

http://www.blastanova.com/bsides/codebass/CodeBassPlayer.fxp or if your browser can’t handle downloading an fxp file… http://www.blastanova.com/bsides/codebass/CodeBassPlayer.zip

To grab the tutorial (the one that’s not specific to codebass streams) go to http://www.blastanova.com/bsides/codebass/Flex4MusicPlayer.zip or http://www.blastanova.com/bsides/codebass/Flex4MusicPlayer.fxp (use the zip that contains the FXP if your browser wants to try to read the .fxp file itself).  Import that FXP into Flash Builder, and then you can check out the step by step documents embedded in the project’s tutorial folder.

Or, like I said, you can skip all that and click “view source” on the Codebass player to browse through the final source and see how we did it!

Leave a Reply