Two versions of a playButton Binding Audio With a grid link structure

upto is the same code as this:

There won’t be multiple links.

this will be the only one that uses links.

That’s right, and we’ll need the var link code in the play button function.

I said I wanted to make 2 versions,

I didn’t say I was going to use both on 1 page.

That’s fine. Remaining with upTo makes it more consistent with the code on other pages too.

Other benefits are that everything is accessed from the button variable, which makes the code more resilient to future change too.

 function playButtonClickHandler() {
     var link = getPlayButton(button, ".links");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").style.display = "none";
        playButton.querySelector(".pause").style.display = "inline-block";
        player.play();
      } else {
        playButton.querySelector(".play").style.display = "inline-block";
        playButton.querySelector(".pause").style.display = "none";
        player.pause();
      }
    }
    
           function getPlayButton(el) {
     while (el.classList.contains("playButton") === false) {
       el = el.parentNode;
     }
     return el;
   }
    
    
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

Wait a second:

What’s the point in doing this, if the code will be the same:

Let’s move on to version 2 then.

Getting this

to work like this
https://jsfiddle.net/02me2fvk/40/

new added code:

 document.querySelector(".links").classList.add("hide");
   var playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", linksClickHandler);
   var player = document.querySelector("audio");


       function linksClickHandler() {
            var button = document.querySelector(".playButton");
            hide(wrap.querySelector(".links"));
            hide(button.querySelector(".initial"));
            playButton.addEventListener("click", playButtonClickHandler);
            show(play);
            hide(pause);
            button.classList.add("playing");
        }
    }

What is the benefit of that second code that you want to add to the first one?

It doesn’t start playing after you click the image.

Unless there’s a better way to implement that?

Getting the play button to show after you click the image with no audio playing.

Instead of the pause button showing after you click the image…

We need to slightly reorganise things to easily achieve that, by moving the if/else code up just under the var statements.

That way, we can have the if statement also check for something that the code below it changes.
We could check if “.playing” isn’t on the button, or we could check if the “.initial” display image is hidden, or we could check of the “.inactive” class on the links isn’t there.

Which of those three approaches do you think is most appropriate?

check if “.playing” isn’t on the button,

Okay, first thing to do is to move the if/else block of code up until it’s just below the var statements.

is that right or not?

Yes, what I instructed you to do is right.

  function togglePlayButton(button) {
     var link = upTo(button, ".links");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");

    if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {


     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
     player.volume = 1.0;
 
       show(play);
       hide(pause);
       player.pause();
     }

Good one. You are now going to create a new function just above the togglePlayButton one, called isPlaying(button)

That function will just return true/false, and from the if statement, we will use that function to check if it’s okay to play.

This is a good time though to revisit the naming of the “playing” class. The purpose of it is to set how the play button looks after the initial image has been clicked.

The “playing” class is still there when it is playing and when it’s paused, so another name like “active” is more appropriate, and certainly less confusing when we’re working with the code.

What do you think? Shall we rename “playing” to “active”, or to something else that you think is more appropriate?


   function isPlaying(button) {
    ;
   }

We need to first do something about that last piece, because it will change how the function is named.


     button.classList.add("playing");

So active, or no?

Should they be different names?

Active is the standard nomenclature. There should only be one place in each of the JavaScript and CSS code that needs to have playing renamed to active.