HTML Tutorial

HTML Audio

The audio element plays sound. Offer more than one format so every browser can play it.

Sound without a picture

<audio> is the video element’s quieter sibling. It plays a sound file in the page: a podcast clip, a pronunciation sample, a short alert. There is no poster frame and no fullscreen button — only a compact player.

Like video, the browser does the playback. You supply the file and the markup. No plugin.

controls

Add controls so play, pause, and volume are visible. Without it, the element takes no useful space and the visitor has nothing to click unless you write your own buttons.

Example

<audio controls>
  <source src="lesson.mp3" type="audio/mpeg">
  Your browser cannot play this audio.
</audio>

lesson.mp3 is a placeholder. The StudyGrid preview at /html/trywill show the player; it will not fetch a file that is not on the page. That editor is the HTML live preview.

MP3 and Ogg sources

MP3 (audio/mpeg) works in every current browser. Ogg Vorbis (audio/ogg) is a useful second format. Nest both <source>tags inside one <audio> so the player stays a single control.

Example

<audio controls>
  <source src="lesson.mp3" type="audio/mpeg">
  <source src="lesson.ogg" type="audio/ogg">
  Download the <a href="lesson.mp3">MP3</a>.
</audio>

The browser tries the first source it can decode. If both fail, the fallback text (and the download link) appear. Put files you actually host next to the HTML when you go live.

Autoplay is usually blocked

You can write autoplay on an audio tag. Visitors will rarely hear it start by itself. Browsers treat unexpected sound as hostile: autoplay with volume is blocked until the user interacts with the page.

Example

<!-- Do not expect this to start on load -->
<audio controls autoplay>
  <source src="lesson.mp3" type="audio/mpeg">
</audio>

Do not rely on autoplay for lessons, ads, or background music. Show controls and let people press play. Muted autoplay exists for video; it is a poor fit for audio, which has nothing left if you mute it.

Where audio sits on a page

Place the player near the text it belongs to: after a heading for that clip, or inside the article that mentions it. A lone player at the top of the page with no label is easy to miss and hard to explain to a screen reader.

You can add a visible caption in HTML — a heading or a paragraph — because<audio> has no built-in title strip like a video poster.

Example

<figure>
  <figcaption>Pronunciation: “queue”</figcaption>
  <audio controls>
    <source src="queue.mp3" type="audio/mpeg">
    <source src="queue.ogg" type="audio/ogg">
  </audio>
</figure>

Audio versus video versus YouTube

File you have	Element
MP3 / Ogg on your site	`audio`
MP4 / WebM on your site	`video`
A video hosted on YouTube	iframe embed

Next: embedding a YouTube player with an iframe, and a CSS wrapper so the embed stays 16:9 on a narrow screen.

Worked examples

The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.

HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.

Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.

Biology

A pulse recording

audio has no picture, so the surrounding text is the only context. Label what the clip is. A roar demo is not a heartbeat — say so.

Example

<p>Demo audio (not a clinical recording)</p>
<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
</audio>

Engineering

Two formats, one player

The browser uses the first source it understands. Order MP4/MP3 then a fallback. The element still needs controls or your own UI.

Example

<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
  <p>Download the clip if the player is missing.</p>
</audio>

FAQ: HTML Audio

Common questions about this page.

What is the StudyGrid HTML tutorial?

The StudyGrid HTML tutorial is a full beginner track: tags, headings, links, images, tables, layout, forms, and media. Each chapter has copy-and-run examples.

Should I run html audio examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn html audio in this HTML HTML lesson (HTML Audio).

Is the HTML editor the same as Try Python?

No. Try HTML is a live page preview at /html/try. Try Python stays at /try and runs Python. HTML lessons never open the Python editor.

Do I need to install anything to learn HTML?

No. Open a chapter, click Try it in HTML, and the page preview updates in the browser. You can also download a .html file and open it locally.

Where should I start the HTML tutorial?

Start at HTML Intro, then Basic, Elements, and Attributes. After the first document, continue to headings, links, and forms. Use Next at the bottom of each chapter.

Is the HTML tutorial free?

Yes. The HTML studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.