HTML Audio Tag: Step By Step Guide For Beginners How To Use It

  • Post category:HTML
  • Post author:
  • Post last modified:May 24, 2022
  • Reading time:5 mins read
You are currently viewing HTML Audio Tag: Step By Step Guide For Beginners How To Use It

When you are building a beautiful website, you often need to embed sound content on your website here HTML Audio tag comes into use. HTML Audio tag allows developers to embed sound content in an easy way without any flash player. Before HTML 5 developers need a flash player to embed sound content in a website.

HTML Audio tag enables a media player which supports audio playback with all controls. In this post, we will briefly describe how to add an audio tag in HTML, And how to use this Audio tag. The audio tag supports various HTML audio files.

HTML Audio – Syntax

The HTML audio tag starts with the opening <audio> tag and closed with the closing </audio> tag. And the source file of the audio tag is defined with the src attribute or under the <source> element.

<audio controls>
 <source src="file_path">
</audio>

HTML Audio – Example

Here is an example of an HTML Audio tag. How you can embed sound content on your website in an easy way.

Example

<audio src="file_path" controls>
Your browser does not support this Audio. Please update your browser.
</audio>

<!-- OR YOU CAN USE THE SOURCE ELEMENT TO DEFINE THE SOURCE OF THE AUDIO -->

<audio controls>
<source src="file_path">
Your browser does not support this Audio. Please update your browser.

</audio>

HTML Audio Tag – Attributes

html audio tag
  • Controls – define the controls like play/pause buttons and volume buttons.
  • Src – the src attribute defines the source of the audio file.
  • Autoplay – The autoplay attribute specifies the audio will be automatically played when the document is successfully loaded.
  • Loop – The loop attribute specifies the audio will be repeated infinite times.

HTML Audio Tag – Controls Attribute

The controls attribute adds play, pause, and volume control buttons for the audio player where your sound content will be playing. You can also try without the controls attribute to see what is happing.

<audio controls>
<source src="source_file">
</audio>

HTML Audio – src Attribute

The src attribute specifies the source of the audio file, it can be placed under the audio tag or can be specified under the source tag. Basically, it defines the source file. You can learn more about Filepath in the HTML file path guide tutorial.

<audio controls autoplay>
<source src="source_file">
</audio>

HTML Auduio – Autoplay Attribute

The autoplay attribute plays the audio automatically when the document is successfully loaded.

<audio autoplay>
<source src="source_file">
</audio>

HTML Audio – Loop Attribute

The loop attribute plays the audio in infinite loops.

<audio controls autoplay loop>
<source src="source_file">
</audio>

Chapter Summary

  • HTML audio tag is used to embed sound content in your HTML Document.
  • The HTML audio tag start with <audio> tag and closed with the </audio> tag.
  • The source of the audio file is specified with the src attribute.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply