webkroll.com

The goal of this tutorial is to create a slightly advanced version of the MP3 player application that I introduced in Quick Tutorial #1 - How to make a simple, re-useable MP3 player in Flash 8 Professional

The difference this time is that our MP3 player will have a playlist to allow playback of a range of MP3 files as required. The playlist data is created from an XML file.

Once again I will be using Flash 8 Professional to create the player application itself and SWFObject to embed the player in a HTML page later on.

Let’s have a look at the code. I’ll quickly explain what’s going on so you can get right into it.

The XML:

1. <?xml version="1.0" encoding="utf-8"?>
2. <playlist>
3. <mp3file title="Sentence 1">media/test.mp3</mp3file>
4. </playlist>

Nothing to see folks, move along! We’ll cover how the parts of the XML are used in the Flash part.

The Flash part:

1. /* Setup TODO:
   1. Create 2 layers (1 for the "stage", 1 for the actionscript)
   2. Drag the MediaPlayback component onto the stage layer [Frame 1] (Components > Media - Player 6 - 7)
   3. Assign the instance name "cpMP3Player" to the component on the stage layer
   4. Set the following component parameters (Component inspector > Parameters)
   5. Select "MP3"
   6. Tick off "Automatically Play"
   7. Set Component placement: On
   8. Drag the List component onto the stage layer [Frame 1] (Components > User Interface)
   9. Assign the instance name "playList" to the component on the stage layer
   10. Place the action script below in the actionscript layer [Frame 1]
   */
2.  
3. // load XML
   mp3Files = new XML();
4. mp3Files.ignoreWhite = true;
5.  
6. mp3Files.onLoad = function(success) {
7. if (success) {
8. // Shortcuts
   mp3File = mp3Files.firstChild;
9. nTotalFiles = mp3Files.firstChild.childNodes.length;
10. // create the list
    createPlayList();
11. } else {
12. trace("Error: Unable to load MP3 playlist");
13. }
14. }
15. mp3Files.load("mp3_playlist.xml");
16.  
17. // event listener for the playlist
    playList.addEventListener("change", songSelect);
18.  
19. // UDF’s
    function createPlayList() {
20. playListData = new Array();
21. playList.dataProvider = playListData;
22. for (var i=0; i<nTotalFiles; i++) {
23. var mp3Label = (mp3File.childNodes[i].attributes.title !== undefined) ? mp3File.childNodes[i].attributes.title : mp3File.childNodes[i].firstChild;
24. playListData.addItem({label:mp3Label, data:mp3File.childNodes[i].firstChild});
25. }
26. // select the first item in the list and load it up
    playList.selectedIndex = 0;
27. cpMP3Player.setMedia(playListData[0].data, "MP3");
28. }
29.  
30. // event listener function
    function songSelect(thisEvent) {
31. if (thisEvent.type == "change") {
32. selectedSong = (playList.selectedItem.data !== undefined) ? playList.selectedItem.data : playListData[0].data;
33. cpMP3Player.setMedia(selectedSong, "MP3");
34. cpMP3Player.play();
35. }
36. }

As you can see I have added setup instructions and quite a few comments to the code to make things a bit easier in case we have to come back to it later

We’ll skip the comments for now - though you should read and follow them when setting this up - and move on to lines 3-4, where we’re creating a new XML object

We’re also setting a parameter that will ignore whitespaces inbetween tags when we’re loading and parsing the XML file later on.

As you can see there is not much going on in the actual Flash part of this application (apart from a lot of blah blah in the instructions on setting it up).

Lines 6-14 form our onLoad function which is triggered by the code on line 15 where we attempt to load our XML playlist. If the playlist is loaded successfully we set a few variables for later (lines 8+9) and call the ‘createPlayList()’ function. If for some reason the XML was not loaded successfully a trace line is written, which can be seen in the Flash IDE output window.

On line 17 we’re defining an event listener for the list component that is used to display our playlist later on. Every time the user selects an item on the playlist (hence the ‘change’ action as the first parameter) the event listener will make a call to the ’songSelect’ function (more about that shortly).

Now we’ll move on to the 2 main functions ‘createPlaylist’ and ’songSelect’, we’ll start of with the former.

