COURSE SYLLABUS

1. Introduction to HTML

Introduction to HTML HTML Document Structure How HTML Works HTML vs CSS vs JavaScript

2. Basic HTML

Basic HTML HTML Elements HTML Attributes Headings Paragraphs Comments Line Breaks Horizontal Rules

3. HTML Tags

4. Text Formatting

Text Formatting Text Formatting Elements Bold & Strong Italic & Emphasis Underline & Highlight Subscript & Superscript Quotations Abbreviations Special Characters

5. Links & Media

Links & Media Hyperlinks Link Attributes Images Image Attributes Audio Video Iframes

6. Lists & Tables

Lists & Tables Unordered Lists Ordered Lists Description Lists Nested Lists Tables Table Headers Colspan & Rowspan

7. HTML Forms

Forms Form Basics Form Attributes Input Types Labels Text Area Select & Option Radio Buttons Check Boxes Buttons Form Validation

8. Semantic HTML

Semantic HTML Semantic Elements Header Nav Main Section Article Aside Footer HTML Page Layout

9. HTML5 Features

HTML5 Features HTML5 Introduction New Input Types Audio & Video Canvas SVG Progress & Meter Details & Summary Data Attributes

10. Advanced HTML

Advanced HTML Global Attributes Meta Tags Viewport HTML Accessibility ARIA Basics HTML Best Practices SEO-Friendly HTML

HTML Audio

HTML provides the <audio> element to embed audio content such as music, podcasts, voice recordings, and sound effects directly into a webpage.

1. Introduction to HTML Audio

The <audio> element is used to add audio content to an HTML page without requiring an external audio player.

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

The controls attribute displays built-in audio controls such as play, pause, volume, and progress.

2. Basic Audio Syntax

A simple audio element can be written as:

<audio controls src="audio/song.mp3">
    Your browser does not support the audio element.
</audio>

Basic Structure:

<audio> creates the audio player.
controls displays playback controls.
src specifies the audio file.

3. The controls Attribute

The controls attribute tells the browser to display the built-in audio controls.

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

Important: Without the controls attribute, users may not have a visible way to play or pause the audio.

4. The src Attribute

The src attribute specifies the location of the audio file.

<audio controls src="music.mp3">
    Your browser does not support the audio element.
</audio>

An audio file can also be loaded from a folder:

<audio controls src="audio/music.mp3">
    Your browser does not support the audio element.
</audio>

5. The source Element

The <source> element allows you to specify one or more audio files in different formats.

<audio controls>

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

    Your browser does not support the audio element.

</audio>

The browser can choose a supported source from the available options.

6. Common Audio Formats

Format	MIME Type	Common Use
MP3	`audio/mpeg`	Music, podcasts, general web audio
Ogg	`audio/ogg`	Open multimedia content
WAV	`audio/wav`	High-quality or uncompressed audio

7. Using Multiple Audio Sources

Multiple <source> elements can be used so that the browser can select a supported format.

<audio controls>

    <source src="audio/song.mp3" type="audio/mpeg">
    <source src="audio/song.ogg" type="audio/ogg">
    <source src="audio/song.wav" type="audio/wav">

    Your browser does not support the audio element.

</audio>

8. autoplay Attribute

The autoplay attribute tells the browser to start playback automatically when possible.

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

Note: Modern browsers may restrict autoplay, especially when audio would begin with sound without user interaction.

9. loop Attribute

The loop attribute causes the audio to start again after it finishes.

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

Looping can be useful for background sounds, demonstrations, or repeated audio clips.

10. muted Attribute

The muted attribute starts the audio in a muted state.

<audio controls muted>
    <source src="audio/video-audio.mp3" type="audio/mpeg">
</audio>

11. preload Attribute

The preload attribute provides a hint about how much audio data the browser should load before the user starts playback.

Value	Description
`none`	The browser should not preload the audio.
`metadata`	Only metadata such as duration may be loaded.
`auto`	The browser may load the audio data automatically.

