Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to embed audio element in a HTML document ?
HTML has an audio element that can be used to embed audio element in a HTML document. By including an audio track or sound effect on a webpage, the user experience can be improved by including audio elements in HTML documents. Simply include the <audio> element in our HTML code specifies the audio file source using the "src" attribute to embed an audio file. Additional attributes can also be added, such as "controls" to enable audio playback controls, and "autoplay" to initiate playback automatically. We can easily add audio to your HTML webpage using these direct steps to increase audience engagement.
Syntax
<audio> <source src= "" type= "audio/mp3"> </source> </audio>
The HTML element <audio> is used to embed sound content in documents. It can have one or more audio sources, which are denoted by the src attribute or the <source> element.
<audio controls>
The audio element provides an attribute named controls that enable the volume up/down, time duration, menu option, etc.
<audio playback>
The playback attribute in an HTML audio element simply enables the autoplay of any sound of a given link.
Example 1
In the following example, we will use the audio element by embedding the audio file into an HTML document. The audio has an attribute named controls that add playback controls to the audio element. This allows the user to play, pause, and adjust the volume. The headline and paragraph with a message on the role of music in meditation are also included on the page. The webpage background color is orange, and the heading text color is white.
<!DOCTYPE html>
<html>
<title>Embed audio using HTML</title>
<head>
</head>
<body style="background-color: orange;">
<center>
<h1 style="color:white;"> My world Music </h1>
<audio controls>
<source
src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
type="audio/mp3">
</source>
</audio>
</center>
</body>
</html>
Example 2
In the following example, we will use the audio attribute named autoplay which provides an autoplay feature to run the sound. Then it adds the source element that includes the attributes- src(to paste the audio link) and type(to give the type of audio file). For better looks at a webpage, it adds a background image in the body element and get the output on the webpage.
<!DOCTYPE html>
<html>
<title>Embed audio using HTML</title>
<head>
</head>
<body style="background-image: url('https://images.pexels.com/photos/11356284/pexels-photo-11356284.jpeg?auto=compress&cs=tinysrgb&w=450&h=750&dpr=1'); background-repeat: no-repeat; width: 153px; height: 86px;";>
<center>
<h1 style="color: white;">Meditation Music with autoplay feature</h1>
<audio autoplay controls>
<source src="https://audio-previews.elements.envatousercontent.com/files/304799645/preview.mp3?response-content-disposition=attachment%3B+filename%3D%22XYFTLYY-this-is-meditation.mp3%22"
type="audio/mp3">
</source>
</audio>
</center>
</body>
</html>
Conclusion
We understood the source attribute in an audio element that provide different features to the users. The controls attribute adds the volume button, pause, continue, etc whereas the autoplay controls is defined by a boolean attribute that will automatically start playing the video. For example- this type of code is generally used in podcasts, music, or any organization.
2K+ Views
