Learn Basic String and Array Methods by Building a Music Player - Step 35

JavaScript
1

Tell us what’s happening:

**I’m not sure what to do on the second part of this code. **

Next, use the classList property and the add() method to add the "playing" class to the playButton element. This will look for the class "playing" in the CSS file and add it to the playButton element.

To finally play the song, use the play() method on the audio variable. play() is a method from the web audio API for playing an mp3 file

Your code so far

playButton.classList.add("playing");
play(audio)

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

const audio = new Audio();
let userData = {
  songs: [...allSongs],
  currentSong: null,
  songCurrentTime: 0,
};

const playSong = (id) => {
  const song = userData?.songs.find((song) => song.id === id);
  audio.src = song.src;
  audio.title = song.title;

  if (userData?.currentSong === null || userData?.currentSong.id !== song.id) {
    audio.currentTime = 0;
  } else {
    audio.currentTime = userData?.songCurrentTime;
  }

  userData.currentSong = song;
playButton.classList.add("playing");
play(audio)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Basic String and Array Methods by Building a Music Player - Step 35

2

The challenge is to use the play method on the audio variable.

What you did here is using a function called play with audio as a parameter.

Instead, a method is basically a function BUT not as a regular function.
It’s called method because it’s related to something specific.

For Example,

In your first step, you used the add method by using it on the classList cause the add method came with the classList property. And you used it with the . notation as classList.add(). Now, this is a method not a regular function.

In summary:

This is a regular function being called:

showMessage();

This is calling a method on the audio web API:

audio.play();

Hope that helps!

1 Like
3

Thank you! This helped and this was a great breakdown in explaining the issue.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.