Getting audio players to play their respective streams out of their element

manageAudio(player, {

      manageAudio(player, {
    playing
      });
  }

The player argument is given to the manageAudio() function, but is not received by the manageAudio() function as the opts parameter. Instead, it is received by the manageAudio() function as the player parameter.

It is the opts parameter, more specifically, opts.playing, that I was asking about instead.

Then the answer is, I don’t know.

The opts parameter of the manageAudio() function gets its value from the following object:

      {
    playing
      }

What you see in the above excerpt of code, is given as the second argument in the following section of code:

      manageAudio(player, {
    playing
      });

So let’s go further from there. Where does playing get its value from. That will help us to understand what is being represented by that value.

From here:

      playAudio(opts.playing);
      }
    }

No, that function uses the value that was given to the manageAudio() function.
We are instead tracing things backwards, to find out where the information comes from.

The manageAudio() function gets opts.playing from that excerpt of code in my previous post, which uses a variable called playing in the playButton() function.

Going backwards further from there, the question is of where does that playing variable in the playButton() function get its value from?

opts.playing in manageAudio() is the same as playing in playButton()

What does that playing in the playButton() function represent?

Come on @asasass, we are nearly there. It’s so close I can feel it’s little heart quivering.

2 Likes

var playing = isPlaying(button);

showButton(button, playing);

Yes, and the isPlaying() function tells us if the button is currently playing or not.

So after all of that, what is it that you understand that opts.playing represents?

var playing = isPlaying(button);

Okay, good enough. Now going the other way, the playAudio() function uses opts.playing.

playAudio(opts.playing);

What is it though that the playAudio() function has as its first parameter?

opts.playing

No that’s wrong.

In the following code:

playAudio(opts.playing);

The call to the playAudio() function has opts.playing as its first (and only) argument. That’s not what was being asked about though.

What I was asking about is what does the playAudio() function have as its first parameter?
Do you remember the difference between arguments and parameters?

this
player

Good. So playAudio() expects something that we call player, which is a reference to the HTML <audio> element, and instead we are giving it a true/false value that indicates if the play button is currently playing.

The playAudio() function is being given the wrong argument.

1 Like

What should it be given?

This process that we went through of looking back to something that we know, and looking forward for what is expected, is an extremely common debugging technique that helps us to fix a vast number of issues.

All we need to do is to look at the the parameter of the playAudio() function, and to consider how we’ve commonly given arguments to similar parameters before.

1 Like