How To

How to Add Mp3S to a Webpage

Embed music
Embed music
Contributor
By Jerry Garner
eHow Contributing Writer
(0 Ratings)

Having music on a web page can be a double-edged sword. If done tastefully, playing MP3 files on a web site can add a nice touch to the page. On the other hand, more often than not, the use of the MP3 is terribly tasteless and typically destroys any chance of getting a repeat visitor to the site. Despite the risk, more and more people are wanting to know how to add MP3 files to a website. Here are two ways to do it.

Difficulty: Moderately Easy
Instructions

Things You'll Need:

  • Web Site
  • MP3 Player
  • HTML Editor

    Load MP3 Files Using FTP

  1. Step 1
    Create a folder
    Create a folder

    Log in to the FTP account for your web site and create a folder titled “mp3.” While you can do this through the file manager provided by your web host, it is easier if you use an FTP software program, such as SmartFTP or Filezilla.

  2. Step 2
    Upload files
    Upload files

    Upload the MP3 file(s) to the directory that you just created.

  3. Step 3
    Edit file
    Edit file

    Using the HTML Editor of your choice, open the file where you would like to add the link to your song, and simply type the link code. An example would be:<a href=”mp3/mysong.mp3”>Click To Play</a>

  4. Step 4
    Upload file
    Upload file

    Return to your FTP program and upload the updated file. Be sure to mark the upload as an overwrite so that the old file will be completely replaced by the new file. Then, any time someone clicks the link, your file will play.

  5. Add MP3 Files Using Embed Codes

  6. Step 1
    Upload MP3s
    Upload MP3s

    Create an “mp3” folder on your web site and upload your MP3 files to the server, just as described in the other method.

  7. Step 2
    Edit code
    Edit code

    In your HTML Editor, edit the file for the page that you would like to have embedded music playing on, to include the following code placed somewhere between the <body> and </body> tags.<!This code for IE><EMBED SRC="http://yourdomian.com/sound/music.m3u" HIDDEN="true" AUTOSTART="true" width="128" height="128"><!This code for Netscape><OBJECT ID="MediaPlayer"classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"standby="Loading Microsoft Windows Media Player components..."TYPE="application/x-oleobject" width="239" height="179"><PARAM NAME="FileName" VALUE="http://server/path/your-file.asx"><PARAM NAME="AnimationatStart" VALUE="false"><PARAM NAME="TransparentatStart" VALUE="true"><PARAM NAME="AutoStart" VALUE="true"><PARAM NAME="ShowControls" VALUE="0"><Embed TYPE="application/x-mplayer2"pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=Media&sba=Plugin&"SRC="http://Yourdomain.com/sound/music.m3u"Name=MediaPlayerShowControls=0Width=2Height=2</embed></OBJECT>

  8. Step 3
    Edit code
    Edit code

    In the code you just copied, change each instance of “yourdomain.com” to be the correct path/url to your MP3 file.

  9. Step 4
    Upload file
    Upload file

    Save the revised copy of the file and upload it to your server. Be sure to mark the file for “overwrite” so that it will completely replace the old copy.

Tips & Warnings
  • Read the Terms & Conditions at your web host before placing a large number of links to MP3 files. If they consider your web page to be designed for file sharing, they may not allow it.
  • While having a nice little audio clip playing in the background may seem like a novel idea at first, it has a tendency to annoy people more than it impresses them, so use the embed version sparingly.
Photo Credit

philcampbell, Flickr.com Creative Commons License

Post a Comment

Post a Comment

Have you done this? Click here to let us know.

I Did This

Related Ads

Internet
Virginia DeBolt,

Meet Virginia DeBolt eHow’s Internet Expert.

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.

Demand Media
eHow_eHow Technology and Electronics