How To Best Utilize Audio Tag In HTML?

This article brings forth an interesting topic that concerns web development that is Audio Tag In HTML. This article will help you explore this HTML topic with practical demonstration. Following pointers will be touched in this article,

Audio Tag In HTML

HTML is obviously the first thing what comes across the minds after listening the term Www. Basically, it’s the thing behind each and every website you visit today.

HTML alone can’t do the justice with some of the most-loved designs that we see today. It requires help and that is provided by CSS or Cascading Style Sheet. HTML & CSS can be used together to create some attractive web pages.

Tags & Attributes in HTML

These both are the basics of the HTML and they both work together but performs different functions.

Tags: Tags are used to mark up the start of the HTML element and is enclosed by the angular brackets.

Example: <h1>

The above tag is the heading tag in HTML.


<img src=”hello_world.jpg” alt=”My first program”>

The above tag is image tag <img> and alt is the attribute for the tag and provides the description for the image hello_world.jpg

As we have discussed the basics that we needed, so now we can move further with the motive of this article which is some advanced HTML and CSS tags.

Moving on with this Audio Tag In HTML article,

Audio Tag

As the name specifies, this tag is definitely responsible for the sounds on the web page. This can be used to provide music or any other stream to the web page. The currently supported formats that can be used with <audio> tag is MP3, WAV and OGG.

<audio controls>
<source src="welcome_tune.ogg" type="audio/ogg">
<source src="welcome_tune.mp3" type="audio/mpeg" >
Your browser does not support the audio tag.

GitHub Gist Link: <script src=””> </script>

Output - Audio Tag In HTML - Edureka

This is how an audio would appear on the web page.

The line which contains the message that the audio tag is not supported is shown if the browser used by the user does not support the audio tag. The audio tag was introduced in HTML 5. So, the browsers which does not support the HTML 5 would not support the audio tag.

Moving on with this Audio Tag In HTML article,

Audio Tag Attributes

The attributes for the audio tag are:

  • Autoplay: It ensures that the audio would start to play as soon as it is loaded on the webpage.
  • Controls: It specifies that the audio controls such as the play and pause button would be displayed on the webpage.
  • Loop: It specifies that the audio on the webpage would be played on the loop i.e. over and over again.
  • Muted: It ensures that the audio output from the audio tag would be muted i.e. there would be no sound.
  • Preload: It specifies the if and how of the author side, i.e. how the author wants the audio to be loaded when the webpage is loaded.
  • Src: It specifies the source of the file i.e. the address of the audio file which is to be used.

LANERS's covers the latest developments and innovations in technology that can be leveraged to build rewarding careers. You'll find career guides, tech tutorials and industry news to keep yourself updated with the fast-changing world of tech and business.

Leave a Comment