Home 〉 HTML Tutorials 〉 HTML Audio Tag Tutorial with Examples and Attributes | Learn HTML5 '<audio>' Element

HTML Audio Tag Tutorial with Examples and Attributes | Learn HTML5 '<audio>' Element !

HTML Audio Tag Tutorial with Examples and Attributes | Learn HTML5 '<audio>' Element !

Want to add audio to your website using simple HTML?

This detailed blog post on HTML audio tag explains its syntax, attributes, inline CSS styling, and how to embed audio files in web pages. It covers block-level behavior, complete examples, best practices, and related media elements. Learn how to use the '<audio>' tag efficiently with autoplay, controls, loop, and more. 👉 The complete blog post on the HTML audio tag is as follows.

Introduction

The HTML '<audio>' tag allows you to embed sound content, such as music, sound effects, or voice recordings, directly into a webpage. Introduced in HTML5, the '<audio>' tag has become a standard way to handle audio playback without the need for external plugins like Flash.

With the help of various attributes, you can control how audio plays, including autoplay, looping, and preloading options. In this blog post, you will learn the syntax, usage, attributes, and best practices to use the '<audio>' tag effectively.

The '<audio>' tag is considered a block-level element because it occupies the full width of its parent container by default and can contain other nested elements like '<source>' and fallback text. It is not an empty element because it has an opening and a closing tag.

Syntax and Explanation

Syntax ✍

<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

  • '<audio>' is the main tag used to embed audio.
  • 'controls' attribute adds play, pause, and volume control buttons.
  • '<source>' defines the path and file type of the audio file.
  • The fallback text ("Your browser does not support...") is shown in unsupported browsers.

🔖 HTML '<audio>' Tag Attributes

Here are the main attributes supported by the '<audio>' element:

1. 'src'

Specifies the path to the audio file.

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This plays the 'audio.mp3' file with audio controls.

Refer our blog post on 'file path' if you have your file in another directory.

2. 'controls'

Displays built-in audio controls like play, pause, and volume.

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Enables UI controls for audio playback.

3. 'autoplay'

Plays audio automatically once the page loads.

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<audio src="/images/audio.mp3" controls autoplay></audio>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Audio will play without user interaction (may be blocked by some browsers).

4. 'loop'

Makes the audio play repeatedly.

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<audio src="/images/audio.mp3" loop controls></audio>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Audio restarts automatically after it ends.

5. 'muted'

Starts the audio in a muted state.

Code : 5 📝

<!DOCTYPE html>
<html>
<body>

<audio src="/images/audio.mp3" muted controls></audio>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Useful when autoplaying audio in a muted state.

6. 'preload'

Hints the browser on how to load the audio file: 'auto', 'metadata', or 'none'.

Code : 6 📝

<!DOCTYPE html>
<html>
<body>

<audio src="/images/audio.mp3" preload="metadata" controls></audio>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Loads only metadata (e.g., duration) before playing.

CSS Inline Styling for Audio Tag

Here's an example of adding some inline styles to the '<audio>' tag:

Code : 7 📝

<!DOCTYPE html>
<html>
<body>

<audio src="/images/audio.mp3" controls
style="width: 300px; padding: 5px; background-color: #f4f4f4; border: 1px solid #ccc; border-radius: 8px;">
</audio>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • 'width: 300px;' defines the width of the audio player.
  • 'padding' and 'background-color' give space and color.
  • 'border' and 'border-radius' improve design aesthetics.

Conclusion

The HTML '<audio>' tag makes it easy to add sound to your website without needing plugins. By using attributes like 'controls', 'autoplay', and 'loop', you can enhance the user experience. Inline CSS can further style the audio player to match your site's design.

Whether you're creating an online podcast, adding sound effects, or embedding music, the '<audio>' tag is a powerful and flexible tool for web development.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

Can I use multiple audio formats in the '<audio>' tag?

Yes, you can add multiple '<source>' elements to support different browsers.

What happens if the browser doesn't support the audio tag?

Fallback text will appear, which you can define between opening and closing '<audio>' tags.

Is autoplay supported on all devices?

No. Modern browsers often block autoplay unless the audio is muted.

Is the '<audio>' tag responsive by default?

Not fully. You need to use CSS for better responsiveness and styling.

Previous Post Next Post