Back to subject
HTML5/HTML Audio

Add a Lesson Audio Player

Practical lesson

Let's add an audio player and make sure the browser has enough information to load it.

- <audio> is the container for playable audio content. - controls asks the browser to display its built-in audio controls. - Add a <source> with a src pointing to the audio file. - type can tell the browser what media format the source uses. - Multiple <source> elements can provide alternative formats for browser compatibility. - Put fallback text inside <audio> so a browser that cannot use the element still receives a useful message. - Do not assume every browser or device will automatically play audio; autoplay is restricted in many situations. - Keep the audio file path correct and make sure the server can provide the file.

The important structure is <audio> as the player, <source> as the media file, and fallback text for unsupported situations.

Try it yourself
Code

Starter example

Code
<audio controls>
  <source src="lesson.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>
Live preview