HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

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.

NOTE: You might need to download and install some plug-ins for some of the audio files to work.

This tutorial focuses on:

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:
<embed src="/audio/chords.wav" />
Output:
listen to the audio: chords.wav

Click on the play button to play the sound.

Attributes of the <embed> tag

Playing a file in WAVE format with <embed>

<embed src="/audio/chords.wav" width="200" height="60" autoStart="false" />
Output:
listen to the audio: chords.wav

Playing a file in MP3 format with <embed>

<embed src="/audio/notes.mp3" width="220" height="60" volume="85" autoStart="false" />
Output:

Playing a file in MIDI format with <embed>

<embed src="/audio/bach.mid" width="250" height="60" volume="55" playcount="3" autoStart="false" />
Output:
listen to the audio: bach.mid

NOTE: 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.

Example:
<object type="audio/x-wav" data="/audio/chords.wav" width="200" height="40"> <param name="src" value="/audio/chords.wav" /> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> listen to the audio: <a href="/audio/chords.wav">chords.wav</a> </object>
Output:
listen to the audio: chords.wav

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.

Attributes of the <object> tag

The <param> tag is used to pass parameters to the audio file object such as if it should start playing automatically.

Attributes of the <param> tag

NOTE: The <param> tag does not have a closing tag.

Playing an audio file in WAVE format with <object>

<object type="audio/x-wav" data="/audio/chords.wav" width="200" height="40"> <param name="src" value="/audio/chords.wav"> <param name="autoplay" value="false"> <param name="autoStart" value="0"> listen to the audio: <a href="/audio/chords.wav">chords.wav</a> </object>
Output:
listen to the audio: chords.wav

Playing an audio file in MP3 format with <object>

<object type="audio/mpeg" data="/audio/notes.mp3" width="200" height="40"> <param name="src" value="/audio/notes.mp3"> <param name="autoplay" value="false"> <param name="autoStart" value="0"> listen to the audio: <a href="/audio/notes.mp3">notes.mp3</a> </object>
Output:
listen to the audio: notes.mp3

Playing an audio file in MIDI format with <object>

<object type="audio/audio/rtp-midi" data="/audio/bach.mid" width="200" height="40"> <param name="src" value="/audio/bach.mid"> <param name="autoplay" value="false"> <param name="autoStart" value="0"> listen to the audio: <a href="/audio/bach.mid">bach.mid</a> </object>
Output:
listen to the audio: bach.mid

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:

<a href="http://www.landofcode.com/audio/notes.mp3">Click here to hear some notes</a>
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.

  1. Don't let any audio start playing automatically when the page loads
    Besides being a habit of myspace.com users and a bad usability practice (someone might have their speakers on full volume and suddenly the sound from the video 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.
  2. 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.
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information