TutorialsEmbedding Audio on Your Website with a Flash Audio Player

If you've ever had to embed audio on your website, finding a good way to do it can be a little challenging if you've never done it before. If you fall into that camp, this tutorial will show you an easy way to embed your audio files using a free Flash-based audio player.

  1. Make sure your audio file is in MP3 format. If it isn't, use an application like Audacity (free) or LAME (also free) to convert it to an MP3.

  2. Download the Flash MP3 player from here. There are several versions of the player available, but for now just go with maxi.

  3. Once it's downloaded, rename the .SWF file to player.swf and copy/upload it to your website (preferably to the root folder, but any other folder you prefer will work, too).

  4. Now we need to embed it. Here's the basic code needed to embed the player and make it play an MP3.

    <object type="application/x-shockwave-flash" data="player.swf" width="200" height="20">
         <param name="movie" value="player.swf" />
         <param name="FlashVars" value="mp3=audiofile.mp3" />
    </object>

    Copy and paste this code to your website, replacing audiofile.mp3 with the path/filename of your audio file, and both instances of player.swf with the path/filename of the player.

    (Optional) The player we're using lets us customize many of its characteristics by simply adding extra options to the value part of the FlashVars <param> tag (separating each option with a &amp;). So in the case of our example here, we're going to add a few extra options:

    <object type="application/x-shockwave-flash" data="player.swf" width="200" height="20">
         <param name="movie" value="player.swf" />
         <param name="FlashVars" value="mp3=audiofile.mp3&bgcolor=000000&showvolume=1" />
    </object>

    The bgcolor option changes the background color of the player (in this case black to match the page in which we're embedding the player), and the showvolume option adds a handy volume control. A full list of options accepted by the player can be found here.

You're done! Just bring up your website in a browser and the player should appear, ready to play your audio file.

Who are you guys?

4Templates is a small team of designers based out of Brentwood, TN dedicated to creating awesome & affordable website templates, WordPress themes and more!

More ...   Get In Touch

@4templates RSS


We proudly accept Visa, MasterCard, American Express, PayPal, Google Checkout, and Amazon Payments.We proudly accept Visa, MasterCard, American Express, PayPal, Google Checkout, and Amazon Payments. All prices in United States Dollars (USD).© ArixMedia, LLC. All trademarks are the property of their respective owners. All rights reserved. License | Terms of Use | Privacy | Contact Us