Earn 300$ Per Month


How to Embed Audio in Your Blog Or Website

Expert Author Colleen Dick
This article focuses on the basic technique of putting an embedded flash audio player in your web content. There are other ways but I believe this one to be the best at this writing. Shortcuts will be covered in later articles.
  1. You have already created a mp3 file. How to do this is the subject of another article. I will refer to your audio file as youraudio.mp3
  2. You have rights to upload directly to your web server. If you don't, contact your web host and they might set it up for you.
  3. You have a way to insert HTML code into your content. If you are using a content management system (CMS) that doesn't allow this, you will have to find some other way to do it.
  4. You have the legal rights to use the audio file.
What you will be doing is downloading some essential files (Step 1), uploading them to your web server (Step 2) uploading your own audio file (Step 3), and customizing a block of HTML code and including it in your web content.(Step 4). Steps 1 and 2 only need to be done once, as the script and the player is the same for any audio file you wish to play.
Step 1: Obtain the wordpress audio plugin from http://www.1pixelout.net. It doesn't matter if you use WordPress or not--there are two files in there you need. I can't link directly to the*D0WNL0AD* page, so you will need to find the plugin on their site. Unpack the archive and locate audio-player.js and player.swf files.
Step 2: Upload those two files to somewhere in your website and remember the URL path to them. In this article we assume you have uploaded both of them tofakedomain.com/myname/audio/Step 3: Upload youraudio.mp3 also, either to the same folder as the other files or some other place in your website and remember where it lives.
Step 4: Copy the block of HTML code below and customize the bolded sections as follows:
  1. For fakedomain.com substitute your own domain, including the prefix http://
  2. For myname/audio substitute the path where you have uploaded each file. This has to match where they actually are, as that is where the browser will look for them.
  3. Now paste the customized HTML block into your web content where you want the audio player to appear.

<script src="http://fakedomain.com/myname/audio/audio-player.js"></script><object width="290" height="24" type="application/x-shockwave-flash" data="http://fakedomain.com/myname/audio/player.swf" id="audioplayer1"> <param name="movie" value="fakedomain.com/myname/audio/player.swf"> <param name="FlashVars" value="playerID=1&soundFile=fakedomain.com/myname/audio/music.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"></object>Step 4: Upload your new your web page and test. Voila! If you have done everything correctly, a player icon should be visible, and if you click it, it should play your mp3 if it can play them from other web pages.
See Colleen's illustrated article at How to add audio to your web and see a working example at The Sarah Palin Answer Oracle Since I am not selling anything, a stumble or digg for either of them would be very much appreciated.

Newer Post Older Post

Leave a Reply