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

JavaScript
779

I’ve been using playing for all my players. But it doesn’t matter which I use I guess.

780

The others can be adjusted to fit too, for “playing” really isn’t suitable when it’s also paused a well.

781 
    function togglePlayButton(button) {
      var player = button.querySelector("audio");
      var play = button.querySelector(".play");
      var pause = button.querySelector(".pause");
      player.volume = 1.0;
      if (player.paused) {
        hide(play);
        show(pause);
        player.play();
        button.classList.add("paused");
      } else {
        button.classList.remove("active");
        show(play);
        hide(pause);
        player.pause();
      }

}
782

That code does nothing with active or playing, even in the CSS or HTML code. So the active line should be removed from that code.

783

This one uses playing

784

The playing in that code should be renamed to active, both in the JavaScript and in the CSS code.

785

Got it, back to the other code.

786

Now that it is “active” that is being used, the function can be called isActive where it accepts button as the first parameter of the function.

787
788

The function is still named isPlaying.

Rename it to isActive

789
790

The end of that isActive function line has an error because of the semicolon. Remove it.

791
792

We must make sure that we keep things working.

I assumed that it was working when we started off with the https://jsfiddle.net/aebwrk6p/ code, but it’s not. We need to get the https://jsfiddle.net/aebwrk6p/16/ code working before we carry on.

793

I didn’t mention that, thought you knew.

794

I’m just taking a closer look at the https://jsfiddle.net/aebwrk6p/16/ code, and you’ve really screwed things up.

The player.volume line should be above the if statement, and the button/hide/link lines need to be moved below the block of if/else code.

795

Here’s some info about how JavaScript code is grouped using block statements, with the { and } braces.

1 Like
796

Like this?

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


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


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

I think that you might be failing to understand how to tell the end of the if/else block of code.

In JSFiddle, click on the left opening brace at the end of the if statement line. The other highlighted brace is the end of the if statement.

Now click on the left opening brace at the end of the else clause. The other highlighted brace is the end of the else clause.

The end of the if/else block of code is at the end of the else clause.

You need to move those three button/hide/link statements down, until they come after the end of the if/else block of code.

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