webkroll.com

« Articles fixed

Quick Tutorial #2: How to make a re-useable MP3 player with play list in Flash 8 Professional »

Quick Tutorial #1: How to make a simple, re-useable MP3 player in Flash 8 Professional

The goal of this tutorial is to create a simple MP3 player application that can be re-used easily without having to change anything in SWF file after it has been built for the first time.

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.

The embedded player will be able to take a path to an MP3 file via SWFObject’s ‘.addVariable‘ method, so you won’t have to do much to re-use it for different projects in the future.

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

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. Place the action script below in the actionscript layer [Frame 1]
    */
  2.  
  3. // Path to the MP3 file to play (coming in via the URL)
    var mp3File:String = _level0.mp3 + ".mp3"; // Just so we’re sure it’s MP3’s we’re trying to access here and not some other file format we shouldn’t be
  4. // Tell the player to load the file
    cpMP3Player.setMedia(mp3File, "MP3");

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).

Line 3 handles the incoming variable that holds the path to the MP3 file. I’ve opted to attach the file extension in code so that it’ll always be ‘something.mp3‘, rather than ‘something.exe/doc/txt‘ or some other nonsense (god knows what could happen … DOOOOOOM!)

You’re obviously more than welcome to remove that attachment, and simply pass the path in full; name.extension and all. After all you can do whatever you want with the code.

I know, the comments in the code already explain all that well enough, but I thought I’d just make it clear once more.

Let’s move on, shall we?

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", "300", "80", "7", "#FFFFFF", true);
  18. so.addVariable("mp3", "test"); // (variable name, file name) MP3 file to load. Leave the file extension off (i.e. test, instead of test.mp3)
  19. so.write("flashcontent");
  20.  
  21. // ]]>
  22. </script>
  23.  
  24. </body>
  25. </html>

Once again, not much to see here. Plain old HTML with a bit of Javacsript to embed 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.

I briefly contemplated thinking about how useless these active content warnings were in the first place if a simple comment was all it took to disable them, but I didn’t bother any further.

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.

That’s all folks! A simple to use MP3 player application, that you can re-use as you please.

 

If you are after a tutorial for a more advanced version of this MP3 player (feat. track listing via XML), stay tuned as I will upload that shortly please read on in Quick Tutorial #2 - How to make a re-useable MP3 player with play list in Flash 8 Professional.

Posted on: Sunday, March 18th, 2007 16:06:53
Posted in: Development, Flash
Feed: RSS 2.0
Leave a response | Trackback

6 Responses to “Quick Tutorial #1: How to make a simple, re-useable MP3 player in Flash 8 Professional”

  1. kyle Says:
    September 19th, 2007 at 03:58:22

    This is exactly what I needed, but I want the ability to set the autoplay from the javascript. Is this possible?

    Something like: so.addVariable(”autoplay”, “true”);

  2. ben Says:
    September 19th, 2007 at 22:53:22

    I’ll have a look at this tomorrow when I am back on my dev machine. Don’t see why that wouldn’t be possible. Just have to add another line of actionscript to pass the state to the flash playback component.

    Glad to see you got some use out of it.

  3. Peter Says:
    January 16th, 2008 at 22:30:32

    Hi, I am having trouble trying to avoid the warning from the Internet Explorer when using SWF.
    I am not an expert and can work myself around html and flash but I don’t seem to be able to embed the SFW banner in my webpage without having the warning bar popup.

    Any ideas of what I am doing wrong or how I can fix this.

    Thanxs

  4. ben Says:
    January 21st, 2008 at 18:28:02

    Hi Peter, have a look at this site http://blog.deconcept.com/swfobject/ SWFObject makes embedding Flash a breeze and takes care of all sorts of cross browser issues at the same time (like the IE issue with content activation you’re having). It’s widely used by web-developers/designers and is very good.

  5. krishna Says:
    June 18th, 2008 at 19:47:38

    hi thanks for the solution, for me its working fine. I have one small doubt is it possible, when a song finishes the other song start automatically.

  6. ben Says:
    June 18th, 2008 at 20:39:21

    Hi Krishna,

    that’s definately possible as there is a “onComplete” event that you can use to skip to the next song once it’s triggered.

    It’s not flawless due to the component being a bit bit funny in the way it handles the buttons but it works, have a look in the Flash help.

Leave a Reply