Featured resource
Tech Upskilling Playbook 2025
Tech Upskilling Playbook

Build future-ready tech teams and hit key business milestones with seven proven plays from industry leaders.

Learn more
  • Labs icon Lab
  • Core Tech
Labs

Guided: Media Handling with JavaScript

In this lab, you'll learn how to handle media in JavaScript. First, you'll learn how to construct a media player in JavaScript. Next, you'll implement a playlist feature that allows users to select songs from a list of imported files. Finally, you'll implement a media playback feature and synchronize it with animations. When you’re finished with this lab, you'll have the skills and knowledge needed to handle media in JavaScript and create a functional playlist application.

Labs

Path Info

Level
Clock icon Intermediate
Duration
Clock icon 19m
Last updated
Clock icon Aug 21, 2025

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Playing an Audio File in Javascript

    In this first challenge, you will learn how to play audio files using Javascript. Your task is to configure the code provided to play or pause a music file when a button is clicked. Here's a breakdown of the code you'll work with:

    <!DOCTYPE html>
    <html lang="en">
    <body>
     <button id="playPauseButton">Play Audio</button>
     <audio id="audioPlayer" src="" <!--Add path --></audio>
    

    This first piece of code specifies that it is an HTML file, sets the language to English, and creates a button with an ID playPauseButton. It then creates an audio element that will be linked to the file you want to play.

    <script>
      const audioPlayer = document.getElementById('audioPlayer');
      const playPauseButton = document.getElementById('playPauseButton');
    
      playPauseButton.addEventListener('click', () => {
       if (audioPlayer.paused) {
        audioPlayer.play();  
        playPauseButton.textContent = 'Pause Audio';  
       } else {
        audioPlayer.pause();  
        playPauseButton.textContent = 'Play Audio';  
       }
      });
     </script>
    

    Next, you have a <script> tag. This portion controls when the audio file is played or paused through the use of an event listener. Each time the button is clicked, the audio file will pause if it's playing, or play if it's currently paused.

  2. Challenge

    Creating a Playlist in Javascript

    In this challenge, you will create a playlist app that allows users to select a song and play a song of their choice. This takes the previous iteration one step further. Instead of playing one song, the user can interact with multiple songs as desired. Take a look at how the code works:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Song Picker</title>
    </head>
    <body>
        <h1>Select a Song</h1>
    

    The script begins with creating a HTML document with a title and one header.

        <select id="songSelector">
            <option value="fill">Guitar</option>
            <option value="fill">Piano</option>
            <option value="fill">Violin</option>
        </select>
    
        <button onclick="playSelectedSong()">Play Song</button>
    
        <audio id="audioPlayer"></audio>
    

    This section of code creates a dropdown list with three <option> values. This is what the user will use to select the song they want to play. Lastly, a button is created that the user will click to play the song of their choice, and an audio element is created to handle audio playback.

        <script>
            function playSelectedSong() {
                const songSelector = document.getElementById('songSelector');
                const audioPlayer = document.getElementById('audioPlayer');
                const selectedSongPath = songSelector.value;
    
                audioPlayer.src = selectedSongPath;
                audioPlayer.load(); // Load the new audio source
                audioPlayer.play(); // Play the selected song
            }
        </script>
    </body>
    </html>
    

    Here is the Javascript for the playSelectedSong() function, which is triggered every time someone clicks the button. It ensures that the correct song is played.

  3. Challenge

    Synchronize Media Playback with Page Events

    In this challenge, you will learn how to synchronize playback with on-page events—in this case, a progress bar. You should go review the entire code base to become famiilar with it. Here are some of the most important elements you should understand:

    <audio id="audioPlayer" controls></audio>
    

    This line of code is similar to previous iterations, with the addition of the controls attribute.This is what will create the progress bar.

    <button id="prevBtn">Previous</button>
    <button id="nextBtn">Next</button>
    

    This creates the Previous and Next buttons, which allow the user to scroll through songs.

    // Define the playlist as an array of objects
    const playlist = [
      { title: 'Guitar', src: 'fill' },
      { title: 'Piano', src: 'fill' },
      { title: 'Violin', src: 'fill' }
    ];
    

    This creates the playlist as an array of objects, allowing the songs to be scrolled through.

    // Event listeners for navigation buttons
    prevBtn.addEventListener('click', () => {
      currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
      loadTrack(currentTrackIndex);
      displayPlaylist();
    });
    
    nextBtn.addEventListener('click', () => {
      currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
      loadTrack(currentTrackIndex);
      displayPlaylist();
    });
    

    This code is triggered when the Previous or Next button is clicked. It defines the logic that allows for the code to move through the songs when each button is pressed.

Shimon Brathwaite is a seven-year cybersecurity professional with extensive experience in Incident Response, Vulnerability Management, Identity and Access Management and Consulting.

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.