HTML Basics: Transform Your Web Page – How to Embed Audio Content for Improved User Experience

Integrate an Audio Player into Your Web Page

Have you been looking for a way to play audio on your web page for a long time, but didn't know how to integrate an audio source into your HTML page? The new HTML5 AUDIO tag makes it really easy to add music or other audio data to your web page without the need for Flash or other audio plug-ins.

All current web browsers, including mobile browsers, fully support the audio tag. So you can play audio without having to worry about any incompatibility issues.

The HTML audio tag is used to integrate sound, music or another audio source into an HTML page. Currently 3 audio formats are supported.

• mp3 – MIME-type audio/mpeg

• wav – MIME-type audio/wav

• ogg – MIME-type audio/ogg

The HTML <audio> Tag

The audio tag starts with <audio> and has to be closed with </audio>. It can contain one or more audio sources, which can be represented by either the src attribute or by the <source> element. The browser will select the most appropriate one.

Insert the following code into your web page to integrate an audio player.

<audio controls>
    <source="/en/audio/fluidity-19.mp3" type="audio/mpeg">
    Your browser does't support this audio format.
</audio>

By specifying the controls attribute, a control panel is displayed. This allows the user to use the Play, Pause, and Volume controls. The controls attribute should always be specified so that the user can change the volume or pause as well as start the playback.

The type attribute is needed because there are a number of different audio formats that may or may not be supported by a certain browser due to licensing issues.

The mp3 audio format is supported by all recent web browsers. The wav or ogg audio format doesn't need to be specified unless you want to add support for an older browser.

Additional Attributes for the Audio Player

• preload attribute
  This attribute is used to specify how the audio file should be loaded. The following values are possible: auto, metadata, none.

  With preload="auto" the browser decides automatically what to preload.

  With preload="metadata" only the metadata (e.g. name and duration) will be preloaded without the actual audio data.

  With preload="none" no data is preloaded. The audio file will not start to load until the play button is clicked.

• autoplay attribute
  The audio file starts playing as soon as the web page is loaded. This might be intrusive for the web page user.

• loop attribute
  This will play the audio file in an endless loop.

• volume attribute (Loudness)
  With volume="initial value" the initial volume level be set to any value between 0.0 and 1.0. No starting value above 0.25 (i.e. 25 percent) should be selected for the initial audio output.

• muted attribute
  This mutes the playback loudness. The visitor then needs to adjust the volume themselves as required using the volume slider.