HTML <audio> Tag

Here, we’ll talk about Tag Audio. With the intention that it would meet the educational requirements.

The HTML audio tag is an HTML element used to embed audio content, such as music or sound effects, into a web page. The audio tag is represented by the <audio> tag and can be used to specify various attributes such as the source of the audio file, the type of the audio file, and whether the audio should autoplay or loop.

The sound file will play:

Example

<!DOCTYPE html> <html> <body> <audio controls> <source src="https://mrexamples.com/wp-content/uploads/2023/03/Beauty.mp3" type="audio/ogg"> <source src="https://mrexamples.com/wp-content/uploads/2023/03/Beauty.mp3" type="audio/mpeg"> Your browser does not recognize audio tags. </source></source></audio> </body> </html>

Here is the basic example of the audio tag:

Example: 

<!DOCTYPE html> <html> <body> <audio controls> <source src="https://mrexamples.com/wp-content/uploads/2023/03/Beauty.mp3" type="audio/ogg"> <source src="https://mrexamples.com/wp-content/uploads/2023/03/Beauty.mp3" type="audio/mpeg"> Your browser is not compatible with the audio element. </source></source></audio> </body> </html>


Benefits of using HTML <audio> Tag

Here are some benefits of using the <audio> tag:

  • The <audio> tag provides a seamless audio experience for website visitors. Visitors can listen to audio content directly on the page, without the need to navigate to an external audio player.
  • The <audio> tag can improve accessibility for people who are visually impaired or have difficulty reading. Audio content can provide an alternative way to consume content on the page.
  • The <audio> tag can make content more engaging by providing an additional way to present information to website visitors.
  • By embedding audio content on a page, website owners can increase traffic and engagement on their website. Visitors are more likely to spend time on a page with audio content than on a page without it.
  • The <audio> tag can improve search engine optimization (SEO) by providing search engines with more information about the content of the page. Search engines can index audio content, which can help to improve the visibility and ranking of the page in search results.
  • The <audio> tag is supported by most modern web browsers, making it compatible across different platforms and devices.

Uses and Definition

By utilizing Tag Audio <audio>, you can embed music or other audio files in a document.

It may contain multiple <source> tags with different audio sources. As soon as the browser detects a compatible source, it will select it.

Only browsers unable to recognize the audio element will display the text between the <audio> and </audio> tags.

As of now, HTML supports three types of audio formats: MP3, WAV, and OGG.

Audio Format and Browser Compatibility

Browser MP3 WAV OGG
Edge / IE YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

Tips and Notes

Advice: Check out the Audio Tag <audio> if you need help with your video files.

Browser Compatibility

If you look at the table’s numbers, you’ll see which browser version initially offers complete support for the element.

Element
<audio> 4.0 9.0 3.5 4.0 11.5

Attributes

Attribute Value Overview
controls controls

Provides details on how audio controls should appear. (for example, the play/pause button)

autoplay autoplay

Declares that the audio will begin playing once it has been processed.

preload auto
metadata
none

Whenever a page starts loading, the author determines if and how should render the audio.

src URL

Provide the audio file’s URL

loop loop

A method that starts the audio from scratch after each end of the recording.

muted muted

Creates the muted output for audio.

Global Attributes

<audio> could utilize HTML’s Global Attributes with the Tag Audio.


Event Attributes

<audio> could utilize HTML’s Event Attributes with the Tag Audio.


For better understanding, have a look at HTML DOM reference: HTML Audio/Video DOM Reference


CSS settings by default

There is no room for CSS styling in the audio Tag .

Share your reaction below to appreciate our efforts or to suggest some improvement for the betterment of this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

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