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


#564

Adding this to each javascript, did not work, how come?

Why would that not have worked?
https://jsfiddle.net/zfs5qqq9/141/

  function hideAllButtons(button) {
 button.querySelectorAll(".playa, .pausea, .initialb, playb, .pauseb, .speakerb, .playc, .pausec, .speakerc, .playd, .paused, .playe, .pausee, .playf, .pausef").forEach(hide);
  }

#565

I made those up from memory, you need to check that they are correct.
I also see that playb is missing a full stop.


#566

This should not happen:
https://jsfiddle.net/zfs5qqq9/143/


#567

I agree. I'll be able to investigate that in a short while.


#568

I have to fix all of those.

What you put down wasn't all correct.

It's still doing it though, after I fixed that.
https://jsfiddle.net/zfs5qqq9/148/


#569

I also agree there too. I made them up from memory, as they were not designed to be an instruction on what to do.

Instead, they were designed as a warning about the bad type of code that comes from doing things the hard way.


#570

There's an issue with the 1st button.
https://jsfiddle.net/zfs5qqq9/157/

Click on the 1st one

then the second one.

The svg changes, but it doesn't flip back to it's other style.

Do you see what I mean?

How do I fix that?


#571

No, I can't see it yet, Iā€™m still watching the tv news. I'll be able to help shortly.


#572

The svg switched, but the style, background, didn't change with it.


#573

Okay, I'm back and can be more useful now.

Let's start from the top with the first set of code, and work through issues, moving down to the other codes when the first issues have been dealt with.

The A code seems to be doing its job. The B code isn't removing that background from button A, so that's the first thing to investigate.

Do you remember how "active" is set and removed by play/pause, and that "activated" is permanently set when something has been clicked? The B code is currently not removing "active" from the other buttons, and it should.

The showPlayButton() function is where that occurs. It looks like you removed that line from the B code. You need to put that line back. You'll find the appropriate line in the function of the same name in the A code.


#574

Both of these?

    button.classList.add("active");
    button.classList.add("activated");

#575

A

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");

  }

B

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);

  }

#576

No, those aren't related to the problem.


#577

showPlayButton() function is where that occurs. It looks like you removed that line from the B code.

What am I supposed to do here?

B

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);

  }

#578

Yes, that's right. I agree completely with what is said there.


#579

What line is missing?

B

function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);

  }

#580

Here, let me quote another piece of what I told you ten minutes ago.

The showPlayButton() function in the B code needs to remove "active" from any button that it's given.


#581

In fact, all of the showPlayButton() functions need to remove "active" from the button that they're given, in the same way that the A code does.


#582

I don't understand.


#583

Look at what code A does in the showPlayButton() function with the "active" class.

Do what code A does there, in all of the other showPlayButton() functions.