Multiple audio players on blogger

JavaScript
304

Now that you have the showPlayButton() function, you can remove the show/hide lines from above player.pause() and replace them with showPlayButton(button) instead.

305

What did I do wrong?

    function showPlayButton (button) {
    var play = getPlay(button);
    var pause = getPause(button);
    show(play);
    hide(pause);
  }

  function togglePlayButton(button) {
    var player = button.querySelector("audio");
   showPlayButton(button)
    player.volume = 1.0;
    if (isPlaying(player)) {
      player.pause();
      button.classList.remove("active");
306

The showPlayButton line must be inside of the if statement, just above the player.pause() line.

307
308

Is this good so far?

  function showPlayButton(button) {
    var play = getPlay(button);
    var pause = getPause(button);
    show(play);
    hide(pause);
  }

  function showPauseButton(button) {
    var play = getPlay(button);
    var pause = getPause(button);
    hide(play);
    show(pause);
  }

  function togglePlayButton(button) {
    var player = button.querySelector("audio");
    player.volume = 1.0;
    if (isPlaying(player)) {
      showPlayButton(button)
      player.pause();
      button.classList.remove("active");
    } else {
      button.classList.add("active");
      showPauseButton(button)
      player.play();
    }
309

A semicolon belongs on the end of the showPlayButton() and showPauseButton() statements, but other than that it looks good.

310

Next I want to do this, but I don’t know what to call this function.

And am I allowed to add both of these to it?

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

 function hideInitialOverlay(button) {
    var button = getButtonContainer(button);
    button.classList.remove("active");
    button.classList.add("active");
  }

  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    playButtonClickHandler(evt);
  }
311

Those “active” parts don’t belong in the overlay, because that active stuff occurs when playing/pausing the button which needs to be in the togglePlayButton if statement.

312

ok, then those stay where they are then.

313

I asked because when I put it into the overlay on this one it worked.

button.classList.add(“active”);

  function hideInitialOverlay(button) {
    var button = getButtonContainer(button);
    hide(button.querySelector(".initial"));
    button.classList.add("clicked");
    button.classList.add("active");
  }
314

What we have there is the word “active” being used for two different things.

One situation is where you want to know when someone has started interacting with the button, so that an “active” CSS style can be applied to the button forever onwards.

The other situations is when you want to know that the button is currently playing. That active state when when the button is paused.

Currently the same “active” word is being used for both different situations, which results the confusion that you seem to be currently facing.

It can be tricky to come up with non-misleading terms, but the effort to do so is worth it.

1 Like
315

When I do it like this, it stays on one, and doesn’t go back to the other.

316

There seems to be three different situations that require non-misleading names.

  1. When the button has been interacted with - “active”
  2. When the button is currently playing - “playing”
  3. When the audio is currently playing - isPlaying()

I recommend that some kind of system like that be developed, and made consistent across all of your different play button code.

317 
    button.classList.remove("active");
    button.classList.add("active");

You are removing then adding the “active” class in the same two lines, so it will always be shown.

I recommend that you decide on what you want to actually happen with the button, so that a consistent system can be put in place to achieve that.

318

You can only have one of these in there, not both, is that what you’re saying?

    button.classList.remove("active");
    button.classList.add("active");
319

It can’t be consistent because,

1 player uses both:

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

And one only uses:

button.classList.add("active");

320

I’m saying that they shouldn’t be in there at all.

1 Like
321

ok…

322

Which should we do next?

pauseAllButtons

getAudio
playAudio
pauseAudio

323

Let’s start from the top.

The pauseAllButtons function uses querySelectorAll to find all of the “.pause” buttons on the page, and uses forEach on them with the showPauseButton function to pause all of them.