- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <audio> Tag
HTML <audio> tag is used to embed audio files on a website. It enables the direct playback of audio files within a web browser without the requirement for extra plugins. The audio file should be encoded using certain codes because all web browsers do not support all audio formats.
Syntax
<audio> <source src=" " type=" "> </audio>
Attribute
HTML audio tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
autoplay | autoplay | This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. |
muted | muted | Specifies that the audio should be muted. |
controls | controls | If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback. |
loop | loop | This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. |
preload | auto metadata none |
This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. |
src | URL | The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. |
Examples of HTML audio Tag
Bellow examples will illustrate the usage of audio tag. Where, when and how to use it to render audio player and how we can manupulate audio player using CSS.
Embedding Audio Element
Following is an example where we are going to use the <audio> tag to add a music file to the webpage.
<!DOCTYPE html> <html> <body style="background-color:#D5F5E3"> <audio controls> <source src= "https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg"> </audio> </body> </html>
Autoplay Audio after Page load
Consider another scenario where we are going to add the autoplay attribute to the <audio> tag.
<!DOCTYPE html> <html> <body style="background-color:#E8DAEF"> <audio controls autoplay> <source src= "https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg"> </audio> </body> </html>
Muted Audio element with Autoplay
Let’s look at another example where we are going to use the muted attribute to the <audio> tag along with the autoplay.
<!DOCTYPE html> <html> <body style="background-color:#CCCCFF"> <audio controls autoplay muted> <source src= "https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg"> </audio> </body> </html>
Audio playing on a loop
In the following example, we are going to use the <audio> tag along with the loop attribute.
<!DOCTYPE html> <html> <body style="background-color:#FCF3CF "> <audio controls autoplay loop> <source src= "https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg"> </audio> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
audio | Yes 4.0 | Yes 9.0 | Yes 3.5 | Yes 3.1 | Yes 11.5 |
To Continue Learning Please Login
Login with Google