In my last article , I mentioned that Flash is most useful for building small player applications that present audio and video content. Today, I'd like to dive a little deeper into this idea and present a technique for playing MP3 files in a browser window.
Say you have created some audio files that you are really proud of. So proud, in fact, that you'd like to include these songs on your site. Now, in pure HTML and CSS, you can provide beautifully styled links to each of your MP3 files. Lovely, except that each time a user clicks on a link, he leaves the page that lists the links to all of your other songs. Instead, he gets a nice, pure white browser window with the little Quicktime toolbar.
What's wrong with that? Well, not only can the user not immediately access the other songs you've posted, but there may well have been additional content that the user wanted to read while listening to your truly stunning audio files.
Before we jump up and say, "Oh yes — let's use Flash," we should consider other alternatives. The first thing that comes to my mind is Windows Media Player. Windows media files can be embedded in a page, and, through the use of JavaScript, you could even build a dynamic menu. But then you run into the tricky problem of cross platform support for .wma files. At least, the embedded stuff never seems to play correctly on my Mac. Also, presuming you are starting with MP3 files, you'll need to re-encode your music before you post it. Not to mention the fact that many people don't have Windows Media Player installed at all. Then there's Real Player, which has some advantages such as better cross-platform support, but still requires an extra step of running your audio through another encoder.
So, we want a solution that lets us post regular old MP3 files and play them in a browser using an embedded interface. If I may, I would suggest that Flash is an excellent choice in this situation.
Using the embed techniques discussed in my earlier article, we can offer users a simple interface built in Flash that allows then to listen to audio without leaving the page. A number of Webmonkey readers wrote to say they like that idea and wondered if I might write a tutorial on actually building an MP3 player. So, today I'll show you how to make a Flash MP3 player with a very simple play/pause button. The resulting file will weigh in at a paltry 4KB. You can embed the player on your page and allow users to listen to your audio content (podcasting anyone?) without leaving the page. I won't go into the complete detail necessary to create a full blown iTunes-type Flash jukebox, but I'll offer a few suggestions for how you might go about doing so. First, we'll start with the bare bones necessities of playing MP3s in Flash, namely the ActionScript class Sound. |