Guided: Media Handling with JavaScript

Libraries: If you want this lab, consider one of these libraries.
Core Tech

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.

Get started Contact sales

Lab Info

Level

Intermediate

Last updated

Aug 21, 2025

Duration

19m

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="" </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.

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.

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.

About the author

Shimon Brathwaite

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

Real skill practice before real-world application

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.

Learn by doing

Engage hands-on with the tools and technologies you’re learning. You pick the skill, we provide the credentials and environment.

Follow your guide

All labs have detailed instructions and objectives, guiding you through the learning process and ensuring you understand every step.

Turn time into mastery

On average, you retain 75% more of your learning if you take time to practice. Hands-on labs set you up for success to make those skills stick.