Adding digital audio to web sites by Matt Ottewill (August 2010)

Our recommended methods

Until browser developers have agreed standards for HTML 5 audio tags here are our 2 recommendations for adding audio to your site.

1. Link to an MP3 audio file

In many ways linking is best because it leaves the end-users system and browser to decide on what to do with it. Depending on the end-user's browser's "file helper" settings, browser version, installed software and installed plug-ins the file may ...

• Play in a browser plug-in (QuickTime, Windows Media etc)
• Launch an audio playback application (iTunes, Windows Media Player etc)
• Download to disk

A simple link to an audio file might look like this ...

Record noise sample (MP3 400Kb)



What is a codec?

A codec is a piece of software, sometimes called an algorithm, which is used to compress a media file (reduce its size) and then later decompress it before it is played. This process is useful for 2 primary reasons ...

1. To allow more data to be stored on a given storage device (such as a digital video camcorder hard drive or memory card).
2. To increase the speed of transmission across a network (such as the internet).

The term "codec" is usually used in reference to audio and video media files, but still image compression methodologies, such as jpeg, can also be called codecs. A codec may be lossy (cause some deterioration in quality) or lossless.

A "hard codec" is integrated into the electronics of a hardware processor/device such as a camcorder, MP3 player or video capture card. A "soft(ware) codec" is installed onto a system and runs on the systems CPU. QuickTime mostly comprises a collection of soft codecs which run on a PCs CPU and can be used by any application installed on the system, such as a web browser or video editing application.

Examples codecs are ...

• .jpg (images)
• .mp3 (audio)
• .mp4 (video)

MP3 compression programs

Many people use iTunes to convert uncompressed CD quality audio into MP3 files but almost all audio editing software will allow you to export to MP3. Programs include ...

• iTunes
• Cubase
• Logic
• Performer
• Sound Forge
• Peak
• Audacity
• etc

MP3 parameters (settings) to alter

When creating MP3 file you can experiment with the following settings ...

• Data Rate This will vary the "strength" of compression. How this achieved depends on the compression codec and it is rare to have access to more than just an overall bit rate (kilo bits per second) control.
• Variable bit rate This constantly alters the bit rate to achieve the best file size to quality ratio for the material.
• Sample rate Use 44.1kHz if you can. 32kHz is acceptable and you will notice a loss of quality at 20.050kKHz.
• Bit-depth Use 16-bit if you can. 12-bit is acceptable.
• Channels I use mono for previews and stereo for everything else

Suggested MP3 parameter settings

Experiment but here are a few suggestions ...

• Previews = 96kbps, 32kHz, 12bit, mono, variable bit rate on/medium quality
• Standard quality = 128kbps, 44.1kHz, 16bit, stereo, variable bit rate on/medium quality. Most internet MP3 file are encoded with these settings
• High quality = 192 - 224kbps, 44.1kHz, 16bit, stereo, variable bit rate on/high quality

2. Create a bespoke Flash audio player console

Flash has evolved into serious development platform for programmers and non-programmers, and contains functions for the control and playback of audio and video files which may be either embedded in a Flash movie or linked to it. If you want to create your own bespoke player "console", perhaps with a playlist, you will need to be familiar with ActionScript.

 

Using the <embed> tag (NOT recommended!)

WARNING: This method is not recommended by either us or w3.org

An alternative to linking is to add some code that will attempt to control the way a file will play and with what controls. Using the <embed> or <object> tag will normally result in the end-user browser using the default plug-in (typically QuickTime, Windows Media or Real Audio) to play the file with or without the default plug-in playback control panel.

IMPORTANT: Embedding does not mean the audio file is embedded in the page, IT IS STILL LINKED!

A word of warning!!!

• The <embed> and <object> tags are not supported across all browser (versions)
• www.w3.org discourages the use of the <embed> tag and encourages the use of the <object> tag, but this is a little used and badly supported tag also.
• You may be better off linking to your audio files rather that embedding them
• Do NOT embed large files (experience suggests files over 3Mb embed badly)
• Embedding large files (over 200Kb) will slow the overall appearance of your page

Embedding audio invisibly into a page

You can insert the following code (change the file name of course!) in the <head> tag of a page to make an audio file play automatically and with NO visible controls ...

<embed src="mysoundfilesname.mp3" autostart="TRUE" hidden="TRUE"></embed>

NOTE: The hidden parameter works erratically in Netscape.

Embedding audio with visible controllers

You can insert the following code (change the file name of course!) anywhere on a page to make an audio file play with visible controllers ...

<embed src="mysoundfilesname.mp3" height="40" width="144" controls="CONSOLE" autostart="FALSE" loop="FALSE"></embed>

It looks like this >>>>

Listen to some record surface noise here ...