Audio in HTML

Audio in HTML with Examples

In this article, I am going to discuss Audio in HTML with Examples. Please read our previous article where we discussed Videos in HTML with Examples. At the end of this article, you will understand everything about HTML Audio with Examples.

HTML Audio

Audio files are used to store audio data on a variety of devices, including computers, MP3 players, and cell phones. You must convert audio data into a digital format before storing it.

Encoding the raw audio data is the process of transforming audio data into a digital file. It includes extracting audio data samples and storing them in a compressed way to reduce file size.

Syntax: The basic syntax of the <audio> element

<audio> … </audio>

Embedding Audio in HTML Document

Previously, embedding audio into a web page was difficult due to the lack of a universal standard for specifying embedded media assets like audio in web browsers. Below we’ll show you how to integrate audio in your website using the latest HTML5 <audio> element.

Using the HTML5 audio Element

The HTML5 <audio> element, which was recently introduced, provides a standard way to embed audio in web pages. The audio element, on the other hand, is very new, but still, it works in most modern web browsers. The example below simply adds audio into an HTML5 document using the browser’s default controls and a single source defined by the src attribute.

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Output:

Using the HTML5 audio Element

HTML <audio> Autoplay

We can add autoplay inside the audio element to let our audio file start playing automatically

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Output:

HTML <audio> Autoplay

Audio controls, such as play, pause, and volume, are added by the controls attribute. we can specify alternative audio files for the browser to choose from using the <source> element. The first recognized format will be used by the browser. Only browsers that do not support the <audio> element will display the text between the <audio> and </audio> tags.

Tag-Specific Attributes

The following table shows the attributes that are specific to the <audio> tag.

Audios in HTML with Examples

HTML Audio – Media Types

HTML Audio - Media Types

Browser Compatibility

The <audio> tag is supported in all major modern browsers.

Audios in HTML with Examples

In the next article, I am going to discuss Plugins in HTML with examples. Here, in this article, I try to explain Audio in HTML with Examples and I hope you enjoy this Audio in HTML with Examples article.

Leave a Reply

Your email address will not be published.