Article

Flash MP3 Player

by Mindy McAdams

Embedded MP3 Audio Player

Adobe Flash, or simply Flash, refers to both the Adobe Flash Player, and to the Adobe Flash Professional multimedia authoring program. Flash players have given us the versatility to add music to our websites, where instead of having to turn their speakers off, users control the playback of the music on the screen. This tutorial uses the Audio Player Wordpress plugin from 1pixelout. Please download the .zip file from that site. You will need to unzip the files and use two of them:

• player.swf (this is the audio player)
• audio-player.js (this is the JavaScript)

These instructions concern using that player on non-Wordpress HTML pages.

You must have some Web space that you control (that is, server space) to which you will upload these files as well as your audio files.

If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.) If you do not see the MP3 player, then you don´t have the Flash player installed. (More than 90 percent of all Internet users have installed a flash player)

Tutorial

For this tutorial, let´s imagine that your server space is at this URL: www.fakedomain.com/myname/

1. Create a new folder on your Web server and name it "audio"
2. Upload the two files for the audio player (player.swf and audio-player.js) to the audio folder.
3. Upload an MP3 file to the audio folder. For this tutorial, let´s assume your file is named music.mp3. (NOTE: The MP3 file must be encoded at 44.1 kHz, or 22.05 kHz, or 11.025 kHZ; any other sampling rate will result in the "chipmunk effect," which you really would not like.)

Now that your three files are uploaded, they reside at these URLs:

• http://www.fakedomain.com/myname/audio/player.swf
• http://www.fakedomain.com/myname/audio/audio-player.js
• http://www.fakedomain.com/myname/audio/music.mp33

The next step is to place the HTML for this player on the Web page where you want it to appear. Change the URLs shown below to match your own URLs.

If You Use Blogger

To use this player with a blog hosted at Blogger, take out all the code above the <object> tag and place it in your Blogger template (instead). In the Blogger template, place it above the </head> tag, as shown:

Then each time you use the player in a blog post, you will paste only the <object> code into your blog post.

Using More Than One Audio File

You can simply upload additional audio files to the same "audio" folder on your Web server. Make sure each file has a unique filename.

You do not need to upload the two files for the audio player (player.swf and audio-player.js) more than once.

Placing More Than One Player on the Same Page

For a second player on a page, use this HTML:

For a third player on the same page, change "2" to "3" in the HTML, etc.

You may also customize the colors of the audio player.

posted on Jun 25, 2007

   Topics