Add audio, video, and useful alternatives

One idea at a time

HTML has audio and video elements for playable media. They point to files just as an image does. A controls attribute asks the browser to provide its own play, pause, and other available controls. The controls may look different across browsers, so teach their purpose rather than expecting one exact appearance.

A source element supplies a file and can identify its media type, a format label such as audio/mpeg for MP3 audio. Multiple sources can offer different formats. The browser needs a file it can actually decode: changing the filename extension does not convert a recording. Begin with one short file that you own or have permission to use.

Media should not be the only way to get essential information. A transcript supplies the spoken content as readable text. Captions synchronize speech and relevant sounds with a video. A track element can connect a WebVTT caption file to video; a caption file is a separate text resource with timed text entries, not a paragraph beside the player. Creating one is an optional later task; the required exercise here uses audio and a plain transcript.

Read the tags as containers and file references: <audio> plays sound and <video> plays moving pictures, each with a closing tag. Put source and track inside the player; both are void elements with no closing tag. source uses src for the file path and type for its media format. track uses kind="captions", src for the caption file, srclang for its language, and label for the name shown in the controls. default requests that track initially, subject to the user's preferences.

controls is a boolean attribute: remove it to turn the feature off; controls="false" still enables it. Its presence requests the browser's playback controls. An audio element may use src directly, as in the interactive tone example, instead of a child source. The a, h2, and p elements below are the familiar link, heading, and paragraph: they provide a download link and readable transcript.

Match each media tag to its job

Walk through an example

<audio controls>
  <source src="welcome.mp3" type="audio/mpeg">
  <a href="welcome.mp3">Download the welcome recording</a>
</audio>
<h2>Transcript</h2>
<p>Welcome to my garden notebook.</p>

<video controls width="320">
  <source src="planting.mp4" type="video/mp4">
  <track kind="captions" src="planting-en.vtt" srclang="en" label="English" default>
  <a href="planting.mp4">Download the planting video</a>
</video>

The audio example has browser controls and a transcript outside the player. The video has a source and a captions track. These filenames are examples you must supply for a local project. The interactive example instead includes an actual short generated tone so you can test a working player immediately; it contains no speech.

See it happen: try a small change

<audio controls src="tone.wav">
</audio>
<p>Audio description: a short, steady tone with no speech.</p>

Make playback a deliberate choice

Avoid starting audio automatically. A user should choose when sound begins, and browsers may block autoplay anyway. A video poster can supply a picture before playback. Width and height describe dimensions, while later styling can make media fit narrow screens. Test that a phone-sized view can still reach the controls.

An iframe embeds another document, such as an approved video player. Give it a descriptive title explaining the embedded content. External providers can add tracking, require network access, or refuse embedding. Do not assume that every ordinary webpage URL can be embedded. This lesson uses a local media demonstration rather than an external provider.

The text inside audio or video is fallback for browsers that do not support the element; it is not a guaranteed error message for every missing file. Keep useful alternatives outside the player too. Captions and a transcript should accurately represent the recording, not merely repeat its filename.

Try it in your browser

If you have an audio file, place it beside your HTML page and use its real filename and format in source. Put the matching transcript outside audio. Save, refresh, and test playback. If you have no file, use the supplied tone example instead; no recording or caption file is required to continue the course.

A common wrong turn

A player can appear even when the media file is missing. Seeing controls does not prove playback works. Check the path, file format, and actual playback, then check captions or the transcript separately.

Change one thing

Play and pause the supplied tone. Compare the version with controls to the version without them. Notice that an audio element with no controls does not give the visitor a visible way to start playback.

Go to the source

• MDN: Add audio, video, and useful alternatives ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.