Music is a popular addition to many sites, audible in a variety of venues and formats. Gone are the days of tinny midi background music that won't stop playing unless a viewer leaves a site. Sophisticated technology now allows web designers to add clear as a bell, easy to download music as background, to highlight a specific activity, or to allow viewers to preview an artist's work. As well, Flash can be used to combine music and graphics/text. Here are some tips on how to incorporate music into your web site without driving your viewers crazy.

Background Music

There are two common ways to add background music to a web site. The first involves a simple link, the second is more tenacious - you actually embed the music right into the site, so it begins to play as soon as someone begins to view the page.

ADDING A SIMPLE LINK

You can give your viewers the option to listen to music that flows with the theme of your web site by including a clickable link to the music file. The music can be in a variety of formats, including mid (midi), wav, MP3, ram, ra, aiff, and so on), and it is solely up to the viewer whether they listen to it or not, as they browse your site. You can provide a simple text link to the file or create a coordinating image to take them there.

Example Text Link:

<A HREF="http://www.yourdomain.com/beautifulday.wav">Listen to Music</A>

Which would look like:

Listen to Music

Example Graphic Link::

<A HREF="http://www.yourdomain.com/floating.wav"> <img src="http://www.visionsofadonai.com/musicbutton.jpg" border=0 ></A>

This would ultimately look like this (Music by Djan Karet, Dreamscapes):




EMBEDDING MUSIC

Sound can be embedded so that the music plays as soon as a web page is opened. You simply need to place appropriate code on your page. For instance, to embed a wav file of a song called "Beautiful Day". you would put the following code into your html coding (this works for various sound files such as mid, wav, mp3, ra, aiff):

<EMBED SRC="beautifulday.wav" HIDDEN=true AUTOSTART=true>

<NOEMBED><BGSOUND SRC="beautifulday.wav"></NOEMBED>

Coding a Console:

The above code works well to embed background music, but it does not allow the viewer to control whether to listen to the music or not. If you wish to give them a choice, use the following code:

<embed src="beautifulday.wav" width="140" height="40" autostart="true" loop="true"> </embed>


If you do not want the music to loop (play repeatedly) you can change the loop="true" command to "false". You can also customize the size of the control panel that emerges by varying the width and height within the above code.

Make sure you have rights to the music file before you use it!

FLASH BASED MUSIC

One of the beauties of Flash is the way sounds and music can be seamlessly incorporated with text and images. Gone are the days of tinny midi background music. Macromedia Flash (well, now Adobe Flash) has added a new dimension to the use of sound on a website. A variety of files can be textured into your movie - AIFF, Mp3 and WAV files are all manageable. Flash imports either 8 or 16-bit sounds at sample rates of 11, 22, or 44 kHz. The best sample rate and bit depth to begin working with are 22kHz 16-bit mono samples.

As every designer knows, the key roadblock to using sound on a website is download time. Viewers will quickly get bored if a page or Flash movie takes forever to load. Sounds take up enormous space as far as bytes go. Far more than graphics do. However, the clever designer learns to work with snippets of sound and music, judiciously placing them using the loop function to take full advantage of repetition and transitional tones and phrases. A really dynamic end product can be achieved by combining short little sound files with the movement and sequence of the graphical and textual animation. Flash leaves lots of room for experimentation and creativity. Once you get the hang of it, the whole process of incorporating sound into a Flash movie can become quite addictive and rewarding. Read more....

Here is an example of using music loops as a background for a Flash presentation. Notice that the music is a small 30 second or so long production that loops over and over until the movie is finished. Another example is Laura Turner's exquisite voice greeting you as you enter her site. In this case, an entire song is played as background music, but is based within the Flash interface.

Custom Music Player Panels

Flash can also be used to showcase custom made Music player panels. A good example is the Death Cab for Cutie site: their panel is at the top of the page, offered as part of the Flash structure.

Or, you can use colored table or CSS bars plus icons to create a neat panel to showcase music clips or whole songs, such as the one shown here on Mariah Carey's site.