Multiple audio players on blogger

JavaScript
184

#182 is a different code:

185

Yep, use that different after code, and put it after the updated active code that’s just above.

186 
    button.classList.add("playing");
    hide(button.querySelector(".initial"));
    link.classList.remove("inactive");
    if (!isActive(button)) {
        button.classList.add("active");
        return;
    }
    player.volume = 1.0;
  if (!player.paused) {
187

The isActive() function looks like it’s been removed. You need to put that function back in there.

188

There was never one in this code to begin with.

E 1

Different code.

E 1

E 2
https://jsfiddle.net/vcvvnz3c/21/

189

It was called isPlaying() in the code from https://jsfiddle.net/vcvvnz3c/33/:

  function isPlaying(button) {
    return button.classList.contains("active");
  }

and needed to be renamed to isActive() to prevent conflicts with the other isPlaying() function.

  function isActive(button) {
    return button.classList.contains("active");
  }

I will be back after about 3-4 hours.

190

That’s this one, not E 1.

E 2

191

Bad idea to show you a different code when you were working on this one. my bad.

192

A Done

B Done

C 1 Done
https://jsfiddle.net/xfeo5wfo/11/

C 2 Done
https://jsfiddle.net/vcvvnz3c/38/

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

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

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

E 2 && player.paused) Stuck.
https://jsfiddle.net/vcvvnz3c/33/

193 
    hide(button.querySelector(".initial"));
    link.classList.remove("inactive");
    if (!isActive(button)) {
      button.classList.add("active");
      return;
    }
    player.volume = 1.0;
    if (isActive(player)) {
      hide(play);
      show(pause);
      player.play();
    } else {
      show(play);
      hide(pause);
      player.pause();
    }

  }
194

most of those functions make your existing code easier to understand and work with

Which ones to be exact?

or, another way to put it.

This is what I want to know:
Which ones don’t involve, or have anything to do with flipping the if statement?

You said I don’t need to add these to every single code.

Which can I add to every code without flipping the if statement?

getButtonContainer - gives the “playButton” element from a given starting point somewhere within it
getPlay - gets a reference to the play icon element
getPause - gets a reference to the pause icon element
showPlayButton - shows the play icon, and hides the pause icon
showPauseButton - shows the pause icon, and hides the play icon
pauseAllButtons - finds all the pause icons and shows them all

Then we have audio-related functions for the player itself

getAudio - gets a reference to the

195

Because the pauseAllButtons() function must happen before the if statement, it becomes less confusing when the first if statement clause is also about pausing the player.

The bad structure that we are trying to avoid is this:

        pauseAllButtons();
        if (player.paused) {
          showPlayButton(button);
          playAudio(audio, button.getAttribute("data-audio"));
        } else {
          pauseAudio(audio);
        }

It’s a bad structure because first we pause the buttons, then the if statement checks if we can play stuff, then the else condition does more pause stuff. That’s a mixed up and confusing way to structure the code.

The good structure that makes the code easier to understand is this:

        pauseAllButtons();
        if (isPlaying(audio)) {
          pauseAudio(audio);
        } else {
          showPlayButton(button);
          playAudio(audio, button.getAttribute("data-audio"));
        }

That code is better structured because the pausing code is all together above the else statement, and the playing code is all together below the else statement.

You can add all of the functions without flipping the statement. The whole purpose of flipping the if statement is to make the code easier to understand, which becomes vitally important when you come back to this code in six months time, or when someone else looks at it too.

1 Like
196

With the code at https://jsfiddle.net/vcvvnz3c/33/ we will approach this in two main ways.

First, we will use only player.paused as the condition in the if statement, and then swap around the two parts of the if/else code block, as with all of the others.
After swapping them around you will have !player.paused in the condition, and that can be replaced with isPlaying(button);

That will have the button playing immediately, so the next thing after that is to prevent the button playing immediately, and not involve the if statement. I have an update that goes before the if statement, to easily achieve that too.

197
198

Why are you doing eight times the work, when we are working on one code that can control all eight of them at the same time?

What’s the part of the code where I can add it to only one player, and not all of them?

199

Replace isActive in the if statement with isPlaying, and that code will work.

We can then move on to preventing the play button from immediately activating.

200

Your HTML code needs to use the same class names across different players, before you can have that benefit.

201

isPlaying

202

They do.

A Done

B Done

C 1 Done
https://jsfiddle.net/xfeo5wfo/11/

C 2 Done
https://jsfiddle.net/vcvvnz3c/38/

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

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

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

E 2 && player.paused) Stuck.
https://jsfiddle.net/vcvvnz3c/33/1

203

You said I should leave it as after, but:

    if (isPlaying(player)) {
      show(play);

When viewing visually, it should be:


    if (isPlaying(player)) {
      hide(play);

or no?