HTML audio
Text and graphics are good for presenting content on the web, but what if you can include audio on your webpages? Audio can make a webpage more interactive resulting in a more interesting and entertaining experience for the user.
NOTE: The audio files on this page may take a few minutes to load. Please be patient.
This lesson focuses on:
- Audio formats
- Playing audio with the <embed> tag
- Playing audio with the <object> tag
- Loading audio without a webpage
- Things to avoid
Audio formats
There are several audio formats you can use for audio on the web. Audio includes everything ranging from simple sounds to complex songs.
The WAVE Format
Originally developed by Microsoft and IBM, the WAVE format is supported by computers that are running Windows, and it is also supported by all the major browsers. To be able to play sounds in the WAVE format on non-Windows computers, a plug-in such as Adobe Flash may be needed. Audio files in the WAVE format will have a .wav file extension.
The MP3 Format
A very popular format that is used extensively for music. This format utilizes strong compression (resulting in small file size) together with high quality. The MP3 format is supported by all major browsers. Audio files in the MP3 format will have a .mp3 file extension.
The MIDI Format
MIDI stands for Musical Instrument Digital Interface. This is a special format that is used for electronic music devices (like synthesizes or electric keyboards) to be able to communicate with computers.
This format was originally developed by the music industry. It can be used for a wide range of music making ranging from the simplest (a few notes) to the most complex (full professional songs).
The MIDI format is supported by all major browsers. Audio files in the MIDI format have a .mid file extension.
Playing audio with the <embed> tag
The <embed> tag can be used to place various media like audio and video on webpages.
NOTE: The <embed> tag is not part of the HTML 4.01 specifications. Despite this, it is still widely used and supported by modern browsers.
NOTE: The <embed> tag has no end tag.
Playing audio with <embed> example:
Output:
Click on the play button to play the sound.
The above example is very basic and uses just one attribute of the <embed> tag -- the src attribute which is the only required attribute. Below you will find a list of attributes for the <embed> tag as well as some examples for each of the audio formats mentioned earlier in this lesson.
Playing a file in WAVE format with <embed>
Example:
Output:
Playing a file in MP3 format with <embed>
Example:
Output:
Playing a file in MIDI format with <embed>
Example:
Output:
A word of caution when using the <embed> tag:
The <embed> tag is not part of the HTML 4.01 specification. Using it will cause a webpage to not validate with a page validator. Even if it is widely used, using it is still not semantically correct. As an alternative, please use the <object> tag which we will discuss right now....
Playing audio with the <object> tag
The alternative to the <embed> tag is the <object> tag. Unlike the <embed> tag, the <object> tag is part of the HTML 4.01 specification and you can create valid webpages with it.
Playing audio with the <object> tag is a little more complicated and actually requires use of another tag -- the <param> tag.
Playing audio with the <object> tag example:
Output:
You will have to use the <object> tag together with the <param> and understand how they work together to play audio files with the <object> tag.
The <object> tag is used to actually embed the audio file on the webpage.
The <param> tag is used to pass parameters to the audio file object such as if it should start playing automatically.
NOTE: The <param> tag does not have a closing tag.
The above example, but this time with comments to make it clearer:
Output:
Playing an audio file in WAVE format with <object>
Example:
Output:
Playing an audio file in MP3 format with <object>
Example:
Output:
Playing an audio file in MIDI format with <object>
Example:
Output:
Loading audio without a webpage
Loading audio without a webpage is easy. To do so, just put the absolute location of the audio file into your browser. For example, the URL for one of our audio files is http://www.landofcode.com/sounds/notes.mp3. Put this URL into your browser and you will see just the control for the audio object.
To provide audio to the user without a webpage, you can have a link on a webpage with the same absolute URL
Example:
Output:
Click on the above link to see the audio object in a browser by itself without a webpage.
NOTE: Sometimes the audio object will not load in the browser by itself, instead a box will appear asking you if you want to download the audio.
Things to avoid
When it comes to playing audio on a webpage, there are certain things that should definitely be avoided.
-
Don't let any audio start playing automatically when the page loads
Besides being a bad usability practice and a habit of myspace.com users (someone might have their speakers on full volume and suddenly music starts blasting out of nowhere), it is very annoying. Because to shut it off, the user has to scour your webpage to find the control to do so. They can just go ahead and shut off their own volume, but what if they need it or were using it for something else at the moment? This is a bad usability practice and should definitely be avoided. -
Don't hide the control for the audio file object
The volume that you set initially may not be to someones liking, someone might want to stop the audio or start over half way through the audio, there are many possibilities. Having that control for the user is an important thing. Do not hide it.
