---
title: "Explain the use of audio tags in HTML with an example"
description: "The HTML audio tag is used to embed sound content in web pages. It provides a way to include audio files that can be played directly in the browser."
author: "Ravi Vishwakarma"
published: 2024-06-07
updated: 2024-06-07
canonical: https://www.mindstick.com/articles/336035/explain-the-use-of-audio-tags-in-html-with-an-example
category: "html"
tags: ["html", "html5"]
reading_time: 4 minutes
---
# Explain the use of audio tags in HTML with an example
The HTML [ tag](https://www.mindstick.com/blog/751/html5-audio-and-video-player) is used to attach sound content to the [web pages](https://answers.mindstick.com/qa/35620/how-would-you-change-the-format-of-all-the-phone-numbers-in-10-000-static-html-web-pages). It provides a direction to include audio files that can be played [directly in the browser](https://answers.mindstick.com/qa/95528/how-do-you-prevent-downloads-in-safari-and-instead-open-them-directly-in-the-browser). \
Here’s a vast guide on how to use the tag:
#### Basic Usage
The basic syntax for the `` tag is:
```html
Your browser does not support the audio element.
```
#### Attributes
1. **controls:** Adds audio controls like play button, pause button, and volume [up and down](https://answers.mindstick.com/qa/103949/how-do-plants-know-which-way-is-up-and-down).
2. **autoplay:** The audio will start playing as soon as it is ready.
3. **loop:** The audio will start over again, every time it is finished.
4. **muted:** This is used to cut the sound of the audio output.
5. **preload:** Specifies if and how the author thinks that the audio should be loaded when the page loads. It can have the following values:
- **auto:** The browser should load the entire audio file when the page loads.
- **metadata:** The browser should only load metadata when the page loads.
- **none:** The browser should not load the audio file when the page loads.
## Example with [Attributes](https://www.mindstick.com/interview/34453/what-are-attributes-in-dot-net)
```html
```
#### Multiple Source Formats
To ensure [compatibility](https://www.mindstick.com/blog/303291/best-practices-for-working-with-host-apis-security-compatibility-and-performance-considerations) with one-of-a-kind browsers, you can offer multiple supply files in extraordinary formats:
```html
```
#### Adding Text as a Fallback
In case the browser fails to support the tag, you can provide a fallback message to the browser:
```html
Your browser does not support the audio element.
```
### JavaScript Control
You can also control the audio with JavaScript. Here’s an example:
```html
Audio Player Example
Your browser does not support the audio element.
Play
Pause
Stop
```
### Explanation:
## HTML Structure:
- The `` declaration defines the document type.
- The `` element is the [root element](https://www.mindstick.com/interview/1692/what-is-root-element-in-xml) of the document.
- The `` the element contains meta-information about the HTML document, including its [character](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) set, viewport settings, title, and styles.
- The `` element contains the content of the HTML document.
## Audio Element:
- ``: This creates an audio player with controls like play, pause, and volume buttons.
- ``: This specifies the audio file and its format. You can add more `` elements for different formats (like .ogg) to ensure better compatibility across different browsers.
- "Your browser does not support the audio element.": This text is displayed if the browser fails to load the audio element on the webpage.
## Buttons:
- The buttons are used to control the playback of the audio. Each button has an `onclick` attribute that calls a specific [JavaScript function](https://www.mindstick.com/forum/144/how-to-call-javascript-function-in-c-sharp) when clicked.
## JavaScript Functions:
- `var audio = document.getElementById("myAudio");`: This gets the audio element and assigns it to the `audio` variable.
- `function playAudio() { audio.play(); }`: This function plays the audio.
- `function pauseAudio() { audio.pause(); }`: This function pauses the audio.
- `function stopAudio() { audio.pause(); audio.currentTime = 0; }`: This function stops the audio and resets the playback to the beginning.
###
### Conclusion
- Use the `` tag to attach audio files on the webpage.
- Provide [multiple source](https://answers.mindstick.com/qa/49605/why-having-a-multiple-source-of-income-important-for-an-individual) formats for better browser compatibility on different browsers.
- Use attributes like `controls`, `autoplay`, `loop`, `muted`, and `preload` to control the audio behavior.
- Use JavaScript to manipulate audio playback programmatically.
---
Original Source: https://www.mindstick.com/articles/336035/explain-the-use-of-audio-tags-in-html-with-an-example
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.