Learn HTML – Part 28 – audio Tag – Embedding Audio

Learn HTML – Part 28 – audio Tag – Embedding Audio

The HTML audio tag is used to embed audio content such as music, podcasts, or sound effects in a webpage.

This element was introduced in HTML5 and allows browsers to play audio files without requiring external plugins.


What is the audio Tag?

The audio tag defines sound content that can be played directly in the browser.

It supports common audio formats such as MP3, WAV, and OGG.


Basic Syntax

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

The controls attribute displays the built-in audio controls such as play, pause, and volume.


Example – Embedding an Audio File

<audio controls>
   <source src="music.mp3" type="audio/mpeg">
</audio>

Output:


Common audio Tag Attributes

AttributeDescription
controlsDisplays audio playback controls
autoplayAutomatically starts playing the audio
loopRepeats the audio continuously
mutedStarts the audio in muted mode

Supporting Multiple Audio Formats

Different browsers support different audio formats. It is recommended to provide multiple sources.

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   <source src="audio.ogg" type="audio/ogg">
</audio>

Why Use the audio Tag?

  • Allows embedding audio directly in webpages
  • Works without external plugins
  • Provides built-in playback controls
  • Supports multiple audio formats

The audio tag makes it easy to add sound or music to websites using modern HTML5 features.


Common Mistakes Beginners Make

  • Forgetting to add the controls attribute
  • Using unsupported audio formats
  • Using autoplay excessively which can annoy users

Conclusion

The HTML audio tag allows developers to embed audio files directly into web pages.

With built-in playback controls and support for multiple formats, it provides a simple way to add sound content to websites.

What’s Next?

Now that you understand the audio tag, the next step is learning about the video tag, which is used to embed videos in HTML webpages.

Next: Learn HTML – Part 29 – video Tag – Embedding Video →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
Scroll to Top