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


#524

Each playbutton is different and requires different things to get them working.


#525

Wait. I forgot to add the html. let me now do that.


#526

Here:
https://jsfiddle.net/zfs5qqq9/83/


#527

This is better:
https://jsfiddle.net/zfs5qqq9/85/

All buttons play now.

The middle button is having issues.


#528

For how long do you want to keep on doing things the hard way?


#529

The whole thing is working:
https://jsfiddle.net/zfs5qqq9/85/

The middle button is the only one that is having issues.

And the 1st button.


#530

It looks like the presentation is at fault there. Look to the CSS code for your solution.


#531

It's working now:
https://jsfiddle.net/zfs5qqq9/89/

I'll follow suit with the other buttons until I run into an issue.


#532

I disagree, it's not working.


#533

I already stared working on d, let me finish that first.


#534

Why is this in red, it doesn't make sense.


#535

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hidea") || play.classList.contains("hideb") ||
    play.classList.contains("hidec") || play.classList.contains("hided);
  }

#536

Yes, it does make sense. Study it more carefully and you should be able to figure it out.


#537

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hidea") || play.classList.contains("hideb") ||
      play.classList.contains("hidec") || play.classList.contains("hided");
  }

#538

What did you want me to fix in this one?
https://jsfiddle.net/zfs5qqq9/89/


#539

Oh, you added a comment to the link that you posted - that comment wasn't there when I saw your reply.

The third set of buttons don't pause when you start playing another button. That is what's wrong with them.


#540

how would I fix that?


#541

It would be in the same way that we did the others. We have the A code and the B code also pause the C buttons.

If they're not doing that, we need to investigate to find out why.


#542

It looks like you made a mistake in the pauseAllButtons() function of the B code.

Here's that code:

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButtona, .playButtonb, playbuttonc");
    ...

#543

Without the fullstop, querySelectorAll is looking for an element called <playbuttonc> which doesn't exist.

Even when you add the fullstop though making it `.playbuttonc' the inaccurate capitalisation means that querySelectorAll won't be able to find any element with that classname on it.

Can you see how to fix that problem?