HTML Audio and Video

By /

Websites can contain more than just text and images. You can also add audio and videos to a webpage. HTML gives us simple tags for this:

  • <audio> for sound
  • <video> for videos

Let’s see how they work in this HTML Audio and Video tutorial.

Adding Audio to a Webpage

The <audio> element is used to add an audio file. Here is a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Audio</title>
</head>
<body>

    <h1>My Audio</h1>

    <audio controls>
        <source src="music.mp3" type="audio/mpeg">
    </audio>

</body>
</html>

Output

My Audio

[▶ ━━━━━━━━━ 🔊]

The browser shows audio controls such as play, pause, volume, and progress. Make sure music.mp3 is in the same folder as your HTML file.

Understanding the Code

<audio controls>

<audio> adds an audio player and controls tells the browser to show the audio controls.

Then:

<source src="music.mp3" type="audio/mpeg">
  • src tells the browser where the audio file is.
  • type tells the browser what kind of audio file it is.

Adding Video to a Webpage

The <video> element is used to add a video.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Video</title>
</head>
<body>

    <h1>My Video</h1>

    <video width="500" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

</body>
</html>

Output

My Video

[▶ ━━━━━━━━━━━━━ 🔊 ⛶]

The video player appears on the webpage. Again, video.mp4 should be available at the location given in src.

Adding width and height

You can set the size of a video using width and height.

<!DOCTYPE html>
<html>
<head>
    <title>Video Size</title>
</head>
<body>

    <h1>My Video</h1>

    <video width="400" height="250" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

</body>
</html>

Output

My Video

[Video player displayed at about 400 × 250 pixels]

Autoplay, Loop and Muted

HTML also provides a few useful attributes for media.

autoplay

Starts the media automatically.

<audio controls autoplay>

loop

Starts the media again when it finishes.

<video controls loop>

muted

Starts the media without sound.

<video controls autoplay muted>

These attributes can also be used together.

<!DOCTYPE html>
<html>
<head>
    <title>Video Attributes</title>
</head>
<body>

    <h1>My Video</h1>

    <video width="400" controls autoplay muted loop>
        <source src="video.mp4" type="video/mp4">
    </video>

</body>
</html>

Output

My Video

[Video player]

The video is set to:

  • start automatically
  • play without sound
  • repeat after finishing

Keep in mind that browsers may restrict autoplay, especially when sound is enabled.

Audio and Video Files

Your files can be kept in the same folder as the HTML file:

my-website/
│
├── index.html
├── music.mp3
└── video.mp4

Then you can use:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

and:

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

If your files are inside another folder, the path in src needs to match that location.

Quick Recap

  • <audio> adds audio to a webpage.
  • <video> adds video to a webpage.
  • controls gives the user playback controls.
  • src tells HTML where the media file is located.
  • autoplay, loop, and muted control how media behaves.
  • The media file must be available at the path used in src.

Mini Quiz

0%

HTML - QUIZ 15

1 / 5

Q1. What is used to add sound to a webpage?

2 / 5

Q2. What does the controls attribute do?

3 / 5

Q3. What does the src attribute specify for a media file?

4 / 5

Q4. Which attribute makes media repeat after it finishes?

5 / 5

Q5. What does the muted attribute do?

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

Mini Project

Mini Project: Travel Destination Page

Question:

Create a simple webpage about a travel destination. The page should introduce the destination and include an audio clip and a video so visitors can experience a little of the place before visiting.

Requirements

  • Add a main heading for the travel destination.
  • Add a short paragraph describing the destination.
  • Add an audio player with controls.
  • Add a video player with controls.
  • Set the video width to 400 pixels and height to 250 pixels.
  • Make the video play automatically, without sound, and repeat continuously.
  • Use separate audio and video files stored in the same folder as the HTML file.
  • Add suitable headings to clearly identify the audio and video.
View Answer Code
<!DOCTYPE html>
<html>
<head>
    <title>Explore Manali</title>
</head>
<body>

    <h1>Explore Manali</h1>

    <p>
        Manali is a beautiful mountain destination known for its
        snowy landscapes, peaceful surroundings and adventurous activities.
    </p>

    <h2>Listen to the Mountains</h2>

    <audio controls>
        <source src="mountain-sounds.mp3" type="audio/mpeg">
    </audio>

    <h2>Watch Manali</h2>

    <video width="400" height="250" controls autoplay muted loop>
        <source src="manali-video.mp4" type="video/mp4">
    </video>

</body>
</html>

Frequently Asked Questions (FAQs)

Q1. What is the HTML audio tag?

The HTML <audio> tag is used to add an audio file or sound player to a webpage.

Q2. What is the HTML video tag?

The HTML <video> tag is used to add a video file to a webpage.

Q3. How do you add audio in HTML?

You can use the <audio> element with the controls attribute and a <source> element containing the audio file.

Q4. How do you add video in HTML?

You can use the <video> element with controls and provide the video file using the <source> element.

Q5. What does the controls attribute do in HTML audio and video?

The controls attribute displays playback controls such as play, pause, volume, and the progress bar.

Q6. Where should audio and video files be stored for HTML?

They can be stored in the same folder as your HTML file or in another folder, as long as the path in the src attribute correctly points to the media file.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top