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.

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.

HTML Audio - How It Works. The controls attribute adds audio controls, like play, pause, and volume. The element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. The text between the audio and audio tags will only be displayed in browsers that do not support the audio element. Simple HTML5 video tag/player generator With the introduction of the video tag in HTML5 you can easily add a video player to your website and play about any video file you want. There are a few attributes that you can set to customize the player behavior and you have a pretty good browser support too.

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?

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>?

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.

Automatically play music files on your website when a page loads

by Christopher Heng, thesitewizard.com

If you code your web pages using a text editor (as opposed to using a visual web editor likeDreamweaver),you may be wondering how you might go about adding background music to your web pages. While this is not a questionI encounter often at thesitewizard.com, I do get the occasional music aficionado sending me this query, hence this article.

Issues Surrounding Background Music

Before you start, you should be aware thatbackground music that automaticallystarts playing when a web page is loaded may not be appreciated by a large number of your visitors. Some of them, when greetedwith the sudden blaring of music from their speakers, may immediately hit the BACK button of their browsers. This may occur evenif you're playing a piece of music that you think is well loved by everyone: remember, there are people who surf the Internet inpublic libraries, at work, or in the dead of the night when others are asleep. Others may already have their favourite('favorite' in US English)piece of music playing on their computer speakers, and your auto-playing music file will only cause them to be annoyed.

Even if you are satisfied that your website has the type of target audience that will enjoyyour background music, there are alternatives to automatically playing music that you mightwant to consider. For example, giving visitors a link which they can click to play musicwould allow you to showcase your music while remaining sensitive to your visitors' preferences.Instructions on how to accomplish this, as well as how to implement autoplaying music, are given below.

Playing Music Only When a Link is Clicked

If you have a music file (such as an MP3 file) that you want played when a visitorclicks a link, put HTML code like the following on your page:

<a href='yourmusicfile.mp3'>Play music</a>

Replace the 'yourmusicfile.mp3' with the appropriate filename. Note that the above HTML codeworks for '.wav' and '.mid' files as well (or anything else for that matter).

How to Embed Background Music on Your Web Site

Update: For a modern treatment on how to include music on your website, please readHow to Play Musicor Audio on a Website with HTML (HTML5) instead.

This rest of this article (below) is obsolete. It was written at a time when Netscape 4 and Internet Explorer 4were the browsers used by the majority of people. ('What is Netscape?' you say. My point precisely.)It even talks about a type of music file (midi) that you rarely see on the Internet any more. It isleft

Html Play Audio On Image Click