Example

<audio controls preload="metadata">
    <source src="audio/podcast.mp3" type="audio/mpeg">
</audio>

12. Complete Audio Example

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

    <h1>My Audio Player</h1>

    <audio controls>

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

        Your browser does not support the audio element.

    </audio>

</body>
</html>

13. Audio with Multiple Attributes

Multiple attributes can be combined in one audio element.

<audio controls loop preload="metadata">

    <source src="audio/song.mp3" type="audio/mpeg">
    <source src="audio/song.ogg" type="audio/ogg">

    Your browser does not support the audio element.

</audio>

14. Audio File Folder Structure

Keeping audio files inside a separate folder makes a project easier to organize.

MyWebsite/
│
├── index.html
│
├── audio/
│   ├── music.mp3
│   ├── podcast.mp3
│   └── sound.ogg
│
└── images/
    └── logo.png

Example:

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

15. Audio Fallback Text

Text placed inside the <audio> element can provide fallback information when the browser does not support the element.

<audio controls>

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

    Your browser does not support HTML audio.
    Please use a modern browser to play this audio.

</audio>

16. Linking to an Audio File

An audio file can also be provided as a normal hyperlink.

<a href="audio/podcast.mp3">
    Listen to the Podcast
</a>

This allows the user to open or download the audio according to the browser and link behavior.

17. Download Audio File

The download attribute can be used on a link to request downloading the audio file.

<a href="audio/music.mp3" download>
    Download Music
</a>

18. Audio Accessibility

Audio content should be presented in a way that is usable by different users.

Provide visible playback controls.
Provide text information about the audio.
Provide transcripts for important spoken content when appropriate.
Avoid unexpected audio playback.
Use clear labels and descriptions.

19. Audio and Captions

The HTML <audio> element does not provide a direct caption track in the same way that the <video> element can use <track>. For important spoken information, a transcript can be provided separately on the page.

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

<h2>Transcript</h2>

<p>
    Welcome to the HTML audio lesson.
    In this lesson we will learn how to embed audio.
</p>

20. Audio Attributes Summary

Attribute	Purpose	Example
`controls`	Displays audio controls.	`controls`
`autoplay`	Requests automatic playback.	`autoplay`
`loop`	Repeats the audio.	`loop`
`muted`	Starts the audio muted.	`muted`
`preload`	Provides a loading hint.	`preload="metadata"`
`src`	Specifies the audio source.	`src="music.mp3"`

21. Common Mistakes

Using an incorrect audio file path.
Forgetting the controls attribute.
Providing only one format when multiple supported formats are useful.
Using autoplay without considering user experience.
Forgetting fallback text.
Using very large audio files unnecessarily.

22. Practice Task

Create an HTML page containing:

An audio player with controls.
An MP3 audio source.
A second audio source using another format.
An audio player with looping enabled.
An audio player using preload="metadata".
A download link for an audio file.
A transcript below the audio player.

23. Complete Practice Example

<!DOCTYPE html>
<html>

<head>
    <title>Podcast Page</title>
</head>

<body>

    <h1>HTML Podcast</h1>

    <p>
        Listen to our HTML programming lesson:
    </p>

    <audio controls preload="metadata">

        <source src="audio/html-podcast.mp3"
                type="audio/mpeg">

        <source src="audio/html-podcast.ogg"
                type="audio/ogg">

        Your browser does not support HTML audio.

    </audio>

    <br><br>

    <a href="audio/html-podcast.mp3" download>
        Download Podcast
    </a>

    <h2>Transcript</h2>

    <p>
        Welcome to our HTML programming lesson.
        Today we are learning about HTML audio.
    </p>

</body>

</html>

Summary

HTML audio is added using the <audio> element. The controls attribute provides playback controls, while <source> allows multiple audio formats. Other useful attributes include autoplay, loop, muted, and preload. Providing fallback text, accessible information, and a suitable audio format helps create a better user experience.

← Previous: Image Attributes Next: Video →