HTML Basics: Adding music with the AUDIO tag of HTML5 • Integrating audio content into the webpage without plug-ins

Integrate an audio player into the webpage

Have you been looking for a way to play audio on your webpage 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 webpage 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

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 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 webpage to integrate an audio player.

Example
<audio controls>
    <source="/en/audio/fluidity-19.mp3" type="audio/mpeg">
    Your browser does't support this audio format.
</audio>
Output of the HTML code
Advertisement

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 webpage is loaded. This might be intrusive for the webpage 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.

Advertisement