Back to: HTML Tutorials
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:
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:
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.
HTML Audio – Media Types
Browser Compatibility
The <audio> tag is supported in all major modern browsers.
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.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.