Exercise: A Podcast Episode Page

Build the page for a bike-repair podcast's episode, with an audio player, a transcript, a captioned video and a map, and let the tests check each part.

Journeyman · HTML · Updated

Sam and Priya host The Bike Shed, a made-up podcast about fixing your own bike. Episode 12, Fixing a Flat in Ten Minutes, is recorded, and they filmed a short clip of the repair too. They need its page: a player for the episode, the transcript, the video with captions so anyone can follow it, and a map of the workshop where they recorded. The page's text and styles are ready. You'll add the media, and tests tell you when each part works.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into a folder of your own. Or clone it with Git.

The folder holds:

  • index.html: the episode page, with its text in place and four comments that mark what to add. For you to finish.
  • media/captions.vtt: the video's captions, with the first three cues. For you to finish.
  • media/: the episode's audio (bike-shed-ep12.mp3), the repair video (flat-fix.mp4) and its poster picture (flat-fix-poster.jpg). Ready to use.
  • style.css: a ready-made stylesheet, so the page looks good as you build it. You don't need to change it.
  • page.test.js and package.json: the tests. You don't need to change these.

Open the folder in VS Code, right-click index.html and choose Open with Live Server. Use Live Server, not a double-click: the captions file won't load in a page opened straight from a file.

What to do

Each comment in index.html says what goes in its section. For example, the one in the Listen section:

<!--
    1. The audio player.
       An <audio> element with controls that plays media/bike-shed-ep12.mp3 (its type is audio/mpeg).
       Inside it, a fallback: a link that downloads media/bike-shed-ep12.mp3.
-->
  1. The audio player: the episode, with the browser's controls and a fallback download link.
  2. The transcript: the three paragraphs already on the page, in a section that stays closed until someone opens it.
  3. The video: the repair clip with controls, its poster, a width and height, a captions track in English that's on from the start, and a fallback link.
  4. The captions: media/captions.vtt has the first three cues. The README gives the words and times of the last three; add them.
  5. The map: the workshop's map in a titled iframe that loads only when someone scrolls near it, and a plain link to the full-size map under it. The README gives both addresses.

Check your work

Open a terminal in VS Code (Terminal > New Terminal). The first time, install the test tools:

npm install

Then run the tests whenever you like:

npm test

At first, seven of the nine tests fail. That's expected: each part you finish turns its test green. A failing test's message says what it looked for, for example Give the <track> a label, such as label="English", for the captions menu. The last test runs the page through an HTML validator and lists any line it finds a problem on.

Then try the page by hand in the browser. The README has a checklist: play the audio with the keyboard alone, open and close the transcript, watch all six captions appear, and scroll down to the map.

Hints

  • Boolean attributes stand alone. controls, default and the others are on when they're there. You met them in Video and Audio.
  • Order inside the video matters. <source> first, then <track>, then the fallback.
  • A cue is three parts. A number, a timing line with --> between the times, and the words, then a blank line. Look at the first three cues, and at Captions and Subtitles.
  • A period, not a comma. WebVTT writes 00:00:11.000. A comma there makes the browser skip the cue without a word.
  • Say what the map shows. The iframe's title is what a screen reader announces; Embedding Maps and Videos with iframe has an example.

When you're done

Every test is green:

✔ the page says its language and has a title
✔ the audio player has controls and plays the episode
✔ the audio has a fallback link that downloads the episode
✔ the transcript opens and closes
✔ the video has controls, a poster, a width and a height
✔ the video has a captions track with a language and a label
✔ the captions file is WebVTT with six cues
✔ the map is a titled iframe that loads lazily
✔ the page passes the HTML validator
ℹ tests 9
ℹ pass 9
ℹ fail 0

Now turn off your sound and watch the repair video with only the captions. Could you fix a flat from them? If a step is missing, a deaf viewer would miss it too.

So what

A podcast or a video reaches more people when it has a transcript, captions and a page that loads fast. The same few elements put any recording online: a band's demo, a lecture, a product video for a shop.

Key terms

Related