Designing Music-Related Web Sites

The Internet is a great democracy - anyone can appear as important and successful as a huge mega-bucks corporation, as long as you don't ruin it with lousy spelling and poor grammar!

An Internet web site is a collection of web pages. Some web sites have only one page, but most have a main page with links to other pages or files on the same site. Your web site visitors can click on these links with their mouse, and they are taken automatically to the linked page or file. A link is generally displayed as underlined text, to let viewers know that it will call up a picture, another page, or a sound file. A picture can also contain a link, such that clicking on the picture calls up a new page, or perhaps a larger version of the same picture. Links can even take the visitor to another web site, or optionally display a picture or play a MIDI file from another web site while your page is still active. This concept of navigating a large and sometimes complex collection of information via clickable links is called Hyper-Text.

Most commercial web sites have their own domain name such as www.yourname.com, though that always costs more than having your site be hosted by your Internet Service Provider (ISP). With a hosted site, your web address will probably be something like www.members.aol.com/~yourname.

There are three aspects to web site design: Text, Graphics, and Sound, and these are discussed briefly below.

The text on a web site tells people who you are and what your band, or your company, is about. Web site text uses a special format called HTML, which stands for Hyper-Text Markup Language. These files are created either manually in a word processor using HTML language commands (yuck), or with the aid of a web page design program. Web sites can also contain plain text files, but that is usually reserved for legal and other documents, where pictures and sound are not needed. I create my web pages with Microsoft Front Page, a reasonably-priced program that consistently wins PC Magazine's Editors Choice award.

The graphics on a web site can be photos, static drawings, or animations. But unless you are an artist and own a graphics drawing tablet, you'll probably use a scanner to convert your photos and other graphic elements into graphics files. Web browser programs understand two graphics file formats: GIF (Graphics Interchange Format, which was developed by CompuServe) and JPEG (as defined by the Joint Photo Experts Group). Both formats compress files so they can be transferred over the Internet more quickly. GIF files use lossless compression, and are thus restored completely at the receiving end. JPEG compression often results in even smaller files, but at the expense of quality. JPEG further lets you specify the amount of compression, so you can balance file size reduction with the image quality.

Ethical or not, it is simple to steal any graphic image from another web site. If you click on a picture with the right mouse button, you will see a menu of options, one of which is to save the image to your local hard disk.

Sound files played or downloaded from a web site can be in any of several formats: Wave files, MIDI files, RealAudio files, and MP3 files. In fact, any file format can be used on a web site, but people who visit your site must have an appropriate player program in order to hear them. Fortunately, player programs are available for all of the popular audio formats at no cost. Even the encoder programs are usually free, or at least not too expensive.

You can download the RealAudio encoder and player programs for free from real.com. And you can download the Microsoft MediaPlayer, which plays both RealAudio and MP3 files (and many other formats including video) from microsoft.com/windows/mediaplayer. An extensive list of MP3 players and encoders is available at the MP3 web site at mp3.com.

RealAudio files are compressed severely, and audibly, but they are made small enough to play in real time over the Internet using a telephone line and standard modem. The typical file size reduction for RealAudio is to 1/80th the original size. MP3 files are compressed to about 1/12th the original size. They therefore sound much better than RealAudio, but are too large to play in real time unless your listener has a high-speed Internet connection. However, as with JPEG graphics files, both methods offer a wide range of compression rates to let you control the audio quality versus the reduction in file size. MIDI files are the smallest of all, but they of course cannot handle vocals or other live audio performances. Further, with music played in MIDI format, you are at the mercy of whatever sound card is installed on the user's computer. These days most sound cards use wavetable (sampled) sounds, but many older sound cards use FM synthesis. Even with wavetable sound cards, instrument balance, tone, and quality can vary widely from one brand and model to another.

To set up a RealAudio file for streaming (real-time online playing), you first need to encode a standard Wave file to the RealAudio format. RealAudio files have an .RA extension. Then you create a .RAM file, which is a one-line text file containing the full address of the .RA file:

