html · level 2 · unit 7 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
plays sound, and <source> offers spare formats.
<audio controls> adds a player for audio: a slim bar with play, pause and volume. It works like <video>, with no picture. Without controls, an audio player is not shown at all.
Files come in different formats, shown by their ending, and not every browser plays every . So list each file in its own <source>, with type naming the format. The browser plays the first one it can.
type="audio/mpeg" means .mp3, and type="audio/ogg" means .ogg. <video> uses <source> the same way, with video/mp4 and video/webm.
<figure>
<figcaption>Rain on a tin roof</figcaption>
<audio controls>
<source src="rain.mp3" type="audio/mpeg">
<source src="rain.ogg" type="audio/ogg">
Your browser cannot play this sound.
</audio>
</figure>Press show my page to see it here.
<source> is empty, so it has no closing tag.
guess first
Which file will a modern browser play?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<video controls width="640" height="360">
<source src="puppy.webm" type="video/webm">
<source src="puppy.mp4" type="video/mp4">
</video>your turn
Your turn. Offer two formats.
Fill the blanks so the player offers rain.mp3 with the type audio/mpeg first, then rain.ogg with the type audio/ogg.
Press show my page to see it here.
- rain.mp3 comes firstnot checked yet
- its type is audio/mpegnot checked yet
- the spare is audio/oggnot checked yet
fix it
The sound player has vanished. Can you fix it?
Press show my page to see it here.
- the player has controlsnot checked yet
- the player shows on the pagenot checked yet
- The code looks fine, but nothing shows. What does a player need to have buttons?
- Without
controls, an audio player is hidden completely. - Add
controlsto the<audio>tag on line 1, then press run.
nailed it
your page can make some noise. :D
<audio controls>adds a sound player.<source>lists the same file in different formats.- The browser plays the first format it can.
new words in your collection
- audio
- format
This lesson isn’t saved. A free account remembers every lesson you finish.