Multiple audio players on blogger

JavaScript
364

ohhhhh

365

Like 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()) {
hideAllButtons(button);
    }
  }

  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()) {
hideAllButtons(button);
    }
  }
366

Then, the other showPlayButton() and showPauseButton() functions can instead of specifically hiding something, use hideAllButtons() function too.

367

You need to leave the show lines in there still. It’s only the hide lines that are being replaced.

368

What did I do wrong?

369

Let’s start from the beginning:

What comes after this:

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

It looks like setting the mouseover and mouseout events at the same time as the click event, might not be such a good idea.

We might be able to move the addEventListener lines for those events near the bottom of the initialOverlayClickHandler function instead, but I’ll have a think about that over dinner and come back to you inside of an hour with a useful recommendation about that.

371

Removing hide pause and speaker with this:

hideAllButtons(button);

372

It worked, I got it:

Replacing 1 piece of tiny code with another, I don’t know how effective that is.

There is still all of this still in there:

var pause = getPause(button);
var speaker = getSpeaker(button);
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()) {
      hideAllButtons(button);
      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()) {
      hideAllButtons(button);
      show(speaker);
    }
  }
373

Here’s an updated one and you can see what else can be done.

Or if I made any mistakes or anything.

Like, should I not have put speaker into a function?

  function getSpeaker(button) {
    return button.querySelector(".speaker");
  }
374

Should I put these back:

  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()) {
      hideAllButtons(button);
      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()) {
      hideAllButtons(button);
      show(speaker);
    }
  }

To this???

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

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

Would I be able to get this working using this method?

Look at this for a second:

  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);
    button.classList.add("active");
    hide(play);
    show(pause);
  }

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

  function pauseAllButtons() {
    var buttons = document.querySelectorAll("playButton");
    buttons.forEach(showPauseButton);
  }

  function isPlaying(audio) {
    return audio.paused === false;
  }

  function playButton(button) {
    var player = button.querySelector("audio");
    pauseAllButtons();
    player.volume = 1.0;
    if (isPlaying(player)) {
      showPlayButton(button);
      player.pause();
    } else {
      showPauseButton(button);
      player.play();
    }
  }

  function showPause(button) {
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      showPauseButton(button);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      showSpeakerButton(button);
    }
  }
376

When you use the hideAllButtons() function, things do get easier.

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

The showPauseButton() function just needs to do hideAllButtons() before showing the pause button, and all is good with that one.

377

Am I using this code setup or not?

Or am I using this one?

378

Yes.

379

So, then this is good then:

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

Move the hide line up above the show line, and then replace the hide with hideAllButtons(button);

381 
    function showSpeakerButton(button) {
      var pause = getPause(button);
      var speaker = getSpeaker(button);
      hide(hideAllButtons(button); 
      show(speaker);
382

Replace the entire hide line with that hideAllButtons(button); command.

383