 |
| HTML and CSS tutorial for beginners |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 15.
In our previous lesson, we saw how to display a video in a web page.
Today we will study inserting an audio clip in a web page.
HTML audio
Let us open a new Notepad file. In this file copy all text from Lesson-14.HTML5 provides <audio> tag to insert an audio in a web page.
Audio tag has an attribute "controls". This attribute adds controls like play, pause, and volume control.
HTML source element
Audio element contains another element <source> where we can give the name of audio file. "src" attribute of source element specifies name of audio file. There is another attribute for <source> namely "type". Carefully see how <source> element is written.It should be
<source src="name of audio" type="audio/mpeg">
Therefore our code will like this:
<hr>
<audio controls>
<source src="mus.mp3" type="audio/mpeg">
Audio is not supported by your browser.
</audio>
Let us begin. Open a new Notepad file. Open Lesson-14. Copy statements from first line to <body>. Insert above code. Give </body> and </html>.
 |
| Figure 15-1. HTML audio tag |
HTML horizontal line
Friends, we have used a new tag here <hr>. This is used to draw a horizontal line in a web page.Now save this file as "Lesson-15". Again save this file as "Lesson-15.html". Double click on HTML Document. Our audio is inserted in the web page.
 |
| Figure 15-2 Audio file in web page |
Click on the above figure for PDF file of source code. Note that we can give second <source> element where we can mention name of another audio file. Browser will display this second audio if first cannot be shown.
Text written in <audio> and </audio> ("Audio is not supported by your browser") is not displayed. This is displayed if browser does not support <audio>.
Important Points:
1. HTML5 provides <audio> tag to insert an audio in a web page.2. <audio> tag has a "controls" attribute, which displays controls like play, pause, volume.
3. <source> element is used to specify the name of audio file.
4. <source> element has "src" attribute where we can mention the name of audio file. This element has another attribute "type" where we can mention the type of audio file.
Lesson-14 Lesson-16
