Multiple audio players on blogger

JavaScript
464

How would you target initial

with:

hideAllButtons(button);

Something would need to be altered in this code:

   function hideInitialOverlay(button) {
        var button = getButtonContainer(button);
        hide(button.querySelector(".initial"));
    }



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

What is the problem that you’re wanting to solve here?

466

Using this:
hideAllButtons(button);

to hide initial

467

Where would I put this?

showInitailButton(button);

Using this to hide the initial button:


    function hideAllButtons(button) {
        button.querySelectorAll("svg").forEach(hide);
    }
468

Under what circumstances would that be beneficial?

1 Like
469

What would be the right way to do this?

Deleting this:

 function hideInitialOverlay(button) {
        var button = getButtonContainer(button);
        hide(button.querySelector(".initial"));
    }

And adding this here worked:
hideAllButtons(button);

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

And once again I have to ask, what are you wanting to achieve by doing that?

471

What I want to do, is remove these 2 blocks of code here:

 function hideInitialOverlay(button) {
        var button = getButtonContainer(button);
        hide(button.querySelector(".initial"));
    }


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

Which I successfully did here:

But nothing is specifically targeting initial, which I don’t think is good.

or, is it targeting initial there?

472

Is this the inclusion of this:
hideAllButtons(button);

targeting initial in here?

  function showPauseButton(button) {
    var pause = getPause(button);
    hideAllButtons(button);
    show(pause);
    button.classList.add("active");
  }
473

What I mean to ask you is, what is the difference of behaviour that you want from the button?

474

no difference, just to hide it after it’s clicked on.

475

Which mean, I don’t need any of this stuff?

 function hideInitialOverlay(button) {
        var button = getButtonContainer(button);
        hide(button.querySelector(".initial"));
    }


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

With extra code


 function hideInitialOverlay(button) {
        var button = getButtonContainer(button);
        hide(button.querySelector(".initial"));
    }


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

Without the extra code:

477

The purpose of that code was to only hide the initial overlay when its clicked on, so that the play button and links would then be shown, and another click would be required to start things playing.

That was designed according to what you said you wanted before.

478

It will be a few hours before I can return to helping out here.

479

That was before I added in this:

 function hideAllButtons(button) {
    button.querySelectorAll("svg").forEach(hide);
  }
480

Now that I added that in, it seems to be doing that job from within here:

But how is it doing it from in there?

  function showPauseButton(button) {
    var pause = getPause(button);
    hideAllButtons(button);
    show(pause);
    button.classList.add("active");
  }

If I remove:
hideAllButtons(button);

Click on the button

and the initial svg shows.

And in the html

there’s no hide next to it:
<svg class="initial"

When this is added
hideAllButtons(button);

How exactly is it hiding initial also?

481

I think I figured something out.

Placed in this location hides initial after the button is clicked.
hideAllButtons(button);

  function playButton(button) {
    var player = button.querySelector("audio");
    if (isPlaying(player)) {
      showPlayButton(button);
      pauseAudio(player);
    } else {
      hideAllButtons(button);
      showPauseButton(button);
      playAudio(player);
    }
  }
482

Which explains why, when
hideAllButtons(button);

is placed in here, it will also hide the initial svg button after it’s clicked.

Do I have this correct?


  function showPauseButton(button) {
    var pause = getPause(button);
    hideAllButtons(button);
    show(pause);
    button.classList.add("active");
  }
483

And so, I can get rid of this code now that I do not need it any longer. It no longer serves any purpose.

I only needed it when I wasn’t using this.

  function hideAllButtons(button) {
    button.querySelectorAll("svg").forEach(hide);
  }

I can get rid of this.

 function hideInitialOverlay(button) {
        var button = getButtonContainer(button);
        hide(button.querySelector(".initial"));
    }


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