Flash Audio Player Tutorial

In this tutorial I explain how to present an MP3 audio file on a web page with a little set of graphic buttons for play, pause, and stop. This uses a nifty script from 1 Pixel Out.

Figure out where you're going to store the script and your audio files on your own server space. You might want to create a subdirectory named "audio" specifically for this purpose. Let's say your location is at http://www.yourdomain.com/audio/.

Download the free Audio Player Wordpress Plugin, a zip file. The script was designed for use on a Wordpress blog page, but here I'm explaining how to use it on an ordinary web page.

Open the zip file locate two files: audio-player.js and player.swf. Upload these two files to http://www.yourdomain.com/audio/.

Upload the MP3 to this same folder. Let's say your MP3 file is named yourfile.mp3. (See below for info on sampling rates and Flash audio.)

In your HTML page, in the <head>, place this code, of course inserting your own actual domain and path:

<script language="JavaScript" src="http://www.yourdomain.com/audio/audio-player.js"></script>

Take the code block below and replace the URLs and file names with your own actual ones. Then, place the whole code block in your HTML in the spot where you want the audio player to display.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"  width="290" height="24">

    <param name=movie value="http://www.yourdomain.com/audio/player.swf">

    <param name=quality value=high><param name="LOOP" value="false">

    <param name="wmode" value="transparent">

    <param name="FlashVars"  value="playerID=1&amp;soundFile=http://www.yourdomain.com/audio/yourfile.mp3">

    <embed src="http://www.yourdomain.com/audio/player.swf"  FlashVars="playerID=1&amp;soundFile=http://www.yourdomain.com/audio/yourfile.mp3"  quality=high  pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  type="application/x-shockwave-flash" width="290" height="24"  loop="false">

    </embed> 

  </object>

Point your browser to the web page and test; it should work.

Using this Script with Blogger

If you want to use this player in a Blogger (Blogspot) post, you'll have to put the <script> block into your Blogger template, in the <head>. Then, you'll have to remove every single white space from the larger code block above before inserting it onto your Blogger page. This is to stop Blogger from adding about 7 different <br> tags into your code, which completely throws off the spacing on your page.

Avoiding "Chipmunks" - MP3 Encoding

From the 1 Pixel Out site: "The Macromedia Flash player has a problem playing files that are encoded at a rate that is not a multiple of 11.025 kHz. This effect is sometimes called the "chipmunk effect": the file is played at double speed. To avoid this, encode MP3s at 11.025 kHz, 22.050 kHz or 44.100 kHz.

The otherwise wonderful Audacity audio editing program produces MP3s with a non-standard sampling rate that do not work well in Flash.

Thanks very much to Mindy McAdams for her Embedded MP3 Audio Player Tutorial, which was my starting point for this tutorial. Thanks also to 1 Pixel Out, the authors of the script.