Flash has always been a great way to deliver sound. Great compression (MP3) and with flash 5 you even have great control over the sound. So here’s a great way to deliver sound on your site, and I don’t mean just those limited 3 second loops. You can actually run your own internet radio station, with a real cool flash interface to control it.

There are three aspects to building a radio.

1. Delivering the audio.
2. Building a play list.
3. Building the controls.

There are a number of ways to deliver audio with Flash. For the radio, one of the best methods is to stream MP3 sound. Why stream? Well all other modes of sound export require the entire sound to download before starting playback. With MP3 you just need to download a “buffer” before the music starts to play. You can take a look at the peak - diagram (bandwidth profiler) to see what I mean.

This diagram shows the bandwidth profiler when the synch is set to event or start

With the stream synch, the bandwidth is equally shared across the frames.

To create you flash audio tracks, create separate flash movies of the smallest with possible (18x18) and embed the sound file in it. You’d need to optimize your sound so that it sounds the best at the export quality. In this tutorial, I’ll not be getting into details about optimizing sound, but you could refer to the resources section for a list of place you could find the information.

One of the best improvements in flash 5 over the earlier versions is the inclusion of an XML Parser and XML socket communications. We will not be using any open-socket communications in this example; however the play list will be read from an XML file.

Why XML? Well, if you do through some of the XML resources mentioned at the end of the tutorial, you’ll be able to see for yourself why it makes so much sense to go with XML. I will not be describing the XML concepts in detail, so you might want to read Chris Smith’s excellent tutorial on Flash Kit before coming to this part.

The XML play list is just a simple xml file which has information about the song to be played. Currently the xml file only has some basic information, like the file source and title and artist name. You could however have this XML to be as rich as you desire.

Here’s what the sample XML file looks like:

<XML>

   <Playlist>

      <Song>

         <Name>Butterfly</Name>

         <Src>butterfly.swf</Src>

         <Artist>Talvin Singh</Artist>

      </Song>

      <Song>

         <Name>Moby</Name>

         <Src>moby.swf</Src>

         <Artist>Moby</Artist>

      </Song>

      <Song>

         <Name>Buddha Bar</Name>

         <Src>dreamtango.swf</Src>

         <Artist>Buddha Bar</Artist>

      </Song>

      <Song>

         <Name>Temptation</Name>

         <Src>temptation.swf</Src>

         <Artist>New Order</Artist>

      </Song>

   </Playlist>

</XML>

The very first tag of the XML tree is the Playlist tag. This tag contains the list of individual songs and the sequence in which they would be played. Imagine the same information being fed through, say a txt file with the flash load variables syntax. It would have been so difficult for anybody going through the data to figure out the details.

I’m sure the XML above is intuitive, however I’d just take you through the tags. The first Tag is the ‘Playlist’ tag. As mentioned earlier, the playlist tag contains the list of songs. Each song is enclosed within a song tag. Most people would have used attributes to pass the src and artist information. However for this example, I deliberately avoided using attributes. The other tags included in the playlist are Name (the song name) Src (the url for the source file) and Artist (The name of the artist) Although the Name and Artist tags are not really used by my current interface, it’s there for a future interface that might need this information.

Once you have the XML play list ready. You need to load it into flash.

Although flash has an inbuilt XML.Parse method, it has a number of disadvantages. Firstly, the flash parser has difficulty with white spaces in XML in earlier versions of the flash 5 browser. This was taken care of with the new releases, but even then the parser is not exactly the fastest.

For this example, I’m using a flash XML parser built by Branden Hall called XML Nitro. XML nitro is about 75% faster than the native flash parser and allows you to ignore white space even in earlier builds of the flash plug-in. You can get this parser from here.

Once you have the .as file downloaded from Branden’s site, all you need to do is include it in your flash file. To do this copy the .as file in the same folder as your .fla and then add the following script on the first frame.

#include "XMLnitro.as"

There, now you have your ‘supafast’ XML parser, ready to take your command. Which, by the way,should go something like this:

function getPlayList (url){

       myPlayList = new XML();

       myPlayList.ignoreWhite = true;

       myPlayList.load(url);

       myPlayList.onLoad = makePlaylist;

}

getPlayList (playlist.xml)

This function gets the required xml file from the url. The url could either be a reference to a static flat file or a database query made though any middleware.

Once the XML file has been loaded, which should be very fast unless you’ve put in over 3 hours of songs into it (for larger files use John Wehr’s Parser), you need to make a playlist that you can easily use in your flash actionscript without any troubles.

function makePlayList(){

       songNos = myPlayList.firstChild.firstChild.childNodes.length;

       PlayList = {}; //new object created

       PlayList.Songs = new Array();

       songList = new XML();

       songList = myPlayList.firstChild.firstChild;

       mySong = songList.firstChild;

       for (var i=0; i<songNos; i++){

              PlayList.Songs["name"+i]=mySong.firstChild.firstChild.nodeValue;

              PlayList.Songs["src"+i]=mySong.firstChild.nextSibling.firstChild.nodeValue;

              PlayList.Songs["artist"+i]=mySong.firstChild.nextSibling ¬

                   .nextSibling.firstChild.nodeValue;

              mySong = mySong.nextSibling;

       }

}

