How to Put MP3's on My Website

Embedding an MP3 file on a website is as simple as creating a link.

Adding an MP3 on a website is as easy as creating a link pointing to the sound file. Developers can embed most types of sound file as long as the visitor has the ability to read the file by using a media player such as RealPlayer, QuickTime, and Windows Media Player. The Flash Player is the most popular plug-in and dedicated exclusively to playing sound and video. Some browsers require additional parameters to prompt them to read the file correctly.

Things You'll Need

• FTP program or control panel access
• HTML knowledge

Instructions

Easy Embed

1. Upload the sound file into the same directory as the web page that calls it using an FTP program or your website control panel.

2. Find the location on the page where you want to insert the link.

3. Use the a href (anchor) tag to create a link to your file.

   <a href-http://www.YOURDOMAIN.com/File.wav>Click Here</a>

Embed with <object>

1. Upload the MP3 file to your website directory using FTP or your control panel.

2. Define the type of file embedded on your website.

   <object type="audio/x-mpeg"

3. Insert the name of the music data file into the data element.

   data="Music.mp3"

4. Define the height and width of the audio player and yes (true) or no (false) on auto play on download.

   width="200" height="16" autoplay="false">

   </object>

   The final code should appear as:

   <object type="audio/x-mpeg"

   data="Music.mp3"

   width="200" height="16" autoplay="false">

   </object>

5. Upload the web page with the embedded code and view online.

Cross browser embed using <object>

1. Insert the parameter (param) tags for your audio file including source (src), controller, autoplay, autostart, and pluginspage (the location of the plug in player), where src is the location of the audio file, controller the player controller displayed on the page, autoplay (true or false), and autostart setting of 0 (no) or 1 (yes).

   <param name="src" value="Music.mp3" />

   <param name="controller" value="true" />

   <param name="autoplay" value="false" />

   <param name="autostart" value="0" />

   <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />

2. Add an Internet Explorer comment tag changing the pluginspage to pluginurl, so IE will display the file correctly.

   <!--[if !IE]> <-->

   <object type="audio/x-mpeg" data="Music.mp3" width="200" height="16">

   <param name="src" value="Music.mp3" />

   <param name="controller" value="true" />

   <param name="autoplay" value="false" />

   <param name="autostart" value="0" />

   <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

   </object>

3. Upload the web page with the embedded code and view online.

Tips & Warnings

• Embed commands are associated with plug-ins; therefore, if no plug-in is available, include code that informs the viewer a plug-in is required.

• Class Id's and codebases specify the player, such as QuickTime, Windows Player or Flash Shockwave Player.

• Auto playing sound on a website may annoy repeat visitors.

• Internet Explorer gets confused by the <object> tag so comment tags are needed to help IE display the file properly.

• The <object> tag is not supported by all browsers.

• The <embed> tag is not XHML standard and is unreliable in some browsers.

References

• DanFergusDesign.com: Embedding Audio Files
• Adobe.com: Flash OBJECT and EMBED tag attributes

Resources

• Randelshofer.ch: Embed PDF