To wrap up this block: <audio> works almost identically to <video>, just for pure sound without any picture - for example music, a podcast, or in Finn's case, maybe a recording of his team's goal celebration.

The <audio> element

<audio controls>
  <source src="sounds/goal-cheer.mp3" type="audio/mpeg">
  <source src="sounds/goal-cheer.ogg" type="audio/ogg">
  Sorry, your browser doesn't support audio.
</audio>

You recognise the pattern: controls for play/pause and volume, multiple <source> elements for different formats, and fallback text for very old browsers at the very end. The one real difference to <video>: there's no picture to display, so width/height don't make sense here.

Attributes shared with <video>

<audio> understands the same boolean attributes as <video>: autoplay, loop, and muted work exactly the same way. The same rule applies here too: autoplay without the visitor's explicit consent is usually not a good idea and gets blocked by many browsers.

Adding a sound clip

If you have an audio file, add it like this:

<h2 id="goal-cheer">Our Goal Celebration</h2>
<p>This is what it sounds like when we score:</p>
<audio controls>
  <source src="sounds/goal-cheer.mp3" type="audio/mpeg">
  Sorry, your browser doesn't support audio.
</audio>