Introduced with HTML5, the <audio> tag defines a sound and is used to embed audio content such as music or other streams in HTML documents.

Definition and Usage. The play method starts playing the current audio. Tip: This method is often used together with the pause method. Tip: Use the controls property to display audio controls (like play, pause, seeking, volume, etc, attached on the audio). Audio controls autoplay Your browser does not support the audio element.

As of 2020, <audio> is widely supported among modern browsers. Internet Explorer 8 doesn’t support it, as well as earlier versions.

<audio> can be used to play sound files in the following formats:

• .mp3: Supported by all modern browsers.
• .wav: Not supported by Internet Explorer.
• .ogg: Not supported by Internet Explorer and Safari.

Using <audio> to Insert an Audio Element on Your Website

Here is the most basic use of the HTML <audio> tag: On this example it loads a .mp3 file from your webserver and plays it.

Notice the autoplay attribute which is used to play audio files automatically. That being said, playing sounds automatically on a web page should be avoided as this is extremely annoying for your visitors, who have no way of stoping the sound playback.

Loop an Audio File

If you want an audio file to play over and over again, you can add the loop attribute to your audio element.

Display Browser Controls

Instead of playing sounds automatically, it is possible to let the browser display controls such as volume, play/pause, etc to the user.

This can be done easily, simply by adding the controls attribute to the tag.

Multiple File Formats

<audio> lets you specify different formats of a same audio file. This is especially useful if you wish to play a file in .ogg format, which is not supported by both Internet Explorer and Safari.

Specify MIME Types

When using different file formats, it is a good practice to specify the MIME type of each file in order to help the browser localize the file it supports.

It can be done easily, using the type attribute on the source element.

Fallback For Old Browsers

All modern browsers support <audio>. It is however possible to notify people who are using outdated browsers that the <audio> tag isn’t supported.

As shown below, you can simply embed any message of your choice within the <audio> tag. If the visitor’s browser doesn’t support HTML audio, a message will be displayed instead of the audio player.

Buffer Files

When playing large files, it is a good idea to buffer those files in order to provide visitors a smooth listening experience.

To do so, you can use the preload attribute. It accept 3 values: none (If you don’t want the file to be buffered), auto (If you want the browser to buffer the file, and metadata (To buffer only metadata when page loads).

Control HTML5 <audio> with JavaScript

Controling a HTML audio player with JavaScript is pretty easy. The following example shows how you can build a rudimentary audio player with basic controls (Play, Pause, Volume Up, Volume Down) using HTML and JavaScript.

Styling the HTML Audio Tag Using CSS

As of 2019, CSS styling options for the HTML audio tag are quite limited. The CSS properties that can be used are: width, box-shadow, border-radius and transform.

You can experiment with the small demo that I’ve created on CodePen, or just have an overview of the possibilities by having a look at the code below.

If you are looking to create your own HTML audio player, the best option would be to leave off the control attribute and implement your own controls using JavaScript.

Advanced Audio Player Using MediaElement.js

As shown above, CSS styling options for <audio> are very limited. Fortunately, an amazing open-source media framework named MediaElement.js allows you to have much more control on your audio elements.

The above example showcases how MediaElement.js allows developers to easily give a custom look and feel to their HTML audio players. You can view this example live here.

If you are looking to build custom audio (or video) players, MediaElement.js is definitely a tool to consider.

Frequently Asked Questions

What Is Audio Tag In HTML?

Html Play Audio On Image Click Check

The HTML audio tag (<audio>) has been introduced in HTML5, and represents an audio element within a HTML page. It is used to embed sound files into a web page.

Which HTML Tags Can be Used Within <audio>?

Html Play Audio On Image Click

No other HTML tags than source, used to specify the path of an audio file, can be used within <audio> and </audio>. Any text within the tag will be displayed if the visitor’s browser does not support HTML audio.