Multiple audio players on blogger

asasass · November 29, 2017, 2:50am

Got it:

Are we up to this, or is there more stuff to do?

getAudio
playAudio
pauseAudio

Paul_Wilkins · November 29, 2017, 2:51am

Yes, we’ll get on to that when I get home from work in about 30 minutes.

asasass · November 29, 2017, 2:52am

ok…

asasass · November 29, 2017, 2:58am

Do I create a new function for speaker?

Do I put speaker inside of function showPauseButton(button) {?

Where do I put these:


  function showPause(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(speaker);
      show(pause);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

When it comes to setting this up?

 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);
  }

asasass · November 29, 2017, 3:17am

A Done

C 1 Done

D Done
https://jsfiddle.net/nox5btmd/26/

E 1 Done
https://jsfiddle.net/9d03h1hk/112/

E 2 Done
https://jsfiddle.net/9d03h1hk/116/

F Done
https://jsfiddle.net/uuz2gyb2/13/

asasass · November 29, 2017, 3:18am

I’m stuck on these 2 that use speaker also.

B

C 2

Meaning, adding these parts, if there is also a speaker part, where does that go?

  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);
  }

They both use this:

  function showPause(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(speaker);
      show(pause);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

Paul_Wilkins · November 29, 2017, 3:21am

With the code at https://jsfiddle.net/k6nseepq/59/ there is still something else to do, and that is to move the “active” lines in to the showPlay() and showPause() functions.

asasass · November 29, 2017, 3:22am

Like this?


      showPauseButton(button);
      button.classList.add("active");
      player.play();

Paul_Wilkins · November 29, 2017, 3:23am

Nope. WIth that particular one, remove the “active” line and move it in to the showPauseButton() function declaration code that’s further up the screen.

asasass · November 29, 2017, 3:26am

Under var?
under show.
Does it matter?


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

Paul_Wilkins · November 29, 2017, 3:29am

No it doesn’t matter much in there.

asasass · November 29, 2017, 3:32am

Can we work on this now:

Where do I put these?

    var pause = getPause(button);
    var speaker = getSpeaker(button);

Do I create another speaker function?

 function showSpeakerButton(button) {
     var pause = getPause(button);
    var speaker = getSpeaker(button);
     hide(pause);
      show(speaker);
  }

#349

B

  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 showPause(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(speaker);
      show(pause);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

Paul_Wilkins · November 29, 2017, 3:40am

We can use a hideAllButtons() function that can replace the hide(speaker) and hide(pause) functions.
That way, we hide all of them before showing the one that we want, which is consistent with best-practice techniques.

function hideAllButtons() {
    var icons = document.querySelectorAll(".playButton svg");
    icons.forEach(function (icon) {
        hide(icon);
    });
}

Paul_Wilkins · November 29, 2017, 3:41am

A good place to put that function is just below the hideInitialOverlay() function.

asasass · November 29, 2017, 3:42am

I was thinking this, but I guess you say no.

function showSpeakerButton(button) {
     var pause = getPause(button);
    var speaker = getSpeaker(button);
     hide(pause);
      show(speaker);
  }

asasass · November 29, 2017, 3:44am

Do I remove these?

    var pause = getPause(button);
    var speaker = getSpeaker(button);


      hide(speaker);
      show(pause);

asasass · November 29, 2017, 3:45am

from here?

Like I did with the others?

  function showPause(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(speaker);
      show(pause);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

Paul_Wilkins · November 29, 2017, 3:45am

That would work in a situation where the speaker exists, but with buttons where there is no speaker, that would have trouble.

In such cases, more flexible code is required which is where the hideAllButtons() function comes in.

We can update it so that it only hide all of the icons within a given button, such as:

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

That is better code to use in this situation.

asasass · November 29, 2017, 3:47am

What’s the point in adding that code, if I’m not removing anything in this code?

  function showPause(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(speaker);
      show(pause);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = getPause(button);
    var speaker = getSpeaker(button);
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

I don’t understand the benefit of adding this code:


function hideAllButtons(button) {
    var icons = button.querySelectorAll("svg");
    icons.forEach(function (icon) {
        hide(icon);
    });
}

Paul_Wilkins · November 29, 2017, 3:48am

But you are removing something from that code. You will be removing and replacing the hide(speaker) and hide(pause) lines with hideAllButtons(button) instead.