Dynadot

Totorial - Adding Music to your Site

Spaceship Spaceship
Watch
Adding Music to your Web Site - the good, the bad and the ugly

Many webmasters like the idea of adding background music to their web sites but most shy away from doing it worrying about slow loading pages and large file sizes. There are many different ways to add background music to your site and some of them don't require large files to achieve professional results. Let's examine all the different ways to add background music to your site and rate them to find the best solution for you.

1) MIDI Files
MIDI files are very small because they actually use your sound card's built-in instruments to create the sounds. The problem is that most sound cards don't have any decent sounds to start with, plus no two sound cards sound alike and therefore the results are very unpredictable. MIDI files usually sound like they're coming from one of those cheap Casio keyboards. Using MIDI for background music is very likely to make your site seem amateurish. Want to know how to do it anyway? Just add the <embed src=xyz.mid autostart=true> line to your site. (Replace xyz with the name of the MIDI file you want to use!) The Autostart command will play the file automatically when the page is loaded.
PROS; Very small file size, easy to implement
CONS: Unpredictable results, amateurish sounds

2) WAV Files
Using the WAV file format allows you to add professional sounding recordings to your site but the problem is that even if you use a low quality setting like 11k/8bit, the file sizes are still very large and it will take a long time for your music to load. And slow loading pages are the worst thing that can happen to a site. Implementing a WAV file on a web page is easy. Just add the line <embed src=xyz.wav autostart=true> to your page's HTML code. There's an additional command to loop the WAV file but WAV files do not loop cleanly with the embed command.
PROS: Many Quality Levels, Easy to implement
CONS: Large File Sizes, WAV Files do not loop

3) MP3 Files
MP3 files are highly compressed and don't take that long to load but the problem is that MP3s need to bring up an external player program and which in some cases takes your visitors away from your site altogether. Also, MP3 files don't loop cleanly.
PROS: Smaller File Sizes, Good Quality Possible
CONS: Needs external player software, not loopable

4) Flash
If you own a program that can create Flash files, you will have lots of flexibility in adding sound to your site. Flash lets you import WAV as well as MP3 Files and then creates quite small files from these sounds that will load automatically on your site. You can set the quality level and therefore decide how large you want the Flash file to be. Flash also allows you to loop short pieces of sound to create 'continuous' background music files that can be quite small. But please note that only imported WAV files can be looped in Flash, MP3 files will not loop cleanly.
PROS: Great Flexibility, Small File Sizes, expecially when looping sounds
CONS: You need to buy expensive Flash software to create Flash Files

5) Pre-Made Flash Loops
The newest thing on the market are pre-built Flash Music Loops. These files are professionally recorded, loop almost indefinitely and most of these Flash Music Loops are only about 20k in size so they load almost instantly. Flash Music Loops are available at http://www.flashmusictracks.com and currently there are three different loop packages available in all kinds of music styles from classical to techno. Using these pre-built Flash files is easy. Simply upload the "xyz.swf" Flash file to your server and add a few lines from the corresponding "xyz.html" file to your web page and presto...instant professional sounding background music.
PROS: Extremely small file size, professional quality music
CONS: None

As you can see there are many different ways to add background music to your web pages and you don't have to worry about slow loading pages if you choose the right file format.

Article by Alan Steward, a professional recording engineer and producer who worked with many Grammy award winning groups and musicians.
(c)2004 Alan Steward - http://www.musicleads.net
You may freely redistribute or use this article on your website or in your newsletter as long as the article is unaltered and unedited.
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Handy... But I don't like to add music ona site.. Only if it's flash animated.. But for example sites which have ugly strong colors and have a little midi song are just digusting in my opinion...

Thanks for the tutorial!
 
0
•••
Don't like music on non Flash Sites?

In answer to the reply from montreal:

Adding Flash Music on a non flash site works perfectly but like you said, it has to be a good looking site.
Check out the first two pages on the http://www.flashmusictracks.com site. The entry page got a single flash graphic together with the music background, but the rest of the page is regular HTML except for a tiny flash banner.
Most designers don't realize that you can effectively combine HTML and Flash to create a fast loading site. It doesn't have to be Flash or HTML only. The trick is in the combining fo the two.
Pure Flash sites are just hell to sit around and wait for and HTML sites with MIDI music...well, we both agree are for 5 year olds.

Alan Steward
 
0
•••
Ugh, too many bad experiences with music on web pages to ever be able to approve of it. Although I guess if it's done right, some trendy music on a well-designed flash site can be good, and I'm all for little sound effects on flash sites.

Oh man, bad memories.
 
0
•••
ya, i never use music unless its my flash mp3 player, like for a bandsite, and then for my flash sites, i use like button sounds, but thats it. MIDI's are the root of all evil :tu:
 
0
•••
You can try Flash Voice Buttons. It's the most powerful tool. Putting any sound or voice message to your website never been so easy.
A lot of button styles and the main thing is that all of the internet surfers can play sounds without any extra downloads or plugins.

Get It On:
http://www.reutera.com/Flash-Voice-Buttons/
 
0
•••
um the flash loops sound cool xD
 
0
•••
0
•••
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back