http://www.mywebsite.com/mytune.ra

The clickable link on your web page then refers to mytune.ram, not mytune.ra.

MP3 files are not usually set up to stream; rather, they will be downloaded by the user and played offline whenever they want to hear it. One complication arises when a listener is using the Microsoft MediaPlayer. When an MP3 file is clicked on, MediaPlayer will try to play it online anyway: Half a minute goes by while the first few seconds of the song are downloaded, a little music plays, then there's another wait, a little more music, and so forth. I suggest you put a note on your web page telling users that have the MediaPlayer to instead right-click and select Save Target As to force their web browser to save the MP3 file to their hard disk. Fortunately, high-speed Internet connections are becoming much more common, so your visitors that have a cable or DSL connection can play MP3 files in real time.

[Added 11-27-02]: You can stream MP3 files for playback in most MP3 player programs, though different versions of Microsoft's Media Player behave differently. Ensuring that MP3 files stream is done the same way as for RealAudio files: You create a text file that contains the full address of the MP3 file you want to stream, and save the text file with an .M3U extension. Put both the MP3 and M3U files on your web site, then link to the M3U file for a streaming version and to the MP3 file to have the file download.

To let users play a MIDI or Wave file, simply reference the name of the file on the web page in the link. It is not necessary to include the full address (starting with http://www):

mytune.mid

or

mytune.wav

You can optionally have a MIDI (or RealAudio or Wave) file play automatically (and repeat any number of times or even indefinitely) when the web page is displayed using the command:

<bgsound src="mytune.mid" LOOP="-1">

Of course, a good web page design program lets you specify playing a background audio file without having to code this command manually.

Once you have designed your web pages, created the graphics, and made RealAudio and/or MP3 files of the tunes you want to showcase, you need to transfer them to your web site. This is often done with the command-driven FTP program that comes with Windows, though some ISPs provide a more attractive program that is also easier to use than FTP. Microsoft Front Page includes a facility for "publishing" all of the files to a site, which is also much simpler than entering FTP commands manually.

When I modify or create a web page I generally have FTP running, along with my web page designer and web browser programs. This way I can upload the files and make sure they appear correctly in the browser. If not, I'll make a correction on the spot and upload and test the files again quickly while still online.

If you want to be certain that your web pages will appear correctly on every computer, you should have both Netscape and Microsoft Internet Explorer. In practice, I simply avoid the more advanced available formatting options - those which are more likely to display differently such as frames and scroll bars - and rely on Internet Explorer only. I do check my site occasionally on a friend's computer just to be sure it displays properly with Netscape, but so far I've never had any problems.

The last, and perhaps most important, aspect of web page design is understanding the importance of keeping file sizes as small as possible. I use Paint Shop Professional (now available from Corel), which is a very capable yet inexpensive graphics program that lets you create and scan images, and save them in a variety of file formats. I generally save images as both GIF and JPEG images, and then go to Windows Explorer to see which came out smaller. If a given file is smaller in the JPEG format, I then save several copies using different amounts of compression, and keep the smallest version that still retains an acceptable level of quality. Likewise, you can specify the amount of compression when you create MP3 files. I suggest you encode your tunes several times using varying amounts of compression, and keep the smallest versions that don’t compromise the audio quality too much.

The last point relating to file sizes is perhaps the most important. Nothing is more aggravating for people than wanting to download a file, and not having any idea how long it will take. If you post files of any type on your web site for people to download, be sure to state the size of the file, like this:

Click here to download SwampBabe.MP3 (4.3 MB)

SEEK AND YOU SHALL LEARN

The best way to learn how web sites are designed, and get ideas for creating your own web pages, is to look at other people's web sites. While there are many sites that are more attractive and more sophisticated than mine, you can see how I chose to present my software products and music compositions by visiting my site at www.ethanwiner.com.

Entire contents of this web site Copyright © 1997- by Ethan Winer. All rights reserved.