gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(curriculum): Update user stories and description for the multimedia player lab (#60237)

Browse Source
This commit is contained in:
Arakhsh Qanit
2025-05-09 21:29:44 +05:00
committed by GitHub
parent 053a6072d4
commit 01722e62a7
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-multimedia-player/67fccc2463253b213a000142.md
+23 -2
View File
@@ -8,6 +8,27 @@ demoType: onClick
# --description--
In the prior lecture videos, you were introduced to working with `audio` and `video` elements. In this lab, you will build out a multimedia player that will display an `audio` track and `video` with a transcript.
For the `audio` element, you will need to include a `source` element which is used to specify the media being used.
Here is an example:
```html
<audio controls aria-label="descriptive label goes here">
<source src="url-to-audio-goes-here" type="audio/mpeg">
</audio>
```
The `source` element can also be used in the `video` element like this:
```html
<video controls width="600" aria-label="descriptive label goes here">
<source src="link-to-mp4-goes-here" type="video/mp4">
<!-- Remaining code goes here -->
</video>
```
**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
**User Stories:**
@@ -16,10 +37,10 @@ demoType: onClick
2. You should have three `section` elements.
3. Inside the first `section` element, you should have an `h2` element for the title of song playing.
4. Below the `h2` element, you should have an `audio` element with `controls` attribute and an `aria-label` attribute.
5. Inside the `audio` element, you should have a `source` element with a `src` attribute pointing to an audio file and a `type` attribute.
5. Inside the `audio` element, you should have a `source` element with a `src` attribute pointing to an audio file and a `type` attribute. You are free to use this audio URL if you like: `https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3`
6. Inside the second `section` element, you should have an `h2` element for the title of the video playing.
7. Below the `h2` element, you should have a `video` element with `controls`, `width` attributes and an `aria-label` attribute.
8. Inside the `video` element, you should have a `source` element with a `src` attribute pointing to a video file and a `type` attribute.
8. Inside the `video` element, you should have a `source` element with a `src` attribute pointing to a video file and a `type` attribute. You are free to use this video URL if you like: `https://cdn.freecodecamp.org/curriculum/labs/What is the map method and how does it work.mp4`
9. Below the `source` element, you should have a `track` element with a `src` attribute pointing to a subtitles file and a `kind` attribute, a `srclang` attribute and a `label` attribute.
10. Inside the third `section` element, you should have an `h2` element for the title of the section eg. "Transcript".
11. Below the `h2` element, you should have a `p` element with the transcript of the video.