The Complete WebDeveloper (38 Blogs) Become a Certified Professional

How To Best Utilize Audio Tag In HTML?

Published on Aug 27,2019 6 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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,

So let us get started then,

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.

Attributes: These are the additional information about the tags and are specified within the tag.

Example:

<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.

Example:

<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.
</audio>

GitHub Gist Link: <script src=”https://gist.github.com/snehseel/6605e463ff17e3886a52a2e9d1f26125.js”> </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.

Note: Audio tag also supports the global attributes in HTML such as accesskey, class, dir, dropzone, hidden, id, lang, style.

This brings us to the end of this article on Audio Tag In HTML.

Now that you know what is HTML, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of  this article and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.