Ok, let me admit, this is not the most elegant way to go though you XML. But it does get the job done. The idea here is to convert the playlist into an object hierarchy that can be read from using a simple dot syntax. So if you want the name of the first song, all you do is call Playlist.Songs.name0 and if you need the source for the same file you just call Playlist.Songs.src0 and so on (since we start with i=0).

The best part of an XML file is that it can easily be mapped to an object hierarchy and thus can be used extensively and very easily in Object oriented programming. I’m not a programmer myself, but once you get a hang of these concepts, it becomes very interesting to use.

The Playlist here is an Object in which a new array called Songs has been created. Songs is an associative array. So for every element in the array has a corresponding value to it. From the XML file shown above, if we were to access “Playlist.Songs.name0”, we would get the value “Buttefly” and "Playlist.Songs.src0" would return “butterfly.swf”.

The associative array is created using a simple for loop that runs though the list of songs and putting the values of the nodes into the respective slots in the array.

Now that we have the playlist available to us in such an easy to access manner, we need to build a function that get’s us the song we want (or at least the src for now).

And this is how we do that:

function getNextFromList(){

       if (playerCount >= (songNos-1) || playerCount eq ""){

              playerCount = 0;

       }else{

              playerCount +=1;

       }

       loadMovie(PlayList.Songs["src"+playerCount], "music");

}

The main part of the code above is PlayList.Songs["src"+playerCount]. This is part that gets to song. playerCount is a global counter used to keep a track of the currently loaded song. The function keeps a track of the counter and resets the value to 0 if we have exhausted all the songs from the list. The movieclip is loaded into an empty clip called “music”.

Now that we have a playlist loaded into flash and we can read from the play list, we need build the controls.

See those cool rotating buttons? I’m not telling you how I did that J However there is an excellent tutorial available here. Having the ActionScript the Definitive Guide (ASDG) also helps.

One important part of the process is to develop easy to use loaders. To do this I’ve just extended the Movieclip class to build a easy to use loader.

Movieclip.prototype.getPercentLoaded = function(){

       var totalBytes = this.getBytesTotal();

       var bytesLoaded = this.getBytesLoaded();

       var percentLoaded = bytesLoaded/totalBytes*100;

       return percentLoaded;

};

For somebody new to extending classes, check this amazing thread. Now that you have the percentLoaded all you need is a movieclip that is exactly 100px in width and that would be your load bar. All you need to do is put the following code on it:

onClipEvent (enterFrame){

       this._xscale = clip.getPercentLoaded();

}

Where “clip” is the name of the movieclip you want to check the load value of.

Once you have the music loaded you’ll need to control the volume. And here’s the code that lets you do that:

mySound = new Sound();

function setRadioVolume(value){

       var maxVol = 180;

       var minVol =0;

       if (value < 0){

              value += 360;

       }

       myVolume = maxVol - maxVol* value/360;

       mySound.setVolume (myVolume);

}

We create a new global sound object and control the volume of this global object. Controlling the global sound object controls the volume for all sounds in the movie. Here the value is converted from rotation values to absolute values. In other words, if the rotation of the knob is 0, the volume is zero and if the rotation is 360 degrees (the last ten degrees are not allowed) then the volume is the max volume. However, since it would be too confusing to let the knob turn the full 360 degress and go back to zero, I’ve put a small stopper that does not allow the knob to be rotated beyond 350 degrees.

This is how the above function would be used:

onClipEvent(mouseMove){

       if (pressed){

              this.rotate();

              _root.setRadioVolume(this._rotation);

       }

}

For implementation details check the source fla.

Next we need to allow users to choose another song from the playlist. While getting a song from the playlist is simple (remember Playlist.Songs.Src2) you need to some touch of a real radio.

So where’s the static?

For the static, I’m using a combination of four static sounds and mixing them together using this function:

function getStatic(){

       static = new Sound();

       rnd = random(4)+1;

       static.attachSound("static"+rnd);

       static.start();

}

Simple. Just a random static builder. You can listen to each of the static files from the source file.

Well that covers most of the aspects of building a flash radio. There are more resources you could refer for answers to you questions. So please refer to them before asking me.

Cheers

Nav

Sound Resources

http://www.digitalprosound.com/Htm/Techniques/2000/Oct/Flash.htm

http://radio.about.com/library/weekly/aa122200d.htm?terms=copyright

http://f256.com/opensource/capsule/FLAsoundpacks/

http://joylab.com/

http://www.were-here.com/forums/forumdisplay.php?forumid=30

http://board.flashkit.com/board/forumdisplay.php?forumid=48

http://www.flashkit.com/tutorials/3rd_Party/Flash_5_-Chris_Sm-213/index.shtml

http://www.ultrashock.com/ff.htm?http://www.ultrashock.com/tutorials/flash5/xml.html

http://www.ultrashock.com/ff.htm?http://www.ultrashock.com/tutorials/flash5/xml_pitfall.html

http://www.w3.org/XML/

http://chattyfig.figleaf.com/~bhall/killastuff/XMLnitro.as  (Branden’s XML Parser)

http://www.alabamasubs.com/541am/xmlq/ (John Wehr’s XML Parser)

http://www.flashmove.com/ (The FlashMove XML Forum)

Flash XML StudioLab

Scripting Resources

http://www.onclipevent.com

http://www.onclipevent.com/navneetk

http://www.moock.org

http://www.flashguru.co.uk

http://www.robertpenner.com

http://www.quantumwave.com

http://www.layer51.com/proto/