HTML Audio Last Updated : 26 Dec, 2024 Comments Improve Suggest changes Like Article Like Report The HTML <audio> element is used to add audio content to a webpage, allowing you to play music, sound effects, or other audio files directly in the browser.Syntax<audio> <source src="sample.mp3" type="audio/mpeg"></audio>. HTML <!DOCTYPE html> <html lang="en"> <body> <audio> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3" type="audio/mp3"> <source src="" type="audio/ogg"> </audio> </body> </html> The <audio> supports the global attributes and event attributes.Functionality of HTML AudioThe controls attribute adds play, pause, and volume controls to the audio player.The autoplay attribute makes the audio play automatically when the page loads.The loop attribute makes the audio play continuously, repeating the file.The src attribute defines the URL of the audio file.The muted attribute silences the audio when the page loads.HTML Audio Media TypesThe mp3 file format with media type audio/mpeg.The ogg file format with media type audio/ogg.The wav file format with media type audio/wav.More Examples of HTML AudioBasic Autoplay Audio HTML <html lang="en"> <body> <audio autoplay> <source src="https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3" type="audio/mpeg"> </audio> </body> </html> The <audio> element includes the autoplay attribute, causing the audio to play automatically upon page load.The <source> element specifies the audio file's URL and its MIME type.To learn more about the HTML audio autoplay attribute, click here Link Autoplay Audio with Controls and Styling HTML <!DOCTYPE html> <html lang="en"> <head> <style> audio { display: block; margin: 20px auto; width: 80%; } </style> </head> <body> <audio controls autoplay> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3" type="audio/mpeg"> </audio> </body> </html> The <audio> element includes both controls and autoplay attributes, providing playback controls to the user while starting the audio automatically.The CSS styles center the audio player on the page and set its width to 80% of the container, enhancing its appearance.Best Practices for HTML AudioProvide multiple audio formats to ensure compatibility across different browsers.Include the controls attribute to offer users playback options like play, pause, and volume control. Comment More infoAdvertise with us Next Article HTML Audio S shivanigupta18rk Follow Improve Article Tags : HTML HTML5 Similar Reads HTML Basics HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over 7 min read HTML and CSS This article aims to provide you with a thorough understanding of how to use HTML and CSS to construct websites or web pages. Here, we present a complete overview to kickstart your journey in learning HTML and CSS. What is HTML?HTML, an acronym for HyperText Markup Language, is the standard language 4 min read XHTML Introduction XHTML or EXtensible HyperText Markup Language is a mix of HTML and XML, very similar to HTML but stricter. It's like a rulebook for creating web pages that browsers easily understand. Unlike HTML, you have to be careful and follow the rules exactly. Most browsers support it. Just think of it as a mo 5 min read HTML for Web Design HTML, or Hypertext Markup Language, is the standard language used to create and design web pages. It provides the structure and layout of a webpage by using a system of tags and attributes to define elements such as headings, paragraphs, images, links, and more. By arranging these elements in a hier 4 min read What is HTML DOM ? HTML DOM stands for the Document Object Model is a tree-like structure that offers dynamic interaction and manipulation of the content, structure, and style of an HTML document. It is an interface for web documents. Based on user activity The HTML DOM offers to create interactive web pages where ele 4 min read Like