We’ll start off by defining a new array (line 20) which will be used to store the data we’ll retrieve from our XML playlist loaded earlier on. To be able to populate the list component with our playlist data later we’re telling the list component that it’s new data provider will be whatever is in our newly created array (line 21) once we get to the ‘feeding’ stage.

Once done with that we loop over every single song item in the XML file and create a new variable for the list label. If the song item in the XML does not contain a value for the ‘title’ attribute (or no attribute tag called title full stop) the label for the song will be set to the file name of the MP3 instead. (Line 23)
Each item is then added to our array, the label being set to whatever it was set to during the creation of the mp3Label variable, and the data pointing to the file name of the MP3 itself.

After all items from the XML have been added to the list component, we’ll set the list component to highlight the first entry (line 26) and then load the first item from the list via the MediaPlayback component (cpMP3Player), so that when the play button is pressed the party can start straight away.

The last function we’ll look at is ’songSelect’ which is called every time a new song is selected from the playlist via the list component. Inside the function we first check that the event that has been passed for this item is indeed ‘change’ as expected. After that is done we’ll set the variable for the new song to be played. If a file name for the item selected can not be found we’ll simply select the first item in our playlist. You could alert the user if a file name for a certain song wasn’t found, but in this case I haven’t done so.

Once we have our newly selected song, we’ll tell the MediaPlayback component to load it up (line 33) and then play it straight away (line 34).

That’s it for the Flash part of things already, if you’re not quite sure about where things from the XML are used in our script simply have another look at the XML above and follow the code line by line.

To finish this tutorial off we’ll have another (very brief) look at the HTML page to see how we can embed our player.

The HTML part

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <!– saved from url=(0014)about:internet –>
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. <title>MP3 Player Demo</title>
7. <script type="text/javascript" src="swfobject.js"></script>
8. </head>
9. <body>
10.  
11. <div id="flashcontent">
    <strong>You need to upgrade your Flash Player</strong>
    This is replaced by the Flash content.
    Place your alternate content here and users without the Flash plugin or with
    Javascript turned off will see this. Content here allows you to leave out <code>noscript</code>
    tags. Include a link to <a href="expressinstall.html?detectflash=false">bypass the detection</a> if you wish.
12. </div>
13.  
14. <script type="text/javascript">
15. // <![CDATA[
16.  
17. /* (swf file to load, instance name, width, height, required player version, background color,
    Flash Player express install upgrade check) */
    var so = new SWFObject("mp3_player.swf", "mp3player", "440", "80", "7", "#FFFFFF", true);
18. so.write("flashcontent");
19.  
20. // ]]>
21. </script>
22.  
23. </body>
24. </html>

Once again, not much to see here. Plain old HTML with a bit of Javacsript to embedd the flash file in a standards compliant way.

You may, or may not, wonder what the deal with the comment in line 2 is. Well, it turns out that the Internet Explorer has a bit of an ‘issue’ with pages that have Flash files embedded in them, when they are viewed locally.

More precisely it raises an active content warning which, to the inexperienced user, might be irritating and they might not go ahead and allow the content to be loaded.

Thankfully there is a workaround to this problem. Internet Explorer allows pages containing the ‘Mark of the web’ (the code on line 2) to display pages with embedded content like ours without showing a warning.

Anyway … Long story short. All you need now is a copy of SWFObject, put it in the same folder that you will save the HTML file into and you’re set.

The code comments explain the rest.

If you would like to make the whole thing even more flexible you could simple make these two changes to the HTML and Flash source to be able to pass in whatever playlist name you want with the HTML page.

That way you never have to touch the source of the Flash file again and can embedd multiple different playlists per page.

Flash changes:

1. mp3Files.load(myDataFile + ".xml"); // LINE 15

HTML changes

1. // playlist variable (name, value)
   so.AddVariable("myDataFile","80s_playlist"); // NEW LINE 18

That brings us to the end of second Quick Tutorial #2, I hope you found it useful. As mentioned in Quick Tutorial #1 - How to make a simple, re-useable MP3 player in Flash 8 Professional, please feel free to use the code above as you please.

Posted on: Sunday, April 1st, 2007 16:28:01
Posted in: Development, Flash
Feed: RSS 2.0
Leave a response | Trackback