curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md
The audio and video elements allow you to add sound and video content to your HTML documents. The audio element supports popular audio formats like mp3, wav, and ogg.
The video element supports mp4, ogg, and webm formats.
To include audio content on your web page, you can use the audio element with the src attribute pointing to the location of your audio file.
As you can see in the preview window, nothing shows up on the page. To see the previews, you will need to enable the interactive editor.
:::interactive_editor
<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3"></audio>
:::
If you want to see the audio player on the page, then you can add the audio element with the controls attribute.
Press play in the preview window to hear one of Quincy Larson's songs. To hear a different song, change the src value to "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3". To see the previews, you will need to enable the interactive editor.
:::interactive_editor
<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3" controls></audio>
:::
The controls attribute enables users to manage audio playback, including pausing or resuming playback. The controls attribute is a boolean attribute that can be added to an element to enable built-in playback controls. If omitted, no controls will be shown.
Note: Some browsers, such as Safari, may not display a volume control by default even when the controls attribute is present.
Apart from the src and controls attributes, there are several other attributes that enhance the functionality of the audio element. The loop attribute is a boolean attribute that makes the audio replay continuously.
Here's an example of using the loop attribute to play one of Quincy Larson's songs titled "Can't stay down". To see the looping in action, enable the interactive editor, scrub the play head close the end of the song and it will restart again once it is finished.
:::interactive_editor
<audio
src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"
loop
controls
></audio>
:::
Another attribute you can use is the muted attribute. When present in the audio element, this boolean attribute will start the audio in a muted state. Here's an example of using the muted attribute.
To hear the music, enable the interactive editor and click on the volume icon in the audio player.
:::interactive_editor
<audio
src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"
loop
controls
muted
></audio>
:::
When it comes to audio file types, there are differences in which browsers support which type. To accommodate this, you can use source elements inside the audio element and the browser will select the first source that it understands. Here's an example of using multiple source elements for an audio element:
<audio controls>
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.wav" type="audio/wav" />
<source src="audio.mp3" type="audio/mpeg" />
</audio>
The browser will first start with the ogg type, and if it can't play the audio, then it'll move down to the next type in the list.
All the attributes we have learned so far are also supported in the video element. Here's an example of using a video element with the loop, controls, and muted attributes.
Add the autoplay attribute to the opening video tag so the video plays automatically. To interact with the example, you will need to enable the interactive editor.
NOTE: The width attribute is being used here to make the video smaller and fit better in the preview window. You will learn more about the width attribute in future lessons.
:::interactive_editor
<video
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
loop
controls
muted
width="400"
></video>
:::
For the src, or source attribute, we are using a video called "Big Buck Bunny" from archive.org. If you wanted to display an image while the video is downloading, you can use the poster attribute. This attribute is not available for audio elements and is unique to the video element. Here's an example of using the poster attribute with content provided by peach.blender.org.
<video
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
loop
controls
muted
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
width="400"
></video>
You can also use the source element inside a video element, just like you did with the audio element. This lets you provide the same video in multiple formats, and the browser will choose the first one it can play.
<video
controls
width="400"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
>
<source
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
type="video/mp4"
/>
<source
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
What attribute allows the audio to start in a muted state?
mute
Remember the attribute that specifically controls the sound state when the audio starts.
quiet
Remember the attribute that specifically controls the sound state when the audio starts.
pause
Remember the attribute that specifically controls the sound state when the audio starts.
muted
4
Which attribute lets you see the play and pause buttons?
loop
Think about the attribute that generates playback for the audio and video UI.
controls
details
Think about the attribute that generates playback for the audio and video UI.
muted
Think about the attribute that generates playback for the audio and video UI.
2
What is the purpose of the poster attribute in the video element?
To set the video source.
Consider what you would want to show to the user before the video starts playing.
To control the video playback.
Consider what you would want to show to the user before the video starts playing.
To display an image while the video is downloading.
To mute the video.
Consider what you would want to show to the user before the video starts playing.
3