How Do I Add Background Music to My Web Page: Three Simple Solutions
Embeding Music in Webpages
Adding background music to a web page doesn’t take any expensive software or any in-depth knowledge of any advanced coding knowledge. However, you should have a basic knowledge of HTML, how and where to insert code, and be comfortable with light HTML code editing. You should also own at least your own hosting space, and remember that MP3 files take up more space than MIDI files, so make sure you have enough space to store them.
Warning About Embedded Music
Inserting music into your website should be used with caution. While some viewers may like it, you need to realize that your viewers might already be listening to something else, might have their speakers up loud and not realize it, or be in a public area where music may not be acceptable, such as libraries or school and college computer labs. You should also not expect your users to love everything you love. It is highly recommended that you use a player that does not auto-play, and has at least a play/pause function, and a player with an additional volume option would be optimum.
MIDI vs MP3s, What’s the Difference?
A MIDI - short for Musical Instrument Digital Interface - is a song composed of electronic musical instruments. They lack the depth of real musical instruments and sound much like music being played on a synthesizer. There are no vocal parts in MIDIs. The MIDI file is considerably smaller than that of a WAV or MP3, two other well known music formats.
An MP3 - short for MPEG-1 Audio Layer 3 - is a digital recording of a song. MP3s are the standard audio format for consumer audio storage. These sound like regular song files, and are commonly used in MP3 players and are the standard for streaming music on the internet. You can easily insert either of these into a web page, the choice is up to yours. In either case, you have to upload your music files to your web-server or obtain a link to a directory (URL) online where these files are stored.
Inserting a MIDI File That Automatically When the Page Loads
This version has been confirmed to work with all versions of IE and Opera and should work well for Firefox. Simply replace song2.mid with the URL of your MIDI file:
The downside is that this does not work with Netscape. The workaround for this specific problem is to use this code, but this code does not always work for IE and Opera, and may not work well for Firefox. Once again, simply replace song2.mid with your MIDI’s URL:
Inserting a MIDI File that Plays When a Link is Clicked
Embedding a MIDI file in a page that automatically plays isn’t always appropriate, so you can create a MIDI file that plays when you click a text link or when an image is clicked.
If you want an image instead of a text link, all you have to do is add the HTML code used to insert images between your a href tag. Be sure to change musicnote.gif to the URL of the image you would like to use:
Streaming MP3s with a Flash Player
If you want to add an MP3 song to your website, you can easily download a program called Free Flash MP3 player - provided by Premium Beat. After you download and unzip your file, simply follow the steps below to embed music into your web page.
Placing Your Player Where You Would Like
Open sampleEmbedCode.html in any html editor - such as notepad or Adobe Dreamweaver - and copy the embed code, then paste it into your own page (in the HTML code) where you would like it to appear. Place the playlist somewhere where it will be seen, so users can turn it on and off at will.
Editing the Paths to Point Where You Need Them To
Change the playlistPath parameter in the provided embed code to point to where you have uploaded your xml playlist: Change playlist.xml to point to where your playlist file is located
so.addVariable(“https://yourwebsites.com/music/", “playlist.xml”);
Editing and Filling in your Playlist Name
Open playlist.xml in an HTML editor - once again you can use Notepad or Adobe Dreamweaver - and modify the xml code to show the titles and paths of your MP3 files. Be sure to write them out exactly, because any errors will cause your song not to play in the player. Every code block that falls between and defines a single track. Simply use as many of these blocks as you need to fill up your playlist. Here is an example of what that would look like:
If you feel more comfortable with it, you can point to the absolute directory where your music is located on your server. This will help to prevent errors if you have a lot of sub-directories.