HTML <audio> Audio Tag
Tags: learnhtml
Published: 2021-02-13 09:43:36

---
title: HTML <audio> Audio Tag
published: true
date: 2021-02-12 06:14:35 UTC
tags: LearnHTML
canonical_url: https://sharepointanchor.com/learn-html/html-audio-tag/
---

The **Audio <audio> tag** defines a sound, and it is used to **embed audio content** such as music or other streams in an HTML document. It is one of the **new sectioning elements in HTML 5**.

The **<audio>** tag uses the **“src”** attribute or **<source>** tag to indicate the variations of the same audio file. This tag may contain one or more audio sources. It can also be the destination for **streamed media** , using **MediaStream**.

In Simple words, the **<audio>** tag helps to **add and play audio files** on your site. Since not all browsers support all audio formats, the audio file is encoded using special codecs.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 3 minutes

## Syntax:

The <audio> tag always comes in pairs. It contains both an **opening <audio> tag** and **closing </audio> tag**.

```

<audio src=sound.mp3> filename </audio>

```

## Sample of the HTML <audio> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls>
      <source src="https://sharepointanchor.com/wp-content/uploads/2021/02/SPA.mp3"><!-- It is a mp3 format audio file-->
      <source src="https://sharepointanchor.com/wp-content/uploads/2021/02/SPA.ogg"><!-- It is a ogg format audio file-->
    </audio>
    <p>Click the play button</p>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_oPKi6ZhFSd.png)<figcaption>Result</figcaption>

<script async src="//jsfiddle.net/Share_Point_Anchor/dzr8y40m/embed/html,result/"></script>

## Attributes:

The <audio> tag has attributes, that **indicate the path to the audio file**. This tag mostly use the following attributes such as:

- **Controls** Attribute
- **Autoplay** Attribute
- **Loop** Attribute
- **Muted** Attribute

## Control Attribute:

Instead of playing sounds automatically, you can use the **“control”** attribute in the <audio> tag. This attribute lets the browser display controls such as **Volume** and **Play/Pause** options.

```

<audio src="sound.mp3" controls> </audio>

```

## Autoplay Attribute:

The **“autoplay”** attribute is used to play audio files automatically.

```

<audio src="sound.mp3" autoplay> </audio>

```

## Loop Attribute:

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

```

<audio src="sound.mp3" autoplay loop> </audio>

```

## Muted Attribute:

This attribute specifies whether the audio will be initially silenced.

```

<audio src="sound.mp3" muted="true"> </audio>

```

## Multiple File Formats:

This tag can be used to play sound files in the following formats:

- **.mp3** – This file format supports by all modern browsers.
- **.wav** – This format will not support by Internet Explorer.
- **.ogg** – It will not support by Internet Explorer and Safari.

With the **<audio>** tag you can define **multiple formats of the 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.

```

<audio controls>
  <source src="sound.ogg">
  <source src="sound.mp3">
</audio>

```

## List of Attributes for <audio> Tag:

The **<[audio](https://en.wikipedia.org/wiki/HTML5_audio)>** tag supports the **global attributes** and the **event attributes**. You can use the following properties to style an [HTML](https://sharepointanchor.com/category/learn-html/) audio tag.

<style> th, td{ padding: 20px; } </style>

| Attribute | Value | Definition |
| --- | --- | --- |
| autoplay | | This attribute helps to **play the audio file automatically** after loading the page. |
| controls | | It displays the **control options such as (play/pause button, volume control)**. If the controls attribute is missing, the audio file will not be displayed on the page. |
| loop | | Helps to repeat continuously the audio file from the beginning after its completion. |
| muted | | This attribute lets the browser to **mutes the sound** when the audio file is played. |
| preload | | The preload attribute **defines what the browser should do**  if the attribute controls are not specified. |
| auto | **Playback starts after the page is loaded**. |
| metadata | It will tell the browser **to upload a small portion of the file** to determine its main characteristics: (for example, file size). |
| none | **Playback starts only after clicking the corresponding button**. |
| src | URL | This attribute **specifies the path to the audio file**. |

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/browser.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <a> Anchor Tag](https://sharepointanchor.com/learn-html/html-anchor-tag/)**
- **[HTML <area> Area Tag](https://sharepointanchor.com/learn-html/html-anchor-tag/)**

The post [HTML <code><audio></code> Audio Tag](https://sharepointanchor.com/learn-html/html-audio-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).