Website Construction for Visual Artists

Adding audio files to your site

In the olden days, webmasters used MIDI audio files to give their sites oomph, which cut through any music that the visitor was enjoying like an old jigsaw. This stemmed from a belief that a website would be poor and incomplete unless it assailed as many human senses as possible. Since then, the mantle has passed to MySpace account holders.

There are ways to create an audio background with HTML (and more effectively with Flash), but I just can't bring myself to recommend them. If you have audio to share, give the visitor access to the file itself, with the option to play it, to download it, or leave it be.

MP3 is the standard, and most agreeable to various platforms. WAV (.wav), Windows Media Audio (.wma), RealAudio (.ra) have also been common, but are more proprietary.

Methods for providing audio:

• Text link. As with video files, this is the easiest.
  
    Example:     <a href="media/song25.mp3">Song #25, 2 MB</a>
  
  The filesize disclaimer is a polite way to do things, but not essential nowadays (given broadband access) unless you're sharing a large file.
  
  
• Embedded audio. This involves have some scripting that creates a mini-player on your page (either employing built-in features of the browser, or by downloading a media player from a remote location to be inserted in a particular spot). It can look nicer than a text-link, but I personally find embedded audio to be frustrating compared to embedded video -- it comes across as a designer's attempt to prevent anyone from downloading the file. Really, given that folks have trillions of MP3's across a variety of devices, we should all be so lucky as to have an audience willing to download our material.
  
  Nevertheless:
  Using Google/Yahoo!/Odeo embedded audio players
  
  The scripting required to coordinate <embed> and <object> tags that makes an audio player cross-compatible with IE and Firefox is a headache, so for beginners I'll only recommend the link above.
  
  
• A half-measure. You could always create a small graphic that looks like a play-button (or speaker, or some sort of audio-related object), and nest that <img> tag within your <a> tags that link to the video file. It's visual, and does allow users to right-click and download.


Next:   CSS basics