Build a Multimedia Player

#community #learning #programming #webdev

Author’s Note: My ADHD was in full tilt this morning, which is why I mention in this post that I plan to revisit this lab at a later date to expand the accessibility beyond the original user story requirements.

This freeCodeCamp lab wraps up the set of three, maintaining the same structure as the previous two labs, complete with an example and the familiar HTML boilerplate shown below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multimedia Player</title>
</head>

<body>

</body>

</html>

With eleven user stories to complete, we start by adding an h1 element, creating three sections, and placing an h2 element in the first section. Beneath the h2, an audio element was included with controls and a single aria-label attribute. The following code block is a good example of an audio element with this attribute:

<audio controls aria-label="descriptive label goes here">
  <source src="url-to-audio-goes-here" type="audio/mpeg">
</audio>

The source element can similarly be used within a video element, as shown in the following example:

<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>

Although I usually avoid following the provided example too closely, I used the audio source this time to ensure I focused on accessibility. For the same reason, I'll be using the provided video source as well. In the future, I would like to extent this lab by utilising additional accessibility attributes.

The second section element was used for the video, with an h2 element above it for the video title. Attributes for controls and width were added, along with a second aria-label attribute. A source element was included using the provided URL, and below it, a track element was added to provide subtitles.

With accessibility in mind, the final section contains the transcript, including an h2 element for the title and a p element for the text. For this stage, the text has been slightly adjusted from the example provided.

Once all the user stories were completed, it was time to run the tests. The lab passed successfully, and I downloaded it for future reference. You can see the completed code below for a clearer view of this lab:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multimedia Player</title>
  </head>

  <body>
    <h1>Multimedia Player</h1>

    <section>
      <h2>Now Playing: Sailing Away</h2>
      <audio controls aria-label="Play 'Sailing Away' audio track">
        <source 
          src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3" 
          type="audio/mpeg"
        >
      </audio>
      <span id="audio-description" class="visually-hidden">
        Use the play button to start the audio track. Use pause to stop it. Use volume controls to adjust sound.
      </span>
    </section>

    <section>
      <h2>What is the map method and how does it work?</h2>
      <video 
        controls 
        width="640" 
        aria-label="Play 'What is the map method and how does it work' video recording"
      >
        <source 
          src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" 
          type="video/mp4"
        >
        <track
          src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.vtt"
          kind="subtitles"
          srclang="en"
          label="English"
        >
      </video>
    </section>

    <section>
      <h2>Transcript</h2>
      <p>
        What is the map method, and how does it work? The map method is a widely used and powerful function in JavaScript that works on arrays. It creates a new array by applying a specified function to each element of the original array. The original array remains unchanged, while the new array contains the results of the function applied to each element.
      </p>
    </section>

  </body>
</html>

To conclude, I really enjoyed this trio of labs focused on accessibility. I now have an accessibility review and quiz ahead of me before tackling the quiz for the entire HTML section of the curriculum. I'll share more about that review next time, but until then - keep coding!

Top comments (6)

Aryan Choudhary • Feb 11

Awesome job, Richard! Your multimedia player looks fantastic. You're really tackling this topic, and I'm loving the progress you're making. Good luck for the quiz!