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

JavaScript
841

I recommend that you go back to the code at https://jsfiddle.net/aebwrk6p/16/

It is the group of three lines that start with button/hide/link that you need to place after the end of the if/else block of code.

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

       button.classList.add("active");
       hide(button.querySelector(".initial"));
       link.classList.remove("inactive");


       show(play);
       hide(pause);
       player.pause();
     }
843

Go back to the code in https://jsfiddle.net/aebwrk6p/16/

844

} else {

   button.classList.add("active");
   hide(button.querySelector(".initial"));
   link.classList.remove("inactive");


   show(play);
   hide(pause);
   player.pause();

   hide(play);
   show(pause);
   player.play();

 }
845

You’re just making things even worse.

Go back to the code in https://jsfiddle.net/aebwrk6p/16/

846

I don’t know where you want me to put hide/show player.

 if (player.paused) {
       
       hide(play);
       show(pause);
       player.play();
     
     } else {
       
       button.classList.add("active");
       hide(button.querySelector(".initial"));
       link.classList.remove("inactive");
     
       show(play);
       hide(pause);
       player.pause();
     }
847

Those three button/hide/link lines, that have strings with “active”, “.initial”, and “inactive”, need to come out of the if/else block of code and be placed below the end of the else block of code.

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

     
       show(play);
       hide(pause);
       player.pause();
     }
       button.classList.add("active");
       hide(button.querySelector(".initial"));
       link.classList.remove("inactive");
849

What else needs to be done to get the code working?

850

Why exactly did you have me do that?

What was the point?

It works the same way as this.

851

audio needs to be off after you click on it

play button should be showing, not pause.

852

It was exactly so that we can have the if statement check if button is active.
Once those three lines that you moves have been executed, it;s too late to be able to determine that.

Now that they are after the if statement, we can use that isActive function to tell if the button is active. If it is active and the other condition of the player being paused is true, then it’s okay for it to play.

If on the other hand the button isn’t active, that is when you do not want the player to go ahead and start playing anything.

853

Preparations are being made for that to occur.

Currently our process has been hampered for several hours by your inability to understand some basic fundamental concepts.

But we’re getting there.

854

Do I put everything back to the way it looked before?

855

What do you think that would achieve?

856

Why 2 different locations?

Bottom


    button.classList.add("active");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
   }

Top


    button.classList.add("active");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
   }
857

Previously it didn’t matter whether they were on top or bottom.

Now, due to the requirements that you want, it matters.

1 Like
859

Yes for the first, and no for the second.

We still want isPlaying() there, but we also need to check for isActive as well.
It needs to be (isActive() && isPlaying()) in there.

860

function isPlaying() {

to
function (isActive() && isPlaying())

861

No. It needs to happen as the condition of the